/* BUILDERS — list overview + Builder C profile + simple pattern book / faq stubs */

const M = window.MAF;

const BUILDER_COPY = {
  artisan:     { city: 'Athens, GA',      voice: '"Crafting beautiful dreams into livable reality."',                              approach: 'Custom + semi-custom · 14–18 month build', psf: '$420 – $540 / sf', years: 18, homes: 62 },
  athens:      { city: 'Athens, GA',      voice: '"Providing a one of a kind experience for a one of a kind home."',                approach: 'Semi-custom · 12–16 month build',         psf: '$390 – $510 / sf', years: 22, homes: 94 },
  dreambuilt:  { city: 'Watkinsville, GA',voice: '"focused on thoughtful design, quality construction, and craftsmanship of our work."', approach: 'Custom · 16–22 month build',               psf: '$480 – $620 / sf', years: 14, homes: 41 },
  macallan:    { city: 'Athens, GA',      voice: '"Dedicated to enhancing the way our clients live."',                               approach: 'Custom · 14–20 month build',               psf: '$520 – $680 / sf', years: 9,  homes: 28 },
  southhaven:  { city: 'Athens, GA',      voice: '"Treasured homes to embrace the families who love them."', approach: 'Semi-custom · 12–18 month build',         psf: '$410 – $520 / sf', years: 11, homes: 38 },
  southernlux: { city: 'Madison County',  voice: '"Building beautiful homes so families can create lasting memories."',              approach: 'Custom · 18–24 month build',               psf: '$540 – $720 / sf', years: 26, homes: 84 },
};

function BuildersList() {
  const { navigate } = M.useRoute();
  const data = M.useData();
  return (
    <div className="wf-screen col" style={{ minHeight: '100vh' }}>
      <M.TopNav />

      <div className="col" style={{ padding: "48px 40px 24px" }}>
        <M.Eyebrow>The Walkthrough</M.Eyebrow>
        <div className="t-h1" style={{ fontSize: 64, marginTop: 8, fontStyle: 'italic', fontWeight: 400 }}>Six approved builders.</div>
        <M.Note style={{ maxWidth: 520, marginTop: 12 }}>
          Each works under the Madison Fields pattern book. Inquiries route through the team for a warm introduction; conversations are direct from there.
        </M.Note>
      </div>

      <div className="row" style={{ padding: "16px 40px 56px", gap: 16, flexWrap: 'wrap' }}>
        {data.builders.map(b => {
          const copy = BUILDER_COPY[b.id] || {};
          return (
            <div key={b.id} className="wf-card col" style={{ padding: 0, flex: '0 0 calc(33.333% - 11px)', cursor: 'pointer' }}
                 onClick={() => navigate('builder', { id: b.id })}>
              <M.Img label={`${b.name} · portfolio`} style={{ height: 240, borderRadius: 0, border: 'none' }}/>
              <div className="col gap-2" style={{ padding: 20 }}>
                <M.Eyebrow>{copy.city}</M.Eyebrow>
                <div className="t-h3" style={{ fontSize: 28 }}>{b.name}</div>
                <M.Note style={{ fontStyle: 'normal', color: 'var(--neutral-800)', fontSize: 13 }}>{copy.voice}</M.Note>
                <div className="row between" style={{ marginTop: 8, paddingTop: 12, borderTop: '1px solid var(--neutral-200)' }}>
                  <M.Eyebrow>{b.lots} lots</M.Eyebrow>
                  <M.Eyebrow>{b.plans.length} plans</M.Eyebrow>
                  <M.Eyebrow>{copy.years} yrs</M.Eyebrow>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <M.Footer />
    </div>
  );
}

/* Builder C — editorial profile */
function BuilderProfile() {
  const { route, navigate } = M.useRoute();
  const builder = M.useBuilder(route.id);
  const data = M.useData();
  if (!builder) {
    return (
      <div className="wf-screen col" style={{ minHeight: '100vh' }}>
        <M.TopNav />
        <div className="col center" style={{ flex: 1, padding: 80 }}>
          <M.Eyebrow>Unknown builder</M.Eyebrow>
          <button className="wf-btn" style={{ marginTop: 16 }} onClick={() => navigate('builders')}>Back to builders →</button>
        </div>
      </div>
    );
  }
  const copy = BUILDER_COPY[builder.id] || {};
  const builderLots = data.lots.filter(l => l.builderId === builder.id);

  return (
    <div className="wf-screen col" style={{ minHeight: '100vh' }}>
      <M.TopNav variant="translucent" />

      {/* split hero */}
      <div className="row" style={{ height: 560, position: "relative" }}>
        <M.Img dark label="principal portrait · large, editorial"
               style={{ flex: 1, borderRadius: 0, border: "none" }} />
        <div className="col" style={{
          flex: 1, padding: "120px 64px 64px", background: "var(--bg-secondary)",
          alignItems: "flex-start", justifyContent: "center"
        }}>
          <M.Eyebrow>One of six approved · Madison Fields</M.Eyebrow>
          <div className="t-h1" style={{ fontSize: 84, marginTop: 12, lineHeight: 0.98 }}>{builder.name}.</div>
          <M.Note style={{ fontSize: 14, marginTop: 18, maxWidth: 380 }}>
            {copy.years} years. {copy.homes} homes. {builder.plans.length} plans for these fields.
          </M.Note>
          <div className="row gap-3" style={{ marginTop: 28 }}>
            <button className="wf-btn">Inquire — MAF will introduce</button>
            <button className="wf-btn wf-btn-ghost" onClick={() => navigate('plans')}>Read the plans →</button>
          </div>
        </div>
      </div>

      {/* breadcrumb */}
      <div className="row gap-2 center" style={{ padding: "14px 40px", borderBottom: "1px solid var(--neutral-200)" }}>
        <M.Eyebrow style={{ cursor: 'pointer' }} onClick={() => navigate('builders')}>← Builders</M.Eyebrow>
        <span style={{ color: "var(--neutral-300)" }}>/</span>
        <M.Eyebrow style={{ color: 'var(--neutral-900)' }}>{builder.name}</M.Eyebrow>
      </div>

      {/* editorial body */}
      <div className="row" style={{ padding: "72px 64px 32px", gap: 64 }}>
        <div className="col" style={{ flex: 0, width: 220, paddingTop: 8 }}>
          <M.Eyebrow>Conversation with the principal</M.Eyebrow>
          <M.Note style={{ fontSize: 12, marginTop: 8, fontStyle: "italic" }}>
            On what makes a Madison Fields house feel like one.
          </M.Note>
        </div>
        <div className="col grow" style={{ maxWidth: 720, gap: 20 }}>
          <div className="t-h3" style={{ fontStyle: "italic", fontWeight: 400 }}>
            {copy.voice}
          </div>
          <M.Bars widths={["96%","94%","91%","88%","82%","78%"]} gap={10} />
          <M.Bars widths={["95%","92%","87%","75%"]} gap={10} />

          <div className="row gap-3" style={{ marginTop: 16 }}>
            <M.Img label="detail · entry" style={{ flex: 1, height: 240 }} />
            <M.Img label="detail · stair" style={{ flex: 1, height: 240 }} />
          </div>

          <M.Bars widths={["96%","92%","88%","74%"]} gap={10} />
        </div>
      </div>

      {/* portfolio strip */}
      <div className="col gap-3" style={{ padding: "32px 64px", background: "var(--bg-secondary)" }}>
        <div className="row between center">
          <M.Eyebrow>Selected work · {copy.homes} homes</M.Eyebrow>
          <M.Eyebrow>{copy.approach}</M.Eyebrow>
        </div>
        <div className="row gap-3">
          {["oconee estate","lake retreat","cottage","historic infill","five points"].map((l, i) => (
            <M.Img key={i} label={l} style={{ flex: 1, height: 260 }} />
          ))}
        </div>
      </div>

      {/* MAF assignment */}
      <div className="row" style={{ padding: "56px 64px", gap: 48 }}>
        <div className="col" style={{ flex: 0, width: 320 }}>
          <M.Eyebrow>In Madison Fields</M.Eyebrow>
          <div className="t-h2" style={{ fontSize: 36, marginTop: 8 }}>{builder.lots} lots.<br/>{builder.plans.length} plans.</div>
          <M.Note style={{ fontSize: 13, marginTop: 12 }}>
            Hover or click any highlighted lot to open it.
          </M.Note>
          <button className="wf-btn wf-btn-ghost" style={{ marginTop: 16, alignSelf: "flex-start" }}
                  onClick={() => navigate('siteplan')}>
            Open in site plan →
          </button>
        </div>
        <div className="col grow" style={{ background: 'var(--bg-primary)', border: '1px solid var(--neutral-200)', borderRadius: 4 }}>
          <BuilderLotsMap builderId={builder.id} height={400}/>
        </div>
      </div>

      {/* plans this builder offers */}
      <div className="col" style={{ padding: "32px 64px 56px" }}>
        <M.Eyebrow>Plans offered</M.Eyebrow>
        <div className="row gap-3" style={{ marginTop: 16, flexWrap: 'wrap' }}>
          {builder.plans.map(id => {
            const meta = window.MAF.PLAN_CATALOG[id] || { name: id, style: '', sqft: 0, bd: 0, ba: 0 };
            return (
              <div key={id} className="wf-card col" style={{ padding: 0, flex: "0 0 calc(25% - 12px)", cursor: 'pointer' }}
                   onClick={() => navigate('plan', { id })}>
                <M.Img label="floor plan" style={{ height: 140, borderRadius: 0, border: "none" }} />
                <div className="col gap-1" style={{ padding: 14 }}>
                  <M.Eyebrow>{meta.style}</M.Eyebrow>
                  <div className="t-h5">{meta.name}</div>
                  <M.Note style={{ fontSize: 11 }}>{meta.sqft.toLocaleString()} sf · {meta.bd} bd · {meta.ba} ba</M.Note>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <M.Footer />
    </div>
  );
}

function BuilderLotsMap({ builderId, height = 400 }) {
  const { navigate } = M.useRoute();
  const filters = {
    type: { cottage: true, estate: true },
    status: { available: true, reserved: true, sold: true, soon: true },
    price: 'all', builder: builderId
  };
  return (
    <M.SitePlanMap
      filters={filters}
      showAerial={true}
      onSelect={(l) => navigate('lot', { n: l.n })}
      height={height}
    />
  );
}

window.MAF.BuildersList = BuildersList;
window.MAF.BuilderProfile = BuilderProfile;