// screens/about.jsx — About page: team (text-only), equipment, services, numbers.

function AboutScreen({ brand, onUpload, onHome, onNav }) {
  return (
    <main>
      {/* Hero */}
      <section style={{ padding: "clamp(44px, 5.5vw, 84px) var(--pad-x) clamp(32px, 4vw, 56px)" }}>
        <div className="chip" style={{ marginBottom: 18 }}>About · Forma Sync Ltd</div>
        <h1 className="serif" style={{
          fontSize: "clamp(38px, 5.4vw, 72px)",
          lineHeight: 1.04, margin: 0, letterSpacing: "-0.03em",
          textWrap: "balance", maxWidth: 900,
        }}>
          Engineering-led 3D printing, run by two brothers.
        </h1>
        <p style={{ maxWidth: 660, marginTop: 20, fontSize: 17, lineHeight: 1.55, color: "var(--ink-soft)" }}>
          Forma Sync is a London studio combining on-demand FDM printing with
          CAD design and computational fluid dynamics. Every job is quoted,
          printed, inspected, and packed by the same two people.
        </p>
      </section>

      {/* Team — text only */}
      <section style={{ padding: "clamp(28px,3.5vw,48px) var(--pad-x)" }}>
        <SectionHeader
          index="01 — The team"
          lead={<>Two founders, two disciplines.</>}
        />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <article className="card" style={{ padding: "26px 28px" }}>
            <div className="mono upper" style={{ color: "var(--muted)", marginBottom: 10 }}>
              Co-founder · Simulation lead
            </div>
            <div className="serif" style={{ fontSize: 24, letterSpacing: "-0.02em", lineHeight: 1.1 }}>
              Computational fluid dynamics
            </div>
            <p style={{ margin: "14px 0 0", fontSize: 14.5, lineHeight: 1.6, color: "var(--ink-soft)" }}>
              Holds a Ph.D. in Computational Fluid Dynamics, with doctoral
              research in flow modelling for additively-manufactured
              geometries. Leads every simulation engagement personally —
              meshing in OpenFOAM, post-processing in ParaView, and writing
              the engineering report you hand to your client.
            </p>
            <ul className="mono" style={{
              listStyle: "none", padding: 0, margin: "18px 0 0",
              display: "flex", flexDirection: "column", gap: 6,
              color: "var(--ink-soft)", fontSize: 12,
            }}>
              {["Ph.D. · Computational Fluid Dynamics", "OpenFOAM · ParaView · ANSYS Fluent", "Written engineering reports"].map(s => (
                <li key={s} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ width: 14, height: 2, borderRadius: 2, background: "var(--primary)" }} />
                  {s}
                </li>
              ))}
            </ul>
          </article>

          <article className="card" style={{ padding: "26px 28px" }}>
            <div className="mono upper" style={{ color: "var(--muted)", marginBottom: 10 }}>
              Co-founder · Print & product lead
            </div>
            <div className="serif" style={{ fontSize: 24, letterSpacing: "-0.02em", lineHeight: 1.1 }}>
              Additive manufacturing
            </div>
            <p style={{ margin: "14px 0 0", fontSize: 14.5, lineHeight: 1.6, color: "var(--ink-soft)" }}>
              Printing FDM since 2014 — twelve years across consumer, prosumer,
              and self-built machines, with a thorough working knowledge of
              polymer science across PLA, PETG, ABS, ASA, TPU, Nylon, and PC.
              Runs the print floor and leads product-development work with UK
              manufacturers and independent makers.
            </p>
            <ul className="mono" style={{
              listStyle: "none", padding: 0, margin: "18px 0 0",
              display: "flex", flexDirection: "column", gap: 6,
              color: "var(--ink-soft)", fontSize: 12,
            }}>
              {["12 years FDM · since 2014", "Polymer science · DFM for FDM", "Product development"].map(s => (
                <li key={s} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ width: 14, height: 2, borderRadius: 2, background: "var(--primary)" }} />
                  {s}
                </li>
              ))}
            </ul>
          </article>
        </div>
      </section>

      {/* Equipment — the machine */}
      <section style={{ padding: "clamp(28px,3.5vw,48px) var(--pad-x)" }}>
        <SectionHeader
          index="02 — Equipment"
          lead={<>Built around the RatRig V-Core 4 Hybrid.</>}
        />
        <div className="card" style={{
          display: "grid", gridTemplateColumns: "1.1fr 1fr",
          gap: 0, overflow: "hidden", alignItems: "stretch",
        }}>
          <div style={{ minHeight: 380, borderRight: "1px solid var(--line)" }}>
            <img src="assets/printer-vcore4-detail.webp" alt="RatRig V-Core 4 Hybrid — toolhead detail"
              style={{ width: "100%", height: "100%", minHeight: 380, objectFit: "cover", display: "block" }} />
          </div>
          <div style={{ padding: "clamp(24px,3vw,40px)", display: "flex", flexDirection: "column", gap: 18 }}>
            <div>
              <div className="serif" style={{ fontSize: 26, letterSpacing: "-0.02em", lineHeight: 1.1 }}>
                RatRig V-Core 4 · Hybrid
              </div>
              <div className="mono" style={{ color: "var(--muted)", fontSize: 11.5, marginTop: 6 }}>
                Large-format CoreXY · Klipper / RatOS
              </div>
            </div>
            <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: "var(--ink-soft)" }}>
              Our workhorse is a full-metal, large-format CoreXY platform in
              its Hybrid configuration — twin extra Y-axis motors that double
              acceleration for faster prints with no loss of accuracy. Beacon
              contact probing calibrates Z on every plate, and Klipper's
              resonance analysis keeps input shaping tuned week after week.
            </p>
            <div className="r-cards" style={{
              display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0,
              borderTop: "1px solid var(--line)",
            }}>
              {[
                ["400×400×380 mm", "Build platform"],
                ["Hybrid CoreXY", "2× Y acceleration"],
                ["Beacon probe", "Auto Z calibration"],
                ["Enclosed", "ASA ready"],
              ].map(([v, l], i) => (
                <div key={l} style={{
                  padding: "14px 12px 14px 0",
                  borderRight: i % 2 === 0 ? "1px solid var(--line)" : "none",
                  borderBottom: i < 2 ? "1px solid var(--line)" : "none",
                  paddingLeft: i % 2 === 0 ? 0 : 14,
                }}>
                  <div className="serif" style={{ fontSize: 17, letterSpacing: "-0.01em" }}>{v}</div>
                  <div className="mono upper" style={{ color: "var(--muted)", marginTop: 3, fontSize: 10 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* What we offer */}
      <section style={{ padding: "clamp(28px,3.5vw,48px) var(--pad-x)" }}>
        <SectionHeader
          index="03 — What we offer"
          lead={<>Three services, one workshop.</>}
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {[
            { n: "01", t: "On-demand 3D printing", b: "Upload an STL, 3MF, or STEP file and get an instant quote. PLA, PETG, ASA and TPU, dispatched in 48 hours." },
            { n: "02", t: "CAD design", b: "From a sketch or reference photos to a parametric model, optimised for FDM and delivered as STEP + STL." },
            { n: "03", t: "CFD analysis", b: "Flow, pressure drop, thermal, and external aero — solved in OpenFOAM and delivered as a written engineering report." },
          ].map((s) => (
            <div key={s.n} className="card" style={{ padding: "24px 24px 26px", display: "flex", flexDirection: "column", gap: 10 }}>
              <div className="mono" style={{ fontSize: 11, color: "var(--primary)", fontWeight: 600 }}>{s.n}</div>
              <div className="serif" style={{ fontSize: 20, letterSpacing: "-0.015em", lineHeight: 1.15 }}>{s.t}</div>
              <p style={{ margin: 0, fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.6 }}>{s.b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Numbers */}
      <section style={{ padding: "clamp(28px,3.5vw,48px) var(--pad-x) var(--pad-y)" }}>
        <div className="card r-cards" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", padding: "6px 0" }}>
          {[
            ["12 yrs", "On the bed"],
            ["±0.2mm", "Dimensional tolerance"],
            ["100%", "Hand-inspected"],
          ].map(([v, l], i) => (
            <div key={l} style={{
              padding: "20px 22px",
              borderRight: i < 2 ? "1px solid var(--line)" : "none",
            }}>
              <div className="serif" style={{ fontSize: "clamp(22px,2.6vw,32px)", letterSpacing: "-0.02em", lineHeight: 1, fontVariantNumeric: "tabular-nums" }}>{v}</div>
              <div className="mono upper" style={{ color: "var(--muted)", marginTop: 6, fontSize: 10 }}>{l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{
        padding: "calc(var(--pad-y) * 1.1) var(--pad-x)",
        borderTop: "1px solid var(--line)",
        background: "var(--ink)", color: "var(--bg)", textAlign: "center",
      }}>
        <h2 className="serif" style={{
          fontSize: "clamp(34px, 4.6vw, 64px)",
          lineHeight: 1.02, margin: 0, letterSpacing: "-0.03em", textWrap: "balance",
        }}>
          Quote a part. Talk to us.
        </h2>
        <div style={{ display: "flex", justifyContent: "center", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
          <button onClick={() => onUpload()} className="btn-primary" data-track="about_cta_upload" style={{ padding: "15px 26px", fontSize: 15 }}>
            <span>Get instant quote</span><span>→</span>
          </button>
          <button onClick={() => onNav && onNav("contact")} className="btn-outline" data-track="about_cta_contact" style={{
            background: "transparent", color: "var(--bg)",
            borderColor: "color-mix(in srgb, var(--bg) 30%, transparent)",
          }}>Contact us</button>
        </div>
        <div className="mono upper" style={{ color: "color-mix(in srgb, var(--bg) 50%, transparent)", marginTop: 28, fontSize: 10 }}>
          formasync3d@gmail.com · London, UK
        </div>
      </section>

      <Footer brand={brand} onNav={onNav} />
      <FloatingCTA onUpload={() => onNav ? onNav("upload") : onUpload && onUpload()} />
    </main>
  );
}

window.AboutScreen = AboutScreen;