// services.jsx — full service catalogue + packages
// ─────────────────────────────────────────────────────────────

const SVC_CORRECTION = [
  {
    num: "01",
    name: "Single-stage refinement",
    lead: "Light enhancement.",
    body: "One refining polish — removes minor swirl, lifts gloss 8–12 GU. For paint already in good condition or for sale-prep on younger vehicles.",
    span: "1 day",
    from: "$650",
  },
  {
    num: "02",
    name: "Two-stage correction",
    lead: "Workhorse.",
    body: "Cut + refine. Removes 70–85% of defects, raises gloss 12–18 GU. Verified under two light temperatures.",
    span: "2–3 days",
    from: "$1,400",
  },
  {
    num: "03",
    name: "Multi-stage paint correction",
    lead: "The flagship.",
    body: "Three to five stages of compound, polish, and jewel. Defect removal to optical limit; final pass under three light temperatures; gloss-meter verification each stage.",
    span: "4–7 days",
    from: "$2,800",
    flagship: true,
  },
];

const SVC_PROTECTION = [
  {
    num: "04",
    name: "Ceramic coating",
    lead: "2–7 year protection.",
    body: "Applied only after correction. Hardness, hydrophobicity, chemical resistance — without dulling the depth we just built.",
    span: "1 day",
    from: "$700",
  },
  {
    num: "05",
    name: "Sealant top-up",
    lead: "Maintenance.",
    body: "For existing coating clients. Decontamination + polymer or SiO₂ top-up to restore hydrophobicity and beading.",
    span: "Half day",
    from: "$280",
  },
];

const SVC_ADJACENT = [
  {
    num: "06",
    name: "Headlight restoration",
    lead: "Optical-grade.",
    body: "Yellowed and oxidized lenses re-clarified through the same cut/polish/jewel sequence. Sealed with UV-stable coat. Measured for clarity, not just appearance.",
    span: "~3 hrs",
    from: "$240 / pair",
  },
  {
    num: "07",
    name: "Maintenance wash",
    lead: "Touchless · existing clients.",
    body: "Pre-soak, two-bucket touchless rinse, deionized final, dry. For vehicles we've already corrected. Touchless because we know exactly what's underneath.",
    span: "2 hrs",
    from: "$140",
  },
  {
    num: "08",
    name: "Paint decontamination",
    lead: "Iron · tar · clay.",
    body: "Stand-alone chemical and mechanical decontamination, with iron-bonding fallout removal. Often paired with a refinement polish.",
    span: "Half day",
    from: "$320",
  },
];

const PACKAGES = [
  {
    name: "The Refinement",
    sub: "Single-stage enhancement + sealant.",
    range: "From $980",
    duration: "1–2 days",
    incl: [
      "Foam pre-wash + decontamination",
      "Single-stage refinement polish",
      "Twelve-month polymer sealant",
      "Headlight clarity inspection",
    ],
    excl: ["Multi-stage correction", "Ceramic coating"],
    cta: "Request brief",
  },
  {
    name: "The Correction",
    sub: "Multi-stage paint correction + ceramic.",
    range: "From $3,400",
    duration: "5–7 days",
    incl: [
      "Decontamination (chemical + mechanical)",
      "Multi-stage compound & polish",
      "Final jewel pass under three light temperatures",
      "Gloss-meter & DOI report",
      "Two-year ceramic coating",
      "Headlight clarity refinement",
    ],
    excl: ["Interior detailing"],
    cta: "Apply for a date",
  },
  {
    name: "The Concours",
    sub: "End-to-end. Show-prep tier.",
    range: "From $7,200",
    duration: "8–12 days",
    incl: [
      "Everything in The Correction",
      "Five-stage refinement sequence",
      "Full headlight restoration & seal",
      "Seven-year ceramic coating",
      "Annual maintenance visit, included",
    ],
    excl: [],
    cta: "Apply for booking",
    flagship: true,
  },
];

function ServiceCatalogue({ groupTitle, groupNum, items, anchor }) {
  return (
    <section id={anchor} className="section" style={{
      paddingTop: "var(--pad-section)",
      paddingBottom: "var(--pad-section)",
      borderTop: "1px solid var(--rule)",
    }}>
      <div className="wrap col gap-48">
        <div className="row responsive-stack" style={{
          justifyContent: "space-between", alignItems: "end", gap: 24,
        }}>
          <div className="col gap-12">
            <div className="spec">§ {groupNum} · {groupTitle.toUpperCase()}</div>
            <h2 className="h-display" style={{ fontSize: "clamp(36px, 4.5vw, 64px)", margin: 0 }}>
              {groupTitle}
            </h2>
          </div>
        </div>

        <div className="col">
          {items.map((s, i) => (
            <div key={s.num}
                 style={{
                   display: "grid",
                   gridTemplateColumns: "50px 1.4fr 2fr 0.7fr",
                   gap: 24, padding: "32px 0",
                   borderTop: i === 0 ? "1px solid var(--ink)" : "1px solid var(--rule)",
                   borderBottom: i === items.length - 1 ? "1px solid var(--ink)" : "none",
                   alignItems: "start",
                   transition: "background .25s ease",
                   background: s.flagship ? "var(--accent-2)" : "transparent",
                 }}
                 onMouseEnter={(e) => { if (!s.flagship) e.currentTarget.style.background = "var(--bg-2)"; }}
                 onMouseLeave={(e) => { e.currentTarget.style.background = s.flagship ? "var(--accent-2)" : "transparent"; }}>
              <div className="spec" style={{ paddingTop: 8, color: s.flagship ? "var(--ink)" : "var(--ink-3)" }}>
                {s.num}
              </div>
              <div className="col gap-4">
                <div style={{
                  fontFamily: "var(--serif)", fontSize: 24, fontWeight: 300,
                  letterSpacing: "-0.01em", lineHeight: 1.2,
                }}>
                  {s.name}
                </div>
                <div className="spec" style={{
                  color: s.flagship ? "var(--ink-2)" : "var(--accent)",
                  marginTop: 6, fontWeight: 500,
                }}>
                  {s.lead}
                </div>
                <div className="row gap-16" style={{ marginTop: 8 }}>
                  <div className="spec" style={{ color: "var(--ink-4)" }}>
                    <span style={{ color: "var(--ink-3)" }}>SPAN</span> · {s.span}
                  </div>
                </div>
              </div>
              <div style={{ color: "var(--ink-2)", fontSize: 15, lineHeight: 1.65, maxWidth: 520 }}>
                {s.body}
              </div>
              <div className="col" style={{ alignItems: "flex-end", gap: 8 }}>
                <div className="spec" style={{ color: "var(--ink-3)" }}>FROM</div>
                <div className="num" style={{ fontSize: 22, fontWeight: 300 }}>{s.from}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PackagesBlock() {
  return (
    <section className="section" style={{
      paddingTop: "var(--pad-section)", paddingBottom: "var(--pad-section)",
      borderTop: "1px solid var(--rule)",
      background: "var(--bg-2)",
    }}>
      <div className="wrap col gap-48">
        <div className="row responsive-stack" style={{
          justifyContent: "space-between", alignItems: "end", gap: 24,
        }}>
          <div className="col gap-12">
            <div className="spec">§ 04 · PACKAGES</div>
            <h2 className="h-display" style={{ fontSize: "clamp(40px, 5vw, 76px)", margin: 0 }}>
              Three <em>ways</em> in.
            </h2>
          </div>
          <p style={{
            fontFamily: "var(--serif)", fontStyle: "italic", fontWeight: 300,
            color: "var(--ink-3)", maxWidth: 380, margin: 0, fontSize: 16, lineHeight: 1.5,
          }}>
            Pricing scales with paint condition, colour, and panel count.
            Final figures are quoted after an in-person inspection at your driveway.
          </p>
        </div>

        <div className="responsive-grid-2" style={{
          display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16,
        }}>
          {PACKAGES.map((p, i) => (
            <article key={p.name}
              style={{
                background: p.flagship ? "var(--ink)" : "var(--bg)",
                color: p.flagship ? "var(--bg)" : "var(--ink)",
                border: "1px solid " + (p.flagship ? "var(--ink)" : "var(--rule)"),
                padding: "36px 28px",
                display: "flex", flexDirection: "column", gap: 20,
                position: "relative",
              }}>
              <div className="row" style={{ justifyContent: "space-between", alignItems: "baseline" }}>
                <div className="spec" style={{
                  color: p.flagship ? "oklch(0.85 0.02 60)" : "var(--ink-3)",
                }}>
                  0{i + 1} · {p.flagship ? "TOP TIER" : i === 0 ? "ENTRY" : "STANDARD"}
                </div>
                <div className="num" style={{
                  fontSize: 11, letterSpacing: "0.1em",
                  color: p.flagship ? "oklch(0.85 0.02 60)" : "var(--ink-3)",
                }}>{p.duration}</div>
              </div>

              <div className="col gap-8">
                <h3 style={{
                  fontFamily: "var(--serif)", fontSize: 36, fontWeight: 300,
                  letterSpacing: "-0.02em", margin: 0, lineHeight: 1.05,
                }}>
                  {p.name}
                </h3>
                <p style={{
                  fontFamily: "var(--serif)", fontStyle: "italic", fontWeight: 300,
                  fontSize: 17, margin: 0,
                  color: p.flagship ? "oklch(0.92 0.005 60)" : "var(--ink-2)",
                }}>{p.sub}</p>
              </div>

              <div className="row" style={{
                alignItems: "baseline", gap: 16,
                paddingTop: 14, paddingBottom: 14,
                borderTop: "1px solid " + (p.flagship ? "oklch(1 0 0 / 0.18)" : "var(--rule)"),
                borderBottom: "1px solid " + (p.flagship ? "oklch(1 0 0 / 0.18)" : "var(--rule)"),
              }}>
                <div className="num" style={{ fontSize: 22, fontWeight: 300 }}>{p.range}</div>
                <div className="spec" style={{
                  color: p.flagship ? "oklch(0.85 0.02 60)" : "var(--ink-3)",
                }}>quoted by brief</div>
              </div>

              <div className="col gap-8">
                <div className="spec" style={{
                  color: p.flagship ? "oklch(0.85 0.02 60)" : "var(--ink-3)",
                  marginBottom: 4,
                }}>INCLUDES</div>
                <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
                  {p.incl.map(x => (
                    <li key={x} style={{
                      padding: "6px 0",
                      borderBottom: "1px dashed " + (p.flagship ? "oklch(1 0 0 / 0.14)" : "var(--rule-soft)"),
                      fontSize: 13, lineHeight: 1.4, display: "flex", gap: 10,
                    }}>
                      <span style={{
                        flex: "0 0 auto", marginTop: 5, width: 5, height: 5,
                        background: p.flagship ? "var(--bg)" : "var(--accent)",
                        borderRadius: "50%",
                      }} />
                      <span>{x}</span>
                    </li>
                  ))}
                </ul>
              </div>

              {p.excl.length > 0 && (
                <div className="col gap-4">
                  <div className="spec" style={{
                    color: p.flagship ? "oklch(0.85 0.02 60)" : "var(--ink-3)",
                  }}>NOT INCLUDED</div>
                  {p.excl.map(x => (
                    <div key={x} style={{
                      fontSize: 12, color: p.flagship ? "oklch(0.85 0.02 60)" : "var(--ink-3)",
                      textDecoration: "line-through",
                    }}>{x}</div>
                  ))}
                </div>
              )}

              <a href="contact.html"
                 style={{
                   marginTop: "auto",
                   display: "inline-flex", alignItems: "center", gap: 10,
                   padding: "14px 18px",
                   background: p.flagship ? "var(--bg)" : "var(--ink)",
                   color: p.flagship ? "var(--ink)" : "var(--bg)",
                   border: "1px solid " + (p.flagship ? "var(--bg)" : "var(--ink)"),
                   fontSize: 13, fontWeight: 500, letterSpacing: "0.02em",
                 }}>
                {p.cta} <span>→</span>
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ServiceCatalogue, PackagesBlock, SVC_CORRECTION, SVC_PROTECTION, SVC_ADJACENT });