// home-sections.jsx — services · how it works · about · faq · closing CTA
// ─────────────────────────────────────────────────────────────

const HOME_SERVICES = [
  {
    name: "Paint correction",
    tag: "The main thing we do",
    body: "Swirls, wash marks, and etching polished out of the clear coat — one stage for a refresh, three to five for paint that needs to come all the way back.",
    time: "1–7 days",
    src: "media/porsche-911-hood-polish.png",
  },
  {
    name: "Ceramic coating",
    tag: "After correction",
    body: "A hard quartz base layer topped with a slicker siloxane coat. Paint, trim, and glass. Easier washes, and the finish stays where we left it.",
    time: "1 day",
    src: "media/rangerover-nose.jpeg",
  },
  {
    name: "Headlight restoration",
    tag: "Sold on its own",
    body: "Yellowed, cloudy lenses cut back to clear and sealed against UV, using the same process we use on paint.",
    time: "~3 hrs",
    src: "media/headlight-03.jpg",
  },
  {
    name: "Decon & maintenance",
    tag: "For cars we've done",
    body: "Iron, tar, and clay decontamination, plus touchless maintenance washes for clients whose paint we already know.",
    time: "2 hrs – 1 day",
    src: "media/macan-black-tape.png",
  },
];

function Services() {
  return (
    <section id="services" className="section" style={{ borderTop: "1px solid var(--rule)" }}>
      <div className="wrap col gap-40">
        <div className="row responsive-stack" style={{ justifyContent: "space-between", alignItems: "flex-end", gap: 20 }}>
          <div className="col gap-14">
            <div className="sec-label">Services</div>
            <h2 className="h-sec">Four things,<br /><em>done properly.</em></h2>
          </div>
          <a href="services.html" className="link-arrow">All services &amp; packages <span>→</span></a>
        </div>

        <div className="svc-grid stack-m" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
          {HOME_SERVICES.map((s, i) => (
            <div key={s.name} className="col" style={{ border: "1px solid var(--rule)", background: "var(--bg-2)" }}>
              <div className="photo" style={{ aspectRatio: "16/9", width: "100%" }}>
                <img src={s.src} alt={s.name} loading="lazy" />
              </div>
              <div className="col gap-12" style={{ padding: "28px 28px 30px" }}>
                <div className="row" style={{ justifyContent: "space-between", alignItems: "baseline", gap: 16 }}>
                  <div className="spec">{s.tag}</div>
                  <div className="spec num" style={{ color: "var(--ink-4)" }}>{s.time}</div>
                </div>
                <h3 style={{ fontFamily: "var(--serif)", fontSize: "clamp(26px, 2.6vw, 34px)", fontWeight: 300, letterSpacing: "-0.02em", margin: 0, lineHeight: 1.1 }}>{s.name}</h3>
                <p style={{ color: "var(--ink-2)", fontSize: 15, lineHeight: 1.65, margin: 0 }}>{s.body}</p>
              </div>
            </div>
          ))}
        </div>

        <div className="row responsive-stack" style={{ justifyContent: "space-between", alignItems: "center", gap: 20, padding: "24px 28px", border: "1px solid var(--ink)" }}>
          <div className="col gap-4">
            <div style={{ fontFamily: "var(--serif)", fontSize: 21, fontWeight: 300 }}>Pricing is being finalised.</div>
            <div style={{ color: "var(--ink-2)", fontSize: 14 }}>Every quote depends on the paint, the colour, and the panel count — so call and we'll talk it through.</div>
          </div>
          <a href={PHONE_HREF} className="btn nowrap">{`Call ${PHONE}`}</a>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────── HOW IT WORKS ─────────
const HOW_STEPS = [
  ["01", "Tell us about the car", "Send photos and what's bothering you — or just call. We'll tell you honestly what's worth doing."],
  ["02", "We come to you", "Our rig sets up in your driveway or garage in about 25 minutes. Own power, own water, own lighting."],
  ["03", "You get the car back", "Same evening for short jobs, a few days for a full correction. We walk you around it before we leave."],
];

function HowItWorks() {
  return (
    <section id="how" className="section" style={{ borderTop: "1px solid var(--rule)", background: "var(--bg-2)" }}>
      <div className="wrap col gap-40">
        <div className="col gap-14">
          <div className="sec-label">How it works</div>
          <h2 className="h-sec">Three steps,<br /><em>no showroom.</em></h2>
        </div>
        <div className="stack-m step-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--ink)" }}>
          {HOW_STEPS.map(([n, t, b], i) => (
            <div key={n} className="col gap-12" style={{ padding: "32px 32px 36px", paddingLeft: i === 0 ? 0 : 32, borderRight: i < 2 ? "1px solid var(--rule)" : "none" }}>
              <div className="num" style={{ fontSize: 12, letterSpacing: "0.14em", color: "var(--accent)" }}>{n}</div>
              <h3 style={{ fontFamily: "var(--serif)", fontSize: 26, fontWeight: 300, letterSpacing: "-0.015em", margin: 0, lineHeight: 1.15 }}>{t}</h3>
              <p style={{ color: "var(--ink-2)", fontSize: 15, lineHeight: 1.65, margin: 0 }}>{b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────── ABOUT + AREA ─────────
const HOME_AREAS = [
  ["San Francisco", "Included"],
  ["The Peninsula", "Included"],
  ["East Bay", "Included"],
  ["South Bay", "Included"],
  ["North of Novato", "Travel quoted"],
  ["East of Livermore", "Travel quoted"],
];

function About() {
  return (
    <section id="about" className="section" style={{ borderTop: "1px solid var(--rule)" }}>
      <div className="wrap responsive-grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 72, alignItems: "start" }}>
        <div className="col gap-20">
          <div className="sec-label">About</div>
          <h2 className="h-sec">A one-man shop<br />that <em>comes to you.</em></h2>
          <p className="lede" style={{ maxWidth: 520 }}>
            We're not a wash-and-wax outfit. We correct paint — which means reshaping the
            surface with abrasives until the light comes back off it properly — and we do it
            at your house, with our own power, water, and lighting.
          </p>
          <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.7, margin: 0, maxWidth: 520 }}>
            One car a day, by appointment. That's the whole model. It's why the work takes
            as long as it takes, and why we'd rather turn down a job than rush one.
          </p>
          <div style={{ padding: "26px 30px", background: "var(--ink)", color: "var(--bg)", marginTop: 8, display: "flex", flexDirection: "column", gap: 14 }}>
            <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontWeight: 300, fontSize: "clamp(19px, 2vw, 23px)", lineHeight: 1.45, margin: 0 }}>
              "I started doing this because I was tired of detailers telling owners their car
              looked great when it didn't."
            </p>
            <div className="spec" style={{ color: "oklch(0.85 0.02 60)" }}>FOUNDER · LEAD TECHNICIAN</div>
          </div>
        </div>

        <div className="col gap-20">
          <div className="photo" style={{ aspectRatio: "4/3", width: "100%" }}>
            <img src="media/porsche-911-grey-polish.png" alt="Rotary polishing a Porsche front fender" loading="lazy" />
          </div>
          <div className="col gap-14" id="area">
            <div className="spec">WHERE WE GO</div>
            <div style={{ borderTop: "1px solid var(--ink)" }}>
              {HOME_AREAS.map(([k, v]) => (
                <div key={k} className="row" style={{ justifyContent: "space-between", alignItems: "baseline", padding: "13px 0", borderBottom: "1px solid var(--rule)", gap: 16 }}>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 19, fontWeight: 300 }}>{k}</div>
                  <div className="spec" style={{ color: v === "Included" ? "var(--ink-3)" : "var(--ink-4)" }}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.6 }}>
              All we need is a flat 12 × 24 ft space — driveway, carport, or garage apron.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────── FAQ ──────────────────
const HOME_FAQS = [
  ["Why mobile instead of a shop?",
   "Owners of these cars would rather not have them moved. A mobile rig with calibrated lighting and a sealed polish zone gets us most of the way to a studio, in your own driveway."],
  ["What's the difference between detailing and paint correction?",
   "Detailing cleans the car. Correction changes the surface — levelling micro-defects in the clear coat with abrasives and refining the finish under multiple light sources. One is a wash; the other is machine work."],
  ["Do you do interiors?",
   "Only as part of a full top-tier job. We'd rather do one thing exceptionally than five adequately."],
  ["How long does it take?",
   "A single-stage refresh is a day. A full multi-stage correction on paint that needs it can run a week or more. We don't compress timelines."],
  ["How is pricing worked out?",
   "Paint condition, colour (darker needs more care), and how many panels. We give you a written quote after looking at the car in person."],
  ["What do you need from me?",
   "A flat 12 × 24 ft space and the keys. We bring power, water, lighting, and everything else."],
  ["Ceramic coating or PPF?",
   "We apply ceramic coatings ourselves after correction. For paint protection film we hand you to an installer we trust — and correct the paint underneath first when it's warranted."],
];

function FAQ() {
  return (
    <section id="faq" className="section" style={{ borderTop: "1px solid var(--rule)", background: "var(--bg-2)" }}>
      <div className="wrap col gap-32">
        <div className="row responsive-stack" style={{ justifyContent: "space-between", alignItems: "flex-end", gap: 20 }}>
          <div className="col gap-14">
            <div className="sec-label">Questions</div>
            <h2 className="h-sec">Things people<br /><em>ask us.</em></h2>
          </div>
          <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontWeight: 300, color: "var(--ink-3)", maxWidth: 320, margin: 0, fontSize: 17, lineHeight: 1.5 }}>
            Anything else, just call — we're happy to talk it through.
          </p>
        </div>

        <div className="col" style={{ borderTop: "1px solid var(--ink)" }}>
          {HOME_FAQS.map(([q, a], i) => (
            <details key={i} style={{ borderBottom: "1px solid var(--rule)", padding: "6px 0" }}>
              <summary style={{ listStyle: "none", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, padding: "20px 0" }}>
                <div style={{ fontFamily: "var(--serif)", fontSize: "clamp(19px, 1.9vw, 24px)", fontWeight: 300, letterSpacing: "-0.01em" }}>{q}</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 18, color: "var(--ink-3)", flexShrink: 0 }}>+</div>
              </summary>
              <div style={{ paddingBottom: 22, fontSize: 15, color: "var(--ink-2)", lineHeight: 1.7, maxWidth: 720 }}>{a}</div>
            </details>
          ))}

          <details style={{ borderBottom: "1px solid var(--ink)", padding: "6px 0" }}>
            <summary style={{ listStyle: "none", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, padding: "20px 0" }}>
              <div style={{ fontFamily: "var(--serif)", fontSize: "clamp(19px, 1.9vw, 24px)", fontWeight: 300, letterSpacing: "-0.01em" }}>
                Our step-by-step process <span style={{ color: "var(--ink-3)" }}>— the full checklist</span>
              </div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 18, color: "var(--ink-3)", flexShrink: 0 }}>+</div>
            </summary>
            <div style={{ paddingBottom: 24 }}>
              <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.7, maxWidth: 720, margin: "0 0 24px" }}>
                The document we tape inside the van and tick off, line by line, on every
                multi-stage correction.
              </p>
              <SOPoster embedded />
            </div>
          </details>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────── CLOSING CTA ──────────
function ClosingCTA() {
  return (
    <section className="section" style={{ background: "var(--footer-bg)", color: "var(--footer-fg)", paddingTop: 96, paddingBottom: 96 }}>
      <div className="wrap col" style={{ alignItems: "center", textAlign: "center", gap: 24 }}>
        <div className="spec" style={{ color: "var(--footer-mute)" }}>GET STARTED</div>
        <h2 className="h-display" style={{ fontSize: "clamp(40px, 6.5vw, 92px)", maxWidth: "15ch", margin: 0, color: "var(--footer-fg)" }}>
          Tell us about <em style={{ color: "var(--footer-mute)" }}>your car.</em>
        </h2>
        <p style={{ fontFamily: "var(--serif)", fontWeight: 300, fontSize: "clamp(17px, 1.6vw, 20px)", color: "var(--footer-mute)", maxWidth: 520, margin: 0, lineHeight: 1.5 }}>
          Call, or send a few photos and we'll come back to you within two business days.
        </p>
        <div className="row gap-12 responsive-stack stack-center" style={{ marginTop: 12, alignItems: "center" }}>
          <a href={PHONE_HREF} className="btn" style={{ background: "var(--footer-fg)", borderColor: "var(--footer-fg)", color: "var(--footer-bg)" }}>{`Call ${PHONE}`}</a>
          <a href="contact.html" className="btn" style={{ background: "transparent", borderColor: "oklch(1 0 0 / 0.35)", color: "var(--footer-fg)" }}>Send photos <span className="arr">→</span></a>
        </div>
        <a href={"mailto:" + EMAIL} className="spec" style={{ color: "var(--footer-mute)", marginTop: 8 }}>{EMAIL}</a>
      </div>
    </section>
  );
}

Object.assign(window, { Services, HowItWorks, About, FAQ, ClosingCTA, HOME_SERVICES, HOME_FAQS });
