// screens/policy.jsx — Help / FAQ, Shipping, Returns, Privacy
// One screen with anchored sections; sticky left rail jumps between them.

const POLICY_SECTIONS = [
  {
    id: "faq",
    label: "Help & FAQ",
    eyebrow: "01 — Help & FAQ",
    title: "Common questions, answered.",
    body: [
      { q: "How do I get a quote?",
        a: "Drop your STL on the homepage. We parse it in your browser, run a manifold and overhang check, and quote it instantly — no sign-up. If your file isn't an STL, or you want a hand-priced job, send us a message via the Contact page." },
      { q: "Will my part be waterproof?",
        a: "PETG, yes-ish — water-tight against splashes and brief submersion but not pressure-rated without coating. PLA, no. We can vapour-smooth ASA if you ask, which dramatically improves water resistance." },
      { q: "What's the biggest part you can print?",
        a: "Our standard envelope is 400 × 400 × 380mm in one piece on our large-format V-Core 4 Hybrid. We split larger jobs into glue-ready halves for free — let us know the part should be split when you upload." },
      { q: "Can you print someone else's STL?",
        a: "Yes, provided the license allows it (Creative Commons, public-domain, MakerWorld-permitted, etc). We won't print models that infringe trademarks or copyrighted likenesses. Ask us if you're unsure — we read every job." },
      { q: "What's a 'manifold' check?",
        a: "Manifold means the mesh is a sealed, watertight surface — every edge belongs to exactly two triangles. Non-manifold meshes have holes, duplicated faces, or T-junctions, and slicers can fail unpredictably. Our analyser flags them before you pay." },
      { q: "How accurate is the price?",
        a: "Within ~10–15% of the final slicer estimate for typical FDM geometry. We use an analytical model that splits the part into shell + top/bottom + infill + supports, each with its own volumetric flow cap. Unusual geometry can drift further — we'll always re-quote by hand if needed." },
      { q: "Do you do batch / production runs?",
        a: "Yes — bulk discounts kick in at 10, 25, and 50 units, up to a 20% reduction. For runs over 100 pieces or recurring orders, message us for a manual quote — there's often more we can do on price." },
      { q: "Can you do post-processing?",
        a: "Standard: hand-cleanup of supports, light sanding, threaded-insert installation. Add-ons: vapour smoothing (ASA), CA gluing of split parts, paint priming. Tell us in your order notes or contact us beforehand." },
    ],
  },
  {
    id: "shipping",
    label: "Shipping",
    eyebrow: "02 — Shipping",
    title: "How we get parts to you.",
    body: "intro_shipping",
  },
  {
    id: "returns",
    label: "Returns",
    eyebrow: "03 — Returns",
    title: "Our policy on remakes & refunds.",
    body: "intro_returns",
  },
  {
    id: "privacy",
    label: "Privacy",
    eyebrow: "04 — Privacy",
    title: "What we keep, what we don't.",
    body: "intro_privacy",
  },
];

function PolicyScreen({ brand, initialSection, onUpload, onHome, onContact, onNav }) {
  const [active, setActive] = React.useState(initialSection || "faq");

  React.useEffect(() => {
    const el = document.getElementById("policy-" + active);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "instant" });
  }, [active]);

  return (
    <main>
      <section style={{ padding: "clamp(48px, 6vw, 96px) var(--pad-x) clamp(36px, 4vw, 56px)" }}>
        <div className="mono upper" style={{ color: "var(--muted)", marginBottom: 22 }}>Help · policies</div>
        <h1 className="serif" style={{
          fontSize: "clamp(48px, 6.4vw, 112px)", lineHeight: 0.94, margin: 0,
          letterSpacing: "-0.035em", textWrap: "balance", maxWidth: 1100,
        }}>
          Everything you might<br/>
          <span style={{ fontStyle: "italic" }}>want to know</span>.
        </h1>
      </section>

      <section style={{
        padding: "var(--pad-y) var(--pad-x)",
        borderTop: "1px solid var(--line)",
        display: "grid",
        gridTemplateColumns: "200px 1fr",
        gap: "clamp(28px, 4vw, 72px)",
        alignItems: "start",
      }}>
        {/* Sticky nav — becomes a horizontal chip row on phones (m-chips) */}
        <nav className="m-chips" style={{ position: "sticky", top: 80, display: "flex", flexDirection: "column", gap: 4 }}>
          {POLICY_SECTIONS.map(s => (
            <button key={s.id} onClick={() => setActive(s.id)} style={{
              border: "none", appearance: "none", font: "inherit", cursor: "pointer",
              textAlign: "left",
              padding: "10px 14px", borderRadius: 6,
              background: active === s.id ? "color-mix(in srgb, var(--ink) 8%, transparent)" : "transparent",
              color: active === s.id ? "var(--ink)" : "var(--ink-soft)",
              fontSize: 14,
            }}>{s.label}</button>
          ))}
          <div className="m-hide" style={{ height: 1, background: "var(--line)", margin: "12px 0" }} />
          <button onClick={onContact} className="mono" style={{
            border: "1px solid var(--line)", appearance: "none", font: "inherit", cursor: "pointer",
            padding: "10px 14px", borderRadius: 999, fontSize: 11.5, background: "transparent", color: "var(--ink-soft)",
            textAlign: "left",
          }}>Still stuck? Contact us →</button>
        </nav>

        {/* Body */}
        <div style={{ display: "flex", flexDirection: "column", gap: 72 }}>
          {POLICY_SECTIONS.map(s => (
            <article key={s.id} id={"policy-" + s.id} style={{ scrollMarginTop: 80 }}>
              <div className="mono upper" style={{ color: "var(--muted)", marginBottom: 16 }}>{s.eyebrow}</div>
              <h2 className="serif" style={{
                fontSize: "clamp(36px, 4.6vw, 64px)",
                lineHeight: 1.02, margin: "0 0 32px", letterSpacing: "-0.025em", textWrap: "balance", maxWidth: 900,
              }}>{s.title}</h2>
              {Array.isArray(s.body) ? (
                <div style={{ display: "flex", flexDirection: "column" }}>
                  {s.body.map((it, i) => (
                    <div key={i} style={{
                      padding: "22px 0",
                      borderTop: i === 0 ? "1px solid var(--line)" : "none",
                      borderBottom: "1px solid var(--line)",
                      display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 24,
                    }}>
                      <div className="serif" style={{ fontSize: 22, letterSpacing: "-0.018em", lineHeight: 1.1 }}>{it.q}</div>
                      <div style={{ fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.55 }}>{it.a}</div>
                    </div>
                  ))}
                </div>
              ) : s.body === "intro_shipping" ? (
                <ShippingBody />
              ) : s.body === "intro_returns" ? (
                <ReturnsBody />
              ) : (
                <PrivacyBody />
              )}
            </article>
          ))}
        </div>
      </section>

      <section style={{
        padding: "calc(var(--pad-y) * 1.4) var(--pad-x)",
        borderTop: "1px solid var(--line)",
        background: "var(--ink)", color: "var(--bg)", textAlign: "center",
      }}>
        <h2 className="serif" style={{
          fontSize: "clamp(40px, 6vw, 96px)",
          lineHeight: 0.92, margin: 0, letterSpacing: "-0.035em", textWrap: "balance",
        }}>
          Couldn't find it? <span style={{ fontStyle: "italic" }}>Ask.</span>
        </h2>
        <div style={{ display: "flex", justifyContent: "center", gap: 14, marginTop: 32, flexWrap: "wrap" }}>
          <button onClick={onContact} style={{
            border: "none", appearance: "none", font: "inherit", cursor: "pointer",
            padding: "16px 26px", borderRadius: 999,
            background: "var(--bg)", color: "var(--ink)", fontSize: 15, fontWeight: 500,
            display: "inline-flex", alignItems: "center", gap: 12,
          }}>
            <span>Send us a message</span><span>→</span>
          </button>
          <button onClick={() => onUpload()} className="mono" style={{
            border: "1px solid color-mix(in srgb, var(--bg) 35%, transparent)", appearance: "none", font: "inherit", cursor: "pointer",
            padding: "16px 22px", borderRadius: 999, background: "transparent", color: "var(--bg)", fontSize: 13,
          }}>Upload an STL</button>
        </div>
      </section>

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

const ShippingBody = () => (
  <div className="r-cards" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid var(--line)" }}>
    {[
      { l: "Tracked 48 · UK",  d: "2–3 working days · £3.95", n: "Royal Mail" },
      { l: "Special · UK",     d: "Next working day · £7.95", n: "Royal Mail, before 1pm dispatch" },
      { l: "International",    d: "5–10 days · from £18.40",  n: "DHL / RM International tracked. Customer covers duties." },
    ].map((r, i) => (
      <div key={i} style={{
        padding: "22px 18px 22px 0",
        borderRight: i % 2 === 0 ? "1px solid var(--line)" : "none",
        borderBottom: "1px solid var(--line)",
        paddingLeft: i % 2 === 0 ? 0 : 18,
      }}>
        <div className="serif" style={{ fontSize: 22, letterSpacing: "-0.018em", lineHeight: 1.1 }}>{r.l}</div>
        <div style={{ marginTop: 8, fontSize: 14, color: "var(--ink-soft)" }}>{r.d}</div>
        <div className="mono" style={{ marginTop: 6, color: "var(--muted)", fontSize: 11 }}>{r.n}</div>
      </div>
    ))}
    <div style={{ gridColumn: "1 / -1", padding: "20px 0", color: "var(--ink-soft)", fontSize: 14, lineHeight: 1.55 }}>
      Standard turnaround is 48 hours from order, plus shipping time. Priority and Express
      lead times move your job to the front of the queue at a small surcharge. We email a
      photo of every part before it leaves the studio.
    </div>
  </div>
);

const ReturnsBody = () => (
  <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
    {[
      { h: "If we got it wrong", b: "If a print fails our inspection or arrives damaged, we'll remake or refund it — your choice. Send us a photo within 14 days. There's no quibble." },
      { h: "If your STL was wrong", b: "We can't refund prints made from STLs that came out as you uploaded them. Our AI analyser catches the major issues (non-manifold, missing walls, oversized) before you pay; we recommend you check the preview." },
      { h: "Custom & bespoke parts", b: "CAD-designed and CFD-analysed engagements are non-refundable once delivered. We will, however, work with you on revisions — two are included by default." },
      { h: "Cancellations", b: "Free if your job hasn't started printing. Once on the bed, we charge material and machine time used. Email us as fast as you can if plans change." },
    ].map((it, i) => (
      <div key={i} style={{
        padding: "22px 0",
        borderTop: i === 0 ? "1px solid var(--line)" : "none",
        borderBottom: "1px solid var(--line)",
        display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 24,
      }}>
        <div className="serif" style={{ fontSize: 22, letterSpacing: "-0.018em", lineHeight: 1.1 }}>{it.h}</div>
        <div style={{ fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.55 }}>{it.b}</div>
      </div>
    ))}
  </div>
);

const PrivacyBody = () => (
  <div style={{ maxWidth: 760, display: "flex", flexDirection: "column", gap: 16, fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.6 }}>
    <p style={{ margin: 0 }}>
      Forma Sync Ltd. is a UK-registered company (Reg. 16274422) and a data
      controller under the UK GDPR. The short version of our privacy policy
      is below; the long version is available on request.
    </p>
    <h3 className="serif" style={{ margin: "12px 0 4px", fontSize: 24, letterSpacing: "-0.02em", color: "var(--ink)" }}>What we store</h3>
    <p style={{ margin: 0 }}>
      Your name, email address, delivery address, and order history. Card
      details are handled by Stripe and never touch our servers.
    </p>
    <h3 className="serif" style={{ margin: "12px 0 4px", fontSize: 24, letterSpacing: "-0.02em", color: "var(--ink)" }}>What we don't store</h3>
    <p style={{ margin: 0 }}>
      Your STL files. They are parsed entirely in your browser using
      JavaScript — Forma Sync's servers never see your geometry until you
      add it to a cart and place an order. After fulfilment, files are
      deleted from our slicer queue within 30 days.
    </p>
    <h3 className="serif" style={{ margin: "12px 0 4px", fontSize: 24, letterSpacing: "-0.02em", color: "var(--ink)" }}>Cookies</h3>
    <p style={{ margin: 0 }}>
      Strictly-necessary only — session, cart state, and palette preference.
      No third-party analytics, no advertising trackers. We use server-side
      Plausible for aggregate page-view counts, which doesn't set cookies.
    </p>
    <h3 className="serif" style={{ margin: "12px 0 4px", fontSize: 24, letterSpacing: "-0.02em", color: "var(--ink)" }}>Your rights</h3>
    <p style={{ margin: 0 }}>
      Email <a href="mailto:formasync3d@gmail.com" style={{ color: "var(--ink)" }}>formasync3d@gmail.com</a> to
      access, correct, export, or delete the data we hold on you. We reply
      within 14 days as required by the UK GDPR.
    </p>
  </div>
);

window.PolicyScreen = PolicyScreen;
