// Mobile experience — phone frames showing Home, Project, Capabilities
function MobilePage() {
  return (
    <div className="page" data-screen-label="08 Mobile">
      <section style={{ paddingTop: "calc(var(--pad) + 120px)", paddingBottom: 64 }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 28 }}><span className="dot"></span>Mobile Experience</div>
          <h1 style={{ fontSize: "clamp(56px, 8vw, 130px)", lineHeight: .96 }}>
            On the smaller screen, <span className="italic" style={{ color: "var(--bronze-2)" }}>more space, not less.</span>
          </h1>
          <p style={{ marginTop: 36, color: "var(--bone-2)", maxWidth: 720, fontSize: 17, lineHeight: 1.7 }}>
            Mobile is where most owners and architects actually open the site. The experience is designed to feel immersive and unhurried, with one focused decision per screen.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 120 }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-around", gap: 32, flexWrap: "wrap", padding: "40px 0" }}>
            <PhoneFrame label="01 · Home" caption="Cinematic hero, light navigation, focused next step.">
              <MobileHome />
            </PhoneFrame>
            <PhoneFrame label="02 · Project" caption="Editorial detail — one column, generous typography.">
              <MobileProject />
            </PhoneFrame>
            <PhoneFrame label="03 · Capabilities" caption="The three disciplines, scannable at a glance.">
              <MobileCapabilities />
            </PhoneFrame>
          </div>
        </div>
      </section>
    </div>
  );
}

function PhoneFrame({ label, caption, children }) {
  return (
    <div style={{ textAlign: "center" }}>
      <div className="phone">
        <div className="notch" />
        <div className="screen">{children}</div>
      </div>
      <div style={{ marginTop: 24 }}>
        <div className="eyebrow" style={{ marginBottom: 6 }}>{label}</div>
        <div style={{ color: "var(--bone-2)", fontSize: 13, maxWidth: 320, margin: "0 auto" }}>{caption}</div>
      </div>
    </div>
  );
}

function MobileHome() {
  return (
    <div style={{ width: "100%", height: "100%", overflow: "hidden", position: "relative" }}>
      <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 44, display: "flex", justifyContent: "space-between", alignItems: "center", padding: "0 28px", color: "var(--bone)", fontSize: 13, zIndex: 12, fontWeight: 600 }}>
        <span>9:41</span><span style={{ display: "flex", gap: 5 }}>●●●●</span>
      </div>
      <div className="img" style={{ position: "absolute", inset: 0, backgroundImage: `url(${IMG("01_Brow-Wood-7203_about-hero.jpg")})`, backgroundPosition: "center" }} />
      <div className="cine-grad" />
      <div style={{ position: "absolute", top: 60, left: 20, right: 20, display: "flex", justifyContent: "space-between", alignItems: "center", zIndex: 5, color: "var(--bone)" }}>
        <div style={{ display: "flex", gap: 8, alignItems: "center", fontFamily: "var(--sans)", fontSize: 10, letterSpacing: ".2em", fontWeight: 600 }}>
          <span style={{ width: 20, height: 20, border: "1px solid var(--bone)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 12 }}>G</span>
          GENTECH
        </div>
        <span style={{ fontSize: 18 }}>≡</span>
      </div>
      <div style={{ position: "absolute", bottom: 28, left: 24, right: 24, color: "var(--bone)" }}>
        <div className="eyebrow" style={{ marginBottom: 14, fontSize: 9, color: "var(--bone-2)" }}><span className="dot"></span>CHATTANOOGA · TN · GA · AL</div>
        <h2 style={{ fontFamily: "var(--serif)", fontSize: 36, lineHeight: .98 }}>
          Built on a foundation <span className="italic" style={{ color: "var(--bronze-2)" }}>of trust.</span>
        </h2>
        <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 8 }}>
          <button className="btn" style={{ padding: "12px 16px", fontSize: 10 }}>Selected Work →</button>
          <button className="btn ghost" style={{ padding: "12px 16px", fontSize: 10 }}>The Practice</button>
        </div>
      </div>
    </div>
  );
}

function MobileProject() {
  const p = PROJECTS[0]; // Brow Wood
  return (
    <div style={{ width: "100%", height: "100%", overflow: "hidden", background: "var(--bg)", display: "flex", flexDirection: "column" }}>
      <div style={{ height: 44, display: "flex", justifyContent: "space-between", alignItems: "center", padding: "0 28px", color: "var(--bone)", fontSize: 13, fontWeight: 600, flexShrink: 0 }}>
        <span>9:41</span><span style={{ display: "flex", gap: 5 }}>●●●●</span>
      </div>
      <div style={{ padding: "8px 20px", display: "flex", justifyContent: "space-between", alignItems: "center", color: "var(--bone-2)", fontSize: 10, letterSpacing: ".2em", textTransform: "uppercase" }}>
        <span>← All Work</span><span>Share</span>
      </div>
      <div className="img" style={{ height: 240, backgroundImage: `url(${p.cover})`, position: "relative", margin: "8px 20px 0" }}>
        <div className="cine-grad" />
        <div style={{ position: "absolute", bottom: 16, left: 16, right: 16, color: "var(--bone)" }}>
          <div className="eyebrow" style={{ fontSize: 9, marginBottom: 8 }}>{p.category} · {p.place}</div>
          <h3 style={{ fontFamily: "var(--serif)", fontSize: 30, lineHeight: 1.05 }}>{p.title}</h3>
        </div>
      </div>
      <div style={{ padding: "24px 20px", overflow: "auto" }}>
        <p style={{ fontFamily: "var(--serif)", fontSize: 18, lineHeight: 1.4, color: "var(--bone)", margin: 0 }}>{p.blurb}</p>
        <div style={{ marginTop: 20, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, paddingTop: 16, borderTop: "1px solid var(--line)" }}>
          {[["Sector", p.category], ["Location", p.place], ["Delivery", p.role]].map(([l, v]) => (
            <div key={l}>
              <div className="eyebrow" style={{ fontSize: 9 }}>{l}</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 13, color: "var(--bone)", marginTop: 4 }}>{v}</div>
            </div>
          ))}
        </div>
        <button className="btn bronze" style={{ width: "100%", justifyContent: "center", marginTop: 20, padding: "12px", fontSize: 10 }}>View Gallery →</button>
      </div>
    </div>
  );
}

function MobileCapabilities() {
  return (
    <div style={{ width: "100%", height: "100%", overflow: "hidden", background: "var(--bg)", display: "flex", flexDirection: "column" }}>
      <div style={{ height: 44, display: "flex", justifyContent: "space-between", alignItems: "center", padding: "0 28px", color: "var(--bone)", fontSize: 13, fontWeight: 600, flexShrink: 0 }}>
        <span>9:41</span><span style={{ display: "flex", gap: 5 }}>●●●●</span>
      </div>
      <div style={{ padding: "16px 20px 8px" }}>
        <div className="eyebrow" style={{ fontSize: 9 }}><span className="dot"></span>CAPABILITIES</div>
        <div style={{ fontFamily: "var(--serif)", fontSize: 26, color: "var(--bone)", marginTop: 8, lineHeight: 1.05 }}>
          Commercial. Residential. <span className="italic" style={{ color: "var(--bronze-2)" }}>Maintenance.</span>
        </div>
      </div>
      <div style={{ flex: 1, overflow: "auto", padding: "8px 20px 20px" }}>
        {SERVICES.slice(0, 5).map((s, i) => (
          <div key={s.id} style={{ borderTop: "1px solid var(--line)", padding: "16px 0", display: "grid", gridTemplateColumns: "40px 1fr 20px", gap: 10, alignItems: "center" }}>
            <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--bone-3)" }}>—{s.num}</span>
            <span style={{ fontFamily: "var(--serif)", fontSize: 19, color: "var(--bone)" }}>{s.title}</span>
            <span style={{ color: "var(--bronze)", fontSize: 14 }}>→</span>
          </div>
        ))}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid var(--line)", padding: "12px 0 22px" }}>
        {["Home", "Work", "Capabilities", "Practice"].map((t, i) => (
          <div key={t} style={{ textAlign: "center", color: i === 2 ? "var(--bone)" : "var(--bone-3)", fontSize: 9, letterSpacing: ".1em", textTransform: "uppercase" }}>
            <div style={{ fontSize: 14, marginBottom: 4 }}>{["⌂", "◫", "≡", "✦"][i]}</div>
            {t}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { MobilePage });