// Homepage — cinematic hero, philosophy, featured projects, capabilities,
// leadership, regional presence, process, closing — all on real GenTech imagery.
const { useState: useStateH, useEffect: useEffectH } = React;

function HomeHero({ headlineIndex }) {
  const h = HERO_HEADLINES[headlineIndex] || HERO_HEADLINES[0];
  return (
    <section style={{ position: "relative", height: "100vh", minHeight: 720, overflow: "hidden" }} data-screen-label="01 Home — Hero">
      <div className="img" style={{
        position: "absolute", inset: 0,
        backgroundImage: `url(${IMG("01_Brow-Wood-7203_about-hero.jpg")})`,
        backgroundPosition: "center 40%",
      }} />
      <div className="cine-grad" />

      <div className="container" style={{
        position: "relative", zIndex: 5, height: "100%",
        display: "flex", flexDirection: "column", justifyContent: "flex-end",
        paddingBottom: "12vh",
      }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 48 }}>
          <div style={{ maxWidth: 1100 }}>
            <div className="eyebrow" style={{ marginBottom: 32, color: "var(--bone-2)" }}>
              <span className="dot"></span>Chattanooga, Tennessee — Commercial · Residential · Maintenance
            </div>
            <h1 style={{ fontSize: "clamp(60px, 8.5vw, 150px)", lineHeight: .95, letterSpacing: "-0.02em", color: "var(--bone)" }}>
              {h.line1} <span className="italic" style={{ color: "var(--bone)" }}>{h.line2}</span>
            </h1>
          </div>
          <div style={{ minWidth: 260, maxWidth: 320, color: "var(--bone-2)", fontSize: 14.5, lineHeight: 1.65 }}>
            <div style={{ borderTop: "1px solid rgba(237,232,220,.3)", paddingTop: 20 }}>
              A Chattanooga builder working across Tennessee, Georgia, and Alabama — custom homes, commercial and healthcare projects, and the long-term care to maintain them.
            </div>
          </div>
        </div>

        <div style={{
          marginTop: 64,
          display: "grid", gridTemplateColumns: "auto 1fr auto", alignItems: "center", gap: 32,
          borderTop: "1px solid rgba(237,232,220,.18)", paddingTop: 22,
        }}>
          <div style={{ display: "flex", gap: 16 }}>
            <button className="btn" onClick={() => window.__route("projects")}>
              View Selected Work <span className="arr">→</span>
            </button>
            <button className="btn ghost" onClick={() => window.__route("about")}>
              The Practice
            </button>
          </div>
          <div></div>
          <div style={{ display: "flex", gap: 28, alignItems: "center", color: "var(--bone-2)", fontSize: 11.5, letterSpacing: ".14em", textTransform: "uppercase" }}>
            <span><span style={{ color: "var(--bronze-2)" }}>●</span> AR Homes Builder #135</span>
            <span>Scroll ↓</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function PhilosophyBlock() {
  return (
    <section className="section" data-screen-label="01 Home — Philosophy">
      <div className="container">
        <div className="grid grid-12">
          <div style={{ gridColumn: "1 / span 4" }}>
            <div className="eyebrow"><span className="dot"></span>The Practice</div>
          </div>
          <div style={{ gridColumn: "5 / span 8" }}>
            <Reveal>
              <p style={{
                fontFamily: "var(--serif)", fontSize: "clamp(28px, 3vw, 48px)", lineHeight: 1.2,
                color: "var(--bone)", margin: 0, fontWeight: 300, letterSpacing: "-0.01em",
              }}>
                GenTech builds the places the Chattanooga region lives, works, heals, and gathers —
                custom homes on the mountain, healthcare and commercial work in the city, and the maintenance that keeps them standing.
                <span className="italic" style={{ color: "var(--bronze-2)" }}> We do it the way you earn a reputation in a region: one relationship at a time.</span>
              </p>
            </Reveal>
            <Reveal delay={200}>
              <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
                {[
                  { t: "Relationships", b: "Our work comes from owners, architects, and developers who have built with us before — and send the next project our way." },
                  { t: "Range",         b: "Commercial, residential, and maintenance under one roof. Few regional builders can carry a hospital and a custom home with equal care." },
                  { t: "Stewardship",   b: "Our name ends in maintenance for a reason. We stay accountable for a building long after the final walk-through." },
                ].map(x => (
                  <div key={x.t}>
                    <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, color: "var(--bronze-2)", marginBottom: 12 }}>{x.t}.</div>
                    <p style={{ margin: 0, color: "var(--bone-2)", fontSize: 14, lineHeight: 1.65 }}>{x.b}</p>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function FeaturedProjects() {
  const order = ["brow-wood", "mclemore", "harper-lake", "ridge-residence"];
  const featured = order.map(id => PROJECTS.find(p => p.id === id)).filter(Boolean);
  return (
    <section className="section" style={{ background: "var(--bg)", borderTop: "1px solid var(--line)" }} data-screen-label="01 Home — Featured Work">
      <div className="container">
        <SectionTitle
          eyebrow="Selected Work"
          title={<>A body of work <br /><span className="italic" style={{ color: "var(--bronze-2)" }}>across the region.</span></>}
          sub="From a stone community building on the brow of Lookout Mountain to healthcare and recreation projects in the city — a range that few regional builders can match."
        />
        <div className="grid grid-12" style={{ alignItems: "start" }}>
          <Reveal style={{ gridColumn: "1 / span 7" }}>
            <ProjectTile project={featured[0]} index={0} aspect="ar-4-5" onClick={() => window.__openProject(featured[0].id)} />
          </Reveal>
          <Reveal delay={120} style={{ gridColumn: "8 / span 5", marginTop: 96 }}>
            <ProjectTile project={featured[1]} index={1} aspect="ar-4-5" onClick={() => window.__openProject(featured[1].id)} />
          </Reveal>
          <Reveal style={{ gridColumn: "1 / span 5", marginTop: 32 }}>
            <ProjectTile project={featured[2]} index={2} aspect="ar-3-4" onClick={() => window.__openProject(featured[2].id)} />
          </Reveal>
          <Reveal delay={120} style={{ gridColumn: "6 / span 7", marginTop: 32 }}>
            <ProjectTile project={featured[3]} index={3} aspect="ar-3-4" onClick={() => window.__openProject(featured[3].id)} />
          </Reveal>
        </div>
        <div style={{ marginTop: 64, display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid var(--line)", paddingTop: 32 }}>
          <div className="eyebrow">Selected projects · view full portfolio</div>
          <button className="btn bronze" onClick={() => window.__route("projects")}>
            All Work <span className="arr">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

function MarqueeBlock() {
  const items = ["Custom Homes", "Healthcare", "Senior Living", "Commercial", "Recreation", "Banking", "Adaptive Reuse", "Maintenance"];
  return <Marquee items={items} />;
}

function ServicesPreview() {
  return (
    <section className="section" data-screen-label="01 Home — Capabilities">
      <div className="container">
        <SectionTitle
          eyebrow="Capabilities"
          title={<>Commercial. Residential. <br/><span className="italic" style={{ color: "var(--bronze-2)" }}>Maintenance.</span></>}
          sub="The promise has been on our name from the start. Six disciplines, held to a single standard of craft and accountability."
        />
        <div style={{ borderTop: "1px solid var(--line)" }}>
          {SERVICES.map((s, i) => (
            <ServiceRow key={s.id} s={s} i={i} />
          ))}
        </div>
        <div style={{ marginTop: 48, display: "flex", justifyContent: "flex-end" }}>
          <button className="btn ghost" onClick={() => window.__route("services")}>
            Capabilities in Detail <span className="arr">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

function ServiceRow({ s, i }) {
  const [hover, setHover] = useStateH(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: "grid", gridTemplateColumns: "100px 1fr 1.4fr 60px",
        alignItems: "center", padding: "28px 0", borderBottom: "1px solid var(--line)",
        cursor: "pointer", transition: "padding .35s ease, background .35s ease",
        paddingLeft: hover ? 16 : 0, paddingRight: hover ? 16 : 0,
        background: hover ? "var(--bg-2)" : "transparent",
      }}
      onClick={() => window.__route("services")}
    >
      <div style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".14em", color: "var(--bone-3)" }}>—{s.num}</div>
      <div style={{ fontFamily: "var(--serif)", fontSize: "clamp(28px, 3vw, 44px)", color: hover ? "var(--bronze-2)" : "var(--bone)", transition: "color .3s ease" }}>
        {s.title}
      </div>
      <div style={{ color: "var(--bone-2)", fontSize: 14.5, lineHeight: 1.6, maxWidth: 560 }}>{s.blurb}</div>
      <div style={{ textAlign: "right", color: hover ? "var(--bronze)" : "var(--bone-4)", fontSize: 20, transition: "color .3s ease, transform .3s ease", transform: hover ? "translateX(4px)" : "none" }}>→</div>
    </div>
  );
}

function LeadershipPreview() {
  return (
    <section className="section" style={{ background: "var(--bg-2)" }} data-screen-label="01 Home — Leadership">
      <div className="container">
        <div className="grid grid-12" style={{ alignItems: "end", marginBottom: 64 }}>
          <div style={{ gridColumn: "1 / span 6" }}>
            <div className="eyebrow" style={{ marginBottom: 22 }}><span className="dot"></span>The People</div>
            <h2 style={{ fontSize: "clamp(40px, 5vw, 72px)" }}>
              A leadership team <br /><span className="italic" style={{ color: "var(--bronze-2)" }}>that picks up the phone.</span>
            </h2>
          </div>
          <div style={{ gridColumn: "8 / span 5", color: "var(--bone-2)", fontSize: 15, lineHeight: 1.65 }}>
            Decisions are made by the people who build the work. Every project has a principal who knows it by name — accessible, accountable, and on site.
          </div>
        </div>
        <div className="grid grid-3">
          {LEADERSHIP.map((p, i) => (
            <Reveal key={p.id} delay={i * 80}>
              <LeaderCard p={p} />
            </Reveal>
          ))}
        </div>
        <div style={{ marginTop: 48, display: "flex", justifyContent: "flex-end" }}>
          <button className="btn ghost" onClick={() => window.__route("about")}>
            Meet the Practice <span className="arr">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

function LeaderCard({ p }) {
  return (
    <div>
      {p.img ? (
        <div className="img ar-3-4" style={{ backgroundImage: `url(${p.img})`, backgroundPosition: "center 25%", filter: "saturate(.85)" }}>
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(15,16,12,0) 55%, rgba(15,16,12,.6) 100%)" }} />
        </div>
      ) : (
        <PortraitSlot name={p.name} />
      )}
      <div style={{ marginTop: 16 }}>
        <div style={{ fontFamily: "var(--serif)", fontSize: 24, color: "var(--bone)" }}>{p.name}</div>
        <div style={{ fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--bone-3)", marginTop: 4 }}>{p.role}</div>
        <p style={{ marginTop: 14, color: "var(--bone-2)", fontSize: 14, lineHeight: 1.6 }}>{p.note}</p>
      </div>
    </div>
  );
}

function PortraitSlot({ name }) {
  const initials = name.split(" ").map(w => w[0]).join("");
  return (
    <div className="img ar-3-4" style={{ background: "linear-gradient(160deg, var(--bg-3), var(--bg-2))", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <div style={{ textAlign: "center", color: "var(--bone-4)" }}>
        <div style={{ fontFamily: "var(--serif)", fontSize: 56, color: "var(--bronze-2)", opacity: .5 }}>{initials}</div>
        <div className="eyebrow" style={{ marginTop: 12 }}>Portrait — pending</div>
      </div>
    </div>
  );
}

function RegionalPreview() {
  return (
    <section className="section" data-screen-label="01 Home — Regions">
      <div className="container">
        <div className="grid grid-12" style={{ gap: 32, alignItems: "start" }}>
          <div style={{ gridColumn: "1 / span 5", position: "sticky", top: 96 }}>
            <div className="eyebrow" style={{ marginBottom: 22 }}><span className="dot"></span>Regional Presence</div>
            <h2 style={{ fontSize: "clamp(40px, 5vw, 64px)" }}>
              At home <br /><span className="italic" style={{ color: "var(--bronze-2)" }}>on the mountain and in the city.</span>
            </h2>
            <p style={{ color: "var(--bone-2)", marginTop: 24, lineHeight: 1.65, maxWidth: 420 }}>
              Anchored in Chattanooga, GenTech works from the Tennessee River up to the brow of Lookout Mountain, and across the lines into Georgia and Alabama — regions whose builders, materials, and weather we know intimately.
            </p>
            <div style={{ marginTop: 36, display: "flex", gap: 12 }}>
              {["Tennessee", "Georgia", "Alabama"].map(s => (
                <div key={s} style={{ borderTop: "1px solid var(--line)", paddingTop: 14, flex: 1 }}>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--bone)" }}>{s}</div>
                </div>
              ))}
            </div>
            <button className="btn ghost" style={{ marginTop: 36 }} onClick={() => window.__route("map")}>
              Open the Map <span className="arr">→</span>
            </button>
          </div>
          <div style={{ gridColumn: "7 / span 6" }}>
            <MiniMap />
          </div>
        </div>
      </div>
    </section>
  );
}

function MiniMap() {
  const [hover, setHover] = useStateH(null);
  return (
    <div style={{ position: "relative", aspectRatio: "1 / 1", background: "var(--bg-2)", border: "1px solid var(--line)", overflow: "hidden" }}>
      <RegionalMapSVG />
      {REGIONS.map(r => (
        <div key={r.id}
          className={"map-pin " + (hover === r.id ? "active" : "")}
          style={{ left: r.x + "%", top: r.y + "%" }}
          onMouseEnter={() => setHover(r.id)} onMouseLeave={() => setHover(null)}
        />
      ))}
      {hover && (() => {
        const r = REGIONS.find(x => x.id === hover);
        return (
          <div style={{
            position: "absolute", left: r.x + "%", top: r.y + "%",
            transform: "translate(16px, -10px)",
            background: "rgba(19,20,15,.92)", border: "1px solid var(--line-2)",
            padding: "10px 14px", color: "var(--bone)", fontSize: 12,
            letterSpacing: ".06em", whiteSpace: "nowrap", pointerEvents: "none",
          }}>
            <div style={{ fontFamily: "var(--serif)", fontSize: 16 }}>{r.name}</div>
            <div className="eyebrow" style={{ marginTop: 4 }}>{r.state}</div>
          </div>
        );
      })()}
      <div style={{ position: "absolute", top: 16, right: 16, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".2em", color: "var(--bone-3)" }}>N ↑</div>
    </div>
  );
}

function RegionalMapSVG() {
  return (
    <svg viewBox="0 0 600 600" style={{ width: "100%", height: "100%", display: "block" }}>
      <defs>
        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M40 0H0V40" fill="none" stroke="rgba(58,64,52,.35)" strokeWidth=".5" />
        </pattern>
        <radialGradient id="warm" cx="42%" cy="42%" r="50%">
          <stop offset="0%" stopColor="rgba(176,130,90,.10)" />
          <stop offset="100%" stopColor="rgba(176,130,90,0)" />
        </radialGradient>
      </defs>
      <rect width="600" height="600" fill="url(#grid)" />
      <rect width="600" height="600" fill="url(#warm)" />
      <path d="M 40 90 L 560 60 L 570 220 L 50 250 Z" fill="rgba(58,64,52,.35)" stroke="rgba(122,133,105,.5)" strokeWidth="1" />
      <path d="M 300 250 L 570 220 L 540 540 L 320 540 Z" fill="rgba(58,64,52,.28)" stroke="rgba(122,133,105,.4)" strokeWidth="1" />
      <path d="M 50 250 L 300 250 L 320 540 L 90 540 Z" fill="rgba(58,64,52,.22)" stroke="rgba(122,133,105,.4)" strokeWidth="1" />
      {Array.from({ length: 8 }).map((_, i) => (
        <ellipse key={i} cx={250 + i*4} cy={270 + i*6} rx={120 + i*38} ry={64 + i*20}
          fill="none" stroke="rgba(176,130,90,.10)" strokeWidth=".7" />
      ))}
      <text x={300} y={170} textAnchor="middle" fill="rgba(237,232,220,.4)" fontSize="22" fontFamily="Cormorant Garamond" fontStyle="italic">Tennessee</text>
      <text x={200} y={420} textAnchor="middle" fill="rgba(237,232,220,.35)" fontSize="20" fontFamily="Cormorant Garamond" fontStyle="italic">Alabama</text>
      <text x={420} y={440} textAnchor="middle" fill="rgba(237,232,220,.35)" fontSize="20" fontFamily="Cormorant Garamond" fontStyle="italic">Georgia</text>
      {/* Chattanooga marker */}
      <text x={300} y={250} textAnchor="middle" fill="rgba(176,130,90,.8)" fontSize="13" fontFamily="Geist Mono" letterSpacing="2">CHATTANOOGA</text>
      <path d="M 50 235 Q 200 290 320 240 Q 460 195 570 250" fill="none" stroke="rgba(176,130,90,.35)" strokeWidth="1.2" />
    </svg>
  );
}

function ProcessBlock() {
  const steps = [
    { n: "01", t: "Listen", b: "We spend more time understanding intent than counting square footage. The first conversation sets the trajectory for everything after." },
    { n: "02", t: "Plan",   b: "Conceptual budgets, constructability, phasing. The design gets sharper because the build is already understood." },
    { n: "03", t: "Build",  b: "On site, the work is led by a principal you've met. A short chain of command. Healthcare, home, or storefront — same standard." },
    { n: "04", t: "Maintain", b: "Our name ends in maintenance. Closeout is not an exit — the building, and the relationship, both keep going." },
  ];
  return (
    <section className="section" style={{ background: "var(--bg)" }} data-screen-label="01 Home — Process">
      <div className="container">
        <SectionTitle
          eyebrow="The Method"
          title={<>From first walk <br /><span className="italic" style={{ color: "var(--bronze-2)" }}>to long after the last.</span></>}
          sub="A calm, well-rehearsed operation — modern coordination, traditional craft, and a short, accountable chain of command from the first meeting to ongoing care."
        />
        <div className="grid grid-4">
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 80}>
              <div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".2em", color: "var(--bronze-2)", marginBottom: 28 }}>—{s.n}</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 32, color: "var(--bone)", marginBottom: 14 }}>{s.t}</div>
                <div style={{ color: "var(--bone-2)", fontSize: 14, lineHeight: 1.65 }}>{s.b}</div>
                <div style={{ height: 1, background: "var(--line)", marginTop: 32 }} />
              </div>
            </Reveal>
          ))}
        </div>

        {/* Build / craft band — real timber-truss framing photography */}
        <Reveal>
          <div style={{ marginTop: 96, display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 0, border: "1px solid var(--line)" }}>
            <div className="img" style={{ backgroundImage: `url(${IMG("fb_01_timber-truss-roof-framing-1688x2048.jpg")})`, minHeight: 480, backgroundPosition: "center 40%" }} />
            <div style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "center", background: "var(--bg-2)" }}>
              <div className="eyebrow"><span className="dot"></span>The Work Itself</div>
              <h3 style={{ fontSize: "clamp(28px, 3vw, 44px)", marginTop: 20, lineHeight: 1.1 }}>
                Heavy timber, <span className="italic" style={{ color: "var(--bronze-2)" }}>set against a clear sky.</span>
              </h3>
              <p style={{ color: "var(--bone-2)", marginTop: 20, maxWidth: 480, lineHeight: 1.7 }}>
                The craft shows long before the finishes go on. Exposed trusses, steel connections, and a roofline framed true — the parts of a building only the builder ever sees are exactly where our standard is set.
              </p>
              <div style={{ marginTop: 28 }}>
                <button className="btn ghost" onClick={() => window.__route("services")}>
                  How We Work <span className="arr">→</span>
                </button>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function HomeClosingCTA() {
  return (
    <section style={{ position: "relative", height: "78vh", minHeight: 560, overflow: "hidden" }} data-screen-label="01 Home — Closing">
      <div className="img" style={{
        position: "absolute", inset: 0,
        backgroundImage: `url(${IMG("fb_02_stone-clubhouse-twilight-exterior-1659x1667.jpg")})`,
        backgroundPosition: "center 55%",
      }} />
      <div className="cine-grad" />
      <div className="container" style={{ position: "relative", height: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end", paddingBottom: "10vh", zIndex: 2 }}>
        <div className="eyebrow" style={{ marginBottom: 22 }}><span className="dot"></span>Begin a Project</div>
        <h2 style={{ fontSize: "clamp(48px, 7vw, 110px)", maxWidth: 1100 }}>
          When the project matters, <br /><span className="italic" style={{ color: "var(--bronze-2)" }}>so does the builder you choose.</span>
        </h2>
        <div style={{ marginTop: 40, display: "flex", gap: 20, alignItems: "center" }}>
          <button className="btn bronze" onClick={() => window.__route("about")}>
            Start a Conversation <span className="arr">→</span>
          </button>
          <span style={{ color: "var(--bone-2)", fontSize: 13 }}>Chattanooga · TN · GA · AL</span>
        </div>
      </div>
    </section>
  );
}

function HomePage({ headlineIndex }) {
  return (
    <div className="page">
      <HomeHero headlineIndex={headlineIndex} />
      <PhilosophyBlock />
      <FeaturedProjects />
      <MarqueeBlock />
      <ServicesPreview />
      <LeadershipPreview />
      <RegionalPreview />
      <ProcessBlock />
      <HomeClosingCTA />
    </div>
  );
}

Object.assign(window, { HomePage, MiniMap, RegionalMapSVG, LeaderCard, PortraitSlot });
