// About / Practice / Leadership — built on real, known facts only.
function AboutPage() {
  return (
    <div className="page" data-screen-label="04 About">
      <section style={{ position: "relative", paddingTop: "calc(var(--pad) + 120px)", paddingBottom: 80, overflow: "hidden" }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 28 }}><span className="dot"></span>The Practice</div>
          <h1 style={{ fontSize: "clamp(60px, 8.5vw, 150px)", lineHeight: .95, maxWidth: 1300 }}>
            A Chattanooga builder, <span className="italic" style={{ color: "var(--bronze-2)" }}>built on the long view.</span>
          </h1>
          <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "end" }}>
            <p style={{ fontFamily: "var(--serif)", fontSize: "clamp(22px, 2.2vw, 32px)", lineHeight: 1.35, color: "var(--bone)", margin: 0, maxWidth: 820, fontWeight: 300 }}>
              GenTech Construction is a Chattanooga-based builder working across Tennessee, Georgia, and Alabama. Commercial, residential, and maintenance — three disciplines under one roof, around one quiet conviction: the best work happens where talent, trust, and time are allowed to do what they do.
            </p>
            <div className="grid grid-2">
              {STATS.slice(0, 4).map(s => <Stat key={s.label} {...s} />)}
            </div>
          </div>
        </div>
      </section>

      {/* Big environmental image — Harper Lake great room */}
      <section>
        <div className="container">
          <div className="img ar-21-9" style={{ backgroundImage: `url(${IMG("13_AR-Alden-Model_LivingRoom.jpg")})`, backgroundPosition: "center 60%" }} />
        </div>
      </section>

      {/* Values */}
      <section className="section">
        <div className="container">
          <div className="grid grid-12" style={{ gap: 64 }}>
            <div style={{ gridColumn: "1 / span 4" }}>
              <div className="eyebrow"><span className="dot"></span>What We Hold</div>
              <h2 style={{ fontSize: "clamp(36px, 4vw, 56px)", marginTop: 20 }}>
                A handful of <span className="italic" style={{ color: "var(--bronze-2)" }}>principles.</span>
              </h2>
            </div>
            <div style={{ gridColumn: "5 / span 8" }}>
              {[
                { t: "Relationships before transactions", b: "We aim to be the builder our owners and architects come back to — and recommend without being asked. Repeat work is not a side effect of how we operate; it is the operation." },
                { t: "Range, held to one standard", b: "Few regional builders carry custom homes, healthcare, commercial, and maintenance with equal care. We do — and each gets the same senior attention." },
                { t: "Stewardship of the work", b: "Our name ends in maintenance for a reason. A building belongs to the people who use it, and we stay accountable for it long after the final walk-through." },
                { t: "Regional roots", b: "Chattanooga, the mountain, and the tri-state region. We know our markets, our trade partners, and our weather. We're not interested in being everywhere — only in being the right builder here." },
              ].map((v, i) => (
                <Reveal key={v.t} delay={i * 80}>
                  <div style={{ borderTop: "1px solid var(--line)", padding: "32px 0", display: "grid", gridTemplateColumns: "60px 1fr", gap: 32 }}>
                    <div style={{ fontFamily: "var(--mono)", color: "var(--bone-3)", fontSize: 12, letterSpacing: ".14em" }}>—{String(i + 1).padStart(2, "0")}</div>
                    <div>
                      <h3 style={{ fontSize: "clamp(22px, 2vw, 30px)", marginBottom: 14, lineHeight: 1.25 }}>{v.t}</h3>
                      <p style={{ color: "var(--bone-2)", lineHeight: 1.7, margin: 0 }}>{v.b}</p>
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Leadership */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <SectionTitle
            eyebrow="Leadership"
            title={<>The people <span className="italic" style={{ color: "var(--bronze-2)" }}>accountable for the work.</span></>}
            sub="Every project carries a named principal — accessible by direct line, on site, and responsible for getting it right. Additional principal portraits are being photographed for the refresh."
          />
          <div className="grid grid-3" style={{ gap: 32 }}>
            {LEADERSHIP.map((p, i) => (
              <Reveal key={p.id} delay={i * 80}>
                <LeaderCard p={p} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* AR Homes partnership */}
      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "1px solid var(--line)" }}>
            <div className="img" style={{ backgroundImage: `url(${IMG("11_AR-Alden-Model_Front-Dusk.jpg")})`, minHeight: 460 }} />
            <div style={{ padding: 56, display: "flex", flexDirection: "column", justifyContent: "center", background: "var(--bg-2)" }}>
              <div className="eyebrow"><span className="dot"></span>AR Homes Builder #135</div>
              <h2 style={{ fontSize: "clamp(32px, 3.5vw, 52px)", marginTop: 20, lineHeight: 1.05 }}>
                A national luxury home program, <span className="italic" style={{ color: "var(--bronze-2)" }}>built by your neighbors.</span>
              </h2>
              <p style={{ color: "var(--bone-2)", marginTop: 22, lineHeight: 1.7, maxWidth: 480 }}>
                As the AR Homes builder for the Chattanooga area, GenTech pairs an established custom-home program — plan library, design resources, and selections — with local craft, field oversight, and a single point of accountability. The Lookout and Alden are among the plans we build.
              </p>
              <div style={{ marginTop: 28 }}>
                <button className="btn ghost" onClick={() => window.__openProject("ar-alden")}>
                  Tour the Alden <span className="arr">→</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Begin a conversation */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <div className="grid grid-2" style={{ gap: 64, alignItems: "start" }}>
            <div>
              <div className="eyebrow"><span className="dot"></span>Start a Conversation</div>
              <h2 style={{ fontSize: "clamp(40px, 5vw, 72px)", marginTop: 22 }}>
                Tell us what <br /><span className="italic" style={{ color: "var(--bronze-2)" }}>you're building.</span>
              </h2>
              <p style={{ color: "var(--bone-2)", marginTop: 22, maxWidth: 460, lineHeight: 1.7 }}>
                Every inquiry is read and answered by a member of the team. We'll follow up to learn more about your project and how we can help.
              </p>
              <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, maxWidth: 460 }}>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>Based In</div>
                  <div style={{ color: "var(--bone)", fontSize: 14, lineHeight: 1.5 }}>Chattanooga, Tennessee<br/>Serving TN · GA · AL</div>
                </div>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>Contact</div>
                  <div style={{ color: "var(--bone)", fontSize: 14 }}>By appointment<br/><a className="uline">gentechconstruction.com</a></div>
                </div>
              </div>
            </div>
            <ContactForm />
          </div>
        </div>
      </section>
    </div>
  );
}

function ContactForm() {
  const [data, setData] = React.useState({ name: "", company: "", email: "", project: "Custom Residential", message: "" });
  const [sent, setSent] = React.useState(false);
  const onChange = (k, v) => setData(d => ({ ...d, [k]: v }));
  const onSubmit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <form onSubmit={onSubmit} style={{ background: "var(--bg)", border: "1px solid var(--line)", padding: 36, display: "flex", flexDirection: "column", gap: 22 }}>
      {sent ? (
        <div style={{ padding: "20px 0" }}>
          <div className="eyebrow" style={{ color: "var(--bronze-2)" }}>✓ Received</div>
          <h3 style={{ fontSize: 28, marginTop: 14, lineHeight: 1.3 }}>Thank you, {data.name || "—"}. We'll be in touch shortly.</h3>
          <p style={{ color: "var(--bone-2)", marginTop: 14 }}>Your message has been routed to the team. We'll follow up to learn more about your project.</p>
        </div>
      ) : (
        <>
          {[["name", "Your Name"], ["company", "Company / Firm"], ["email", "Email"]].map(([k, l]) => (
            <Field key={k} label={l} value={data[k]} onChange={v => onChange(k, v)} />
          ))}
          <div>
            <div className="eyebrow" style={{ marginBottom: 10 }}>Project Type</div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {["Custom Residential", "Commercial", "Healthcare", "Maintenance", "Other"].map(c => (
                <button key={c} type="button" className={"chip " + (data.project === c ? "active" : "")} onClick={() => onChange("project", c)}>{c}</button>
              ))}
            </div>
          </div>
          <Field label="Tell us about your project" value={data.message} onChange={v => onChange("message", v)} multiline />
          <button className="btn bronze" type="submit" style={{ alignSelf: "flex-start", marginTop: 12 }}>
            Send Inquiry <span className="arr">→</span>
          </button>
        </>
      )}
    </form>
  );
}

function Field({ label, value, onChange, multiline }) {
  const Input = multiline ? "textarea" : "input";
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <span className="eyebrow">{label}</span>
      <Input
        rows={multiline ? 4 : undefined}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        style={{
          background: "transparent", border: 0, borderBottom: "1px solid var(--line-2)",
          padding: "10px 0", color: "var(--bone)", font: "inherit", fontFamily: "var(--serif)", fontSize: 20,
          outline: "none", resize: multiline ? "vertical" : "none",
        }}
      />
    </label>
  );
}

Object.assign(window, { AboutPage });