/* LANDING (C) — editorial first chapter */

const M = window.MAF;

function Landing() {
  const { navigate } = M.useRoute();
  const data = M.useData();
  const counts = data.lots.reduce((acc, l) => { acc[l.status] = (acc[l.status] || 0) + 1; return acc; }, {});

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

      {/* full-bleed hero */}
      <div style={{ position: "relative", height: 540 }}>
        <M.Img dark label="hero · drone over 300 acres of Madison County countryside"
               style={{ position: "absolute", inset: 0, borderRadius: 0, border: "none" }} />
        <div className="col center" style={{
          position: "absolute", inset: 0, paddingTop: 96, textAlign: "center", zIndex: 2
        }}>
          <M.Eyebrow style={{ color: "rgba(251,251,249,0.75)" }}>Welcome, Caroline · Phase 1 reservations live</M.Eyebrow>
          <div className="t-h1" style={{
            color: "var(--bg-primary)", fontSize: 88, marginTop: 14,
            fontStyle: "italic", fontWeight: 400, lineHeight: 1.04, maxWidth: 1000
          }}>
            Begin the walkthrough.
          </div>
          <M.Note style={{ color: "rgba(251,251,249,0.85)", maxWidth: 580, marginTop: 16 }}>
            147 homesites across 300 acres — the fastest path is the site plan, but every door below is open.
          </M.Note>
        </div>

        {/* phase counter strip */}
        <div className="row between center" style={{
          position: "absolute", bottom: 0, left: 0, right: 0,
          padding: "20px 40px",
          background: "rgba(28,25,23,0.55)", color: "var(--bg-primary)",
          zIndex: 2
        }}>
          <div className="row gap-10">
            <div>
              <M.Eyebrow style={{ color: "rgba(251,251,249,0.6)" }}>Available</M.Eyebrow>
              <div className="t-h4" style={{ color: "var(--bg-primary)", marginTop: 2 }}>{counts.available || 0}</div>
            </div>
            <div>
              <M.Eyebrow style={{ color: "rgba(251,251,249,0.6)" }}>Reserved</M.Eyebrow>
              <div className="t-h4" style={{ color: "var(--bg-primary)", marginTop: 2 }}>{counts.reserved || 0}</div>
            </div>
            <div>
              <M.Eyebrow style={{ color: "rgba(251,251,249,0.6)" }}>Sold</M.Eyebrow>
              <div className="t-h4" style={{ color: "var(--bg-primary)", marginTop: 2 }}>{counts.sold || 0}</div>
            </div>
            <div>
              <M.Eyebrow style={{ color: "rgba(251,251,249,0.6)" }}>Coming soon</M.Eyebrow>
              <div className="t-h4" style={{ color: "var(--bg-primary)", marginTop: 2 }}>{counts.soon || 0}</div>
            </div>
          </div>
          <M.Eyebrow style={{ color: "rgba(251,251,249,0.85)" }}>Reservations open spring 2026 →</M.Eyebrow>
        </div>
      </div>

      {/* asymmetric grid */}
      <div className="row" style={{ padding: "56px 40px", gap: 16 }}>
        <div className="col grow" style={{ flex: 2 }}>
          <div className="wf-card col" style={{ padding: 0, cursor: 'pointer' }} onClick={() => navigate('siteplan')}>
            <div style={{ position: "relative" }}>
              <SitePlanThumb height={400}/>
              <div style={{
                position: "absolute", left: 24, bottom: 24,
                background: "var(--bg-primary)", padding: 18, maxWidth: 320,
                border: '1px solid var(--neutral-200)', borderRadius: 4
              }}>
                <M.Eyebrow>The site plan</M.Eyebrow>
                <div className="t-h3" style={{ marginTop: 4 }}>{data.count} homesites, 300 acres.</div>
                <M.Note style={{ fontSize: 12, marginTop: 6 }}>Hover any lot for type, builder, price. Filter by orientation, builder, or price band.</M.Note>
                <M.Eyebrow style={{ marginTop: 10 }}>Open site plan →</M.Eyebrow>
              </div>
            </div>
          </div>
        </div>
        <div className="col grow gap-3" style={{ flex: 1 }}>
          <Tile e="Six teams" t="Builders" n="Brand stories & assigned lots" onClick={() => navigate('builders')}/>
          <Tile e="Twenty-two plans" t="Floor Plans" n="Cottage & estate" onClick={() => navigate('plans')}/>
          <Tile e="Reference" t="Pattern Book" n="Styles, palette, materials" onClick={() => navigate('pattern')}/>
        </div>
      </div>

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

function Tile({ e, t, n, onClick }) {
  return (
    <div className="wf-card row" style={{ padding: 0, flex: 1, overflow: "hidden", cursor: 'pointer' }} onClick={onClick}>
      <M.Img label="" style={{ width: 130, borderRadius: 0, border: "none" }} />
      <div className="col gap-2" style={{ padding: 18, flex: 1 }}>
        <M.Eyebrow>{e}</M.Eyebrow>
        <div className="t-h4">{t}</div>
        <M.Note style={{ fontSize: 12 }}>{n}</M.Note>
        <M.Eyebrow style={{ marginTop: 'auto' }}>Open →</M.Eyebrow>
      </div>
    </div>
  );
}

/* A small thumbnail of the real site plan (no filters, no hover). */
function SitePlanThumb({ height = 320 }) {
  const filters = { type: { cottage: true, estate: true }, status: { available: true, reserved: true, sold: true, soon: true }, price: 'all', builder: 'all' };
  return <M.SitePlanMap filters={filters} showAerial={true} height={height}/>;
}

window.MAF.Landing = Landing;