// app.jsx — Duncan's Autoworx site
// Sections compose top to bottom: Nav → Hero (with multi-step booking) → Marquee →
// Services → Process → Coverage → Reviews → FAQ → CTA → Footer. Tweaks panel
// covers accent color, headline font, hero variant.

const { useState, useEffect, useRef } = React;

/* ── Icons (line, 24x24) ───────────────────────────────────────────── */

const Ico = {
  wrench: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14.7 6.3a4 4 0 1 0 5.4 5.4l-2-2-1.4 1.4-3.5-3.5 1.4-1.4-2-1.9zM12 9l-8.5 8.5a2.1 2.1 0 0 0 3 3L15 12" />
    </svg>
  ),
  battery: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="7" width="18" height="10" rx="1" />
      <path d="M22 11v2M6 10v4M10 10v4M14 10v4" />
    </svg>
  ),
  brake: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" />
      <circle cx="12" cy="12" r="3" />
      <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" />
    </svg>
  ),
  oil: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3l4 6a4.5 4.5 0 1 1-8 0l4-6z" />
      <path d="M9 14c1 1 5 1 6 0" />
    </svg>
  ),
  diagnostic: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 12h3l2-5 4 10 2-5h7" />
    </svg>
  ),
  ac: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2v20M2 12h20M4.9 4.9l14.2 14.2M19.1 4.9L4.9 19.1" />
    </svg>
  ),
  phone: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
      <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L7.9 9.8a16 16 0 0 0 6 6l1.4-1.4a2 2 0 0 1 2.1-.4c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z" />
    </svg>
  ),
  pin: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
      <path d="M20 10c0 7-8 12-8 12s-8-5-8-12a8 8 0 0 1 16 0z" />
      <circle cx="12" cy="10" r="3" />
    </svg>
  ),
  arrow: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>
  ),
};

/* ── Brand mark used in nav + footer ──────────────────────────────── */

function BrandMark({ size = 44 }) {
  return (
    <div
      className="mark"
      style={{
        width: size,
        height: size,
        backgroundImage: "url(assets/duncans-logo.jpg)",
      }}
    />
  );
}

/* ── Nav ───────────────────────────────────────────────────────────── */

function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#top" className="nav-brand">
          <BrandMark />
          <div>
            <div className="name">Duncan's <em>Autoworx</em></div>
            <div className="tag">We Come To You</div>
          </div>
        </a>
        <div className="nav-links">
          <a href="#services" className="active">Services</a>
          <a href="#process">How It Works</a>
          <a href="#coverage">Service Area</a>
          <a href="#reviews">Reviews</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-cta">
          <a href="tel:5555550100" className="btn btn-ghost btn-sm">
            {Ico.phone} (555) 555-0100
          </a>
          <a href="#book" className="btn btn-primary btn-sm">
            Book Now {Ico.arrow}
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ── Hero with booking widget ──────────────────────────────────────── */

function Hero({ accent, heroVariant }) {
  return (
    <section className="hero" id="top">
      <div className="wrap hero-inner">
        <div className="hero-copy">
          <div className="badge-row">
            <span className="eyebrow"><span className="dot" />On-Site Mobile Mechanic · Est. 2018</span>
          </div>
          <h1 className="display">
            <span className="line chrome-text">Your Garage</span>
            <span className="line chrome-text">Is Wherever</span>
            <span className="line">
              <span className="strike"><span className="red-text">You Park.</span></span>
            </span>
          </h1>
          <p className="hero-sub">
            Lorem ipsum dolor sit amet — we roll up to your driveway, office lot,
            or roadside breakdown with a fully-equipped service van. Diagnostics,
            repairs, and maintenance on-site, no towing required.
          </p>
          <div className="hero-cta-row">
            <a href="#book" className="btn btn-primary btn-lg">
              Get A Free Quote {Ico.arrow}
            </a>
            <a href="tel:5555550100" className="btn btn-ghost btn-lg">
              {Ico.phone} Call Dispatch
            </a>
          </div>
          <div className="hero-trust">
            <div className="item">
              <div className="num chrome-text">4.9<span style={{ color: accent }}>★</span></div>
              <div className="lbl">Google · 287 reviews</div>
            </div>
            <div className="item">
              <div className="num chrome-text">2,400+</div>
              <div className="lbl">Vehicles serviced</div>
            </div>
            <div className="item">
              <div className="num chrome-text">90<span style={{ color: accent }}>min</span></div>
              <div className="lbl">Avg. arrival window</div>
            </div>
          </div>
        </div>

        <div className="hero-stage">
          <VanCard />
          <BookingWidget />
        </div>
      </div>
    </section>
  );
}

function VanCard() {
  return (
    <div className="van-panel">
      <div className="corner-tag"><span className="pulse" />Live · Van 02 en route</div>
      <div className="corner-spec">UNIT&nbsp;02 / SECTOR&nbsp;7B<br />ETA 00:42:18</div>
      <div className="placeholder-img">
        <div className="caption">[ van + tools — exterior shot ]</div>
      </div>
    </div>
  );
}

/* ── Multi-step booking widget (interactive) ───────────────────────── */

const SERVICES = [
  { id: "diag", title: "Diagnostic", desc: "Check engine / electrical" },
  { id: "brake", title: "Brakes", desc: "Pads · rotors · fluid" },
  { id: "battery", title: "Battery", desc: "Test · jump · replace" },
  { id: "oil", title: "Oil Change", desc: "Conventional → synthetic" },
  { id: "ac", title: "A/C Service", desc: "Recharge · leak check" },
  { id: "other", title: "Other", desc: "Tell us in notes" },
];

const WINDOWS = [
  { id: "asap", title: "ASAP", desc: "Today · ≤ 2h" },
  { id: "today-pm", title: "Today PM", desc: "After 1:00pm" },
  { id: "tomorrow", title: "Tomorrow", desc: "8am – 6pm" },
  { id: "schedule", title: "Pick a day", desc: "Within 14 days" },
];

function BookingWidget() {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    service: "",
    vehicle: "",
    zip: "",
    window: "",
    name: "",
    phone: "",
    notes: "",
  });

  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));

  const canAdvance = () => {
    if (step === 0) return data.service !== "";
    if (step === 1) return data.vehicle.trim().length > 1 && /^\d{5}$/.test(data.zip);
    if (step === 2) return data.window !== "";
    if (step === 3) return data.name.trim().length > 1 && data.phone.replace(/\D/g, "").length >= 10;
    return true;
  };

  const next = () => canAdvance() && setStep((s) => Math.min(s + 1, 4));
  const back = () => setStep((s) => Math.max(s - 1, 0));

  const labels = ["Service", "Vehicle", "When", "Contact", "Confirmed"];

  return (
    <div className="booking" id="book">
      <div className="booking-head">
        <span className="label">— Quick Quote / Step {Math.min(step + 1, 4)} of 4</span>
        <div className="step-dots">
          {[0,1,2,3].map((i) => (
            <div
              key={i}
              className={`dot ${step === i ? "active" : step > i ? "done" : ""}`}
            />
          ))}
        </div>
      </div>

      {step === 0 && (
        <>
          <h3>What needs fixing?</h3>
          <div className="sub">Pick the closest match — we'll confirm specifics on arrival.</div>
          <div className="choice-grid">
            {SERVICES.map((s) => (
              <button
                key={s.id}
                className={`choice ${data.service === s.id ? "selected" : ""}`}
                onClick={() => set("service", s.id)}
              >
                <div className="ttl">{s.title}</div>
                <div className="desc">{s.desc}</div>
              </button>
            ))}
          </div>
        </>
      )}

      {step === 1 && (
        <>
          <h3>Your vehicle</h3>
          <div className="sub">Year / make / model. We service most makes — domestic, import, fleet.</div>
          <div className="field">
            <label>Vehicle</label>
            <input
              placeholder="e.g. 2019 Toyota Tacoma"
              value={data.vehicle}
              onChange={(e) => set("vehicle", e.target.value)}
            />
          </div>
          <div className="field">
            <label>ZIP where it's parked</label>
            <input
              placeholder="80401"
              maxLength={5}
              value={data.zip}
              onChange={(e) => set("zip", e.target.value.replace(/\D/g, ""))}
            />
          </div>
        </>
      )}

      {step === 2 && (
        <>
          <h3>When works?</h3>
          <div className="sub">Most jobs we can dispatch same-day. Emergency? Call dispatch directly.</div>
          <div className="choice-grid">
            {WINDOWS.map((w) => (
              <button
                key={w.id}
                className={`choice ${data.window === w.id ? "selected" : ""}`}
                onClick={() => set("window", w.id)}
              >
                <div className="ttl">{w.title}</div>
                <div className="desc">{w.desc}</div>
              </button>
            ))}
          </div>
        </>
      )}

      {step === 3 && (
        <>
          <h3>How do we reach you?</h3>
          <div className="sub">We'll text a confirmation and ETA — no spam, no email lists.</div>
          <div className="field-row">
            <div className="field">
              <label>Name</label>
              <input
                placeholder="First & last"
                value={data.name}
                onChange={(e) => set("name", e.target.value)}
              />
            </div>
            <div className="field">
              <label>Phone</label>
              <input
                placeholder="(555) 555-0100"
                value={data.phone}
                onChange={(e) => set("phone", e.target.value)}
              />
            </div>
          </div>
          <div className="field">
            <label>Notes (optional)</label>
            <textarea
              rows={2}
              placeholder="Symptoms, sounds, lights on the dash…"
              value={data.notes}
              onChange={(e) => set("notes", e.target.value)}
            />
          </div>
        </>
      )}

      {step === 4 && (
        <div className="booking-success">
          <div className="check">✓</div>
          <h4>Request received</h4>
          <p>A dispatcher will text {data.name.split(" ")[0] || "you"} within 15 minutes with a quote and ETA.</p>
          <div className="ticket">
            <div className="row"><span className="k">TICKET</span><span className="v">DA-{Math.floor(Math.random()*9000+1000)}</span></div>
            <div className="row"><span className="k">SERVICE</span><span className="v">{SERVICES.find((s)=>s.id===data.service)?.title || "—"}</span></div>
            <div className="row"><span className="k">VEHICLE</span><span className="v">{data.vehicle || "—"}</span></div>
            <div className="row"><span className="k">WINDOW</span><span className="v">{WINDOWS.find((w)=>w.id===data.window)?.title || "—"}</span></div>
            <div className="row"><span className="k">ZIP</span><span className="v">{data.zip || "—"}</span></div>
          </div>
        </div>
      )}

      {step < 4 && (
        <div className="booking-actions">
          {step > 0 && (
            <button className="btn-link" onClick={back}>← Back</button>
          )}
          <button
            className="btn btn-primary"
            disabled={!canAdvance()}
            style={{ opacity: canAdvance() ? 1 : 0.4 }}
            onClick={next}
          >
            {step === 3 ? "Submit Request" : "Continue"} {Ico.arrow}
          </button>
        </div>
      )}
    </div>
  );
}

/* ── Marquee ───────────────────────────────────────────────────────── */

function Marquee() {
  const items = [
    "Same-Day Service", "All Makes · All Models", "ASE Certified",
    "No Tow Required", "Fleet Accounts Welcome", "Transparent Pricing",
    "Same-Day Service", "All Makes · All Models", "ASE Certified",
    "No Tow Required", "Fleet Accounts Welcome", "Transparent Pricing",
  ];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {items.map((t, i) => (
          <span key={i} className="marquee-item">{t}</span>
        ))}
      </div>
    </div>
  );
}

/* ── Services ──────────────────────────────────────────────────────── */

const SERVICE_CARDS = [
  { num: "01", icon: Ico.diagnostic, title: "Diagnostics", price: "from $89",
    desc: "OBD-II scans, drive-cycle tests, and live-data analysis to pin down check-engine codes and intermittent faults." },
  { num: "02", icon: Ico.brake, title: "Brake Service", price: "from $189",
    desc: "Pad and rotor replacement, fluid flush, parking-brake adjustment. OEM-grade parts, lifetime workmanship warranty." },
  { num: "03", icon: Ico.battery, title: "Battery & Electrical", price: "from $65",
    desc: "Load testing, alternator and starter diagnosis, battery replacement, and wiring repair for no-start conditions." },
  { num: "04", icon: Ico.oil, title: "Oil & Fluids", price: "from $79",
    desc: "Conventional, synthetic blend, or full synthetic. All filters and fluids — coolant, trans, diff, brake, power steering." },
  { num: "05", icon: Ico.ac, title: "A/C & Heating", price: "from $129",
    desc: "Recharge, leak detection, compressor and condenser replacement. R-134a and R-1234yf systems supported." },
  { num: "06", icon: Ico.wrench, title: "Tune-Ups & More", price: "from $149",
    desc: "Spark plugs, belts, hoses, suspension, tires, and the long-tail of jobs that don't fit a tidy category." },
];

function Services() {
  return (
    <section className="section" id="services">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot" />— Services / 01</span>
            <h2 className="display chrome-text">What we fix.<br /><span className="red-text">On-site.</span></h2>
          </div>
          <a href="#book" className="btn btn-ghost">
            See full price list {Ico.arrow}
          </a>
        </div>
        <div className="svc-grid">
          {SERVICE_CARDS.map((c) => (
            <div key={c.num} className="svc-card">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <div className="icon">{c.icon}</div>
                <span className="num">{c.num}</span>
              </div>
              <h3>{c.title}</h3>
              <p>{c.desc}</p>
              <div className="meta">
                <span>· Most jobs same-day ·</span>
                <span className="from">{c.price}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Process ───────────────────────────────────────────────────────── */

function Process() {
  return (
    <section className="section" id="process" style={{ background: "#080808" }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot" />— Process / 02</span>
            <h2 className="display chrome-text">Three steps.<br /><span className="red-text">No shop.</span></h2>
          </div>
        </div>
        <div className="steps">
          <div className="step">
            <div className="big-num">01</div>
            <h4>Tell us what's wrong</h4>
            <p>Lorem ipsum — book online in under 60 seconds or call dispatch. We'll text a flat-rate quote before we ever turn a wrench.</p>
          </div>
          <div className="step">
            <div className="big-num">02</div>
            <h4>We roll up to you</h4>
            <p>Our service van shows up at your home, office, or roadside — fully stocked with parts, lifts, fluids, and diagnostic gear.</p>
          </div>
          <div className="step">
            <div className="big-num">03</div>
            <h4>Drive away the same day</h4>
            <p>Most repairs wrap in 60–120 minutes. You sign off in-app, the warranty starts, and you skip the tow and the shop wait.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Coverage / map ────────────────────────────────────────────────── */

function Coverage() {
  const [zip, setZip] = useState("");
  const [result, setResult] = useState(null);

  const check = () => {
    if (!/^\d{5}$/.test(zip)) { setResult({ ok: false, msg: "Enter a 5-digit ZIP." }); return; }
    // demo logic: 80xxx in service, 81xxx fringe, else out
    const prefix = zip.slice(0, 2);
    if (prefix === "80") setResult({ ok: true, msg: `In service area — 45–90 min ETA to ${zip}.` });
    else if (prefix === "81") setResult({ ok: "fringe", msg: `Fringe coverage — call dispatch for ${zip}.` });
    else setResult({ ok: false, msg: `Outside daily coverage. Fleet jobs may qualify — call dispatch.` });
  };

  const zones = [
    { city: "Golden / Lakewood", eta: "45–60 MIN", status: "live" },
    { city: "Denver Metro", eta: "60–90 MIN", status: "live" },
    { city: "Arvada / Westminster", eta: "60–90 MIN", status: "live" },
    { city: "Boulder / Louisville", eta: "75–120 MIN", status: "live" },
    { city: "Fort Collins", eta: "By appt.", status: "fringe" },
    { city: "Colorado Springs", eta: "Fleet only", status: "fringe" },
  ];

  return (
    <section className="section" id="coverage">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot" />— Coverage / 03</span>
            <h2 className="display chrome-text">Where we<br /><span className="red-text">come to you.</span></h2>
          </div>
          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
            <input
              className="zip-check"
              placeholder="Enter your ZIP"
              value={zip}
              onChange={(e) => setZip(e.target.value.replace(/\D/g, "").slice(0, 5))}
              style={{
                background: "#060606", border: "1px solid var(--hairline-strong)",
                color: "var(--text)", padding: "12px 14px", fontFamily: "var(--font-mono)",
                fontSize: 13, letterSpacing: "0.1em", width: 180, borderRadius: 3,
                outline: "none",
              }}
              onKeyDown={(e) => e.key === "Enter" && check()}
            />
            <button className="btn btn-primary" onClick={check}>Check</button>
          </div>
        </div>

        {result && (
          <div style={{
            marginBottom: 24, padding: "12px 16px",
            background: result.ok === true ? "rgba(43,217,107,0.08)" : result.ok === "fringe" ? "rgba(255,179,0,0.08)" : "rgba(225,29,41,0.08)",
            border: `1px solid ${result.ok === true ? "rgba(43,217,107,0.3)" : result.ok === "fringe" ? "rgba(255,179,0,0.3)" : "rgba(225,29,41,0.3)"}`,
            color: result.ok === true ? "#2bd96b" : result.ok === "fringe" ? "#ffb300" : "#ff5a66",
            fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.06em",
          }}>
            {result.msg}
          </div>
        )}

        <div className="coverage">
          <div className="map">
            <MapPlaceholder />
          </div>
          <div className="zones">
            {zones.map((z) => (
              <div key={z.city} className="zone">
                <div>
                  <div className="city">{z.city}</div>
                  <div className="eta">{z.eta}</div>
                </div>
                <span className={`badge ${z.status === "live" ? "live" : ""}`}>
                  {z.status === "live" ? "● Live" : "Fringe"}
                </span>
                {Ico.pin}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function MapPlaceholder() {
  return (
    <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
      <defs>
        <pattern id="mapgrid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="1" />
        </pattern>
        <radialGradient id="cov" cx="50%" cy="55%" r="40%">
          <stop offset="0%" stopColor="rgba(225,29,41,0.45)" />
          <stop offset="60%" stopColor="rgba(225,29,41,0.15)" />
          <stop offset="100%" stopColor="rgba(225,29,41,0)" />
        </radialGradient>
        <radialGradient id="cov2" cx="50%" cy="55%" r="55%">
          <stop offset="0%" stopColor="rgba(255,179,0,0.15)" />
          <stop offset="100%" stopColor="rgba(255,179,0,0)" />
        </radialGradient>
      </defs>
      <rect width="400" height="300" fill="#0c0c0c" />
      <rect width="400" height="300" fill="url(#mapgrid)" />
      {/* abstract roads */}
      <path d="M-20 120 L 220 160 L 420 110" stroke="rgba(255,255,255,0.12)" strokeWidth="1.4" fill="none" />
      <path d="M-20 200 L 180 180 L 420 220" stroke="rgba(255,255,255,0.10)" strokeWidth="1.2" fill="none" />
      <path d="M120 -20 L 180 180 L 240 320" stroke="rgba(255,255,255,0.10)" strokeWidth="1.2" fill="none" />
      <path d="M260 -20 L 220 160 L 280 320" stroke="rgba(255,255,255,0.08)" strokeWidth="1" fill="none" />
      {/* fringe ring */}
      <ellipse cx="200" cy="165" rx="160" ry="110" fill="url(#cov2)" />
      {/* live coverage */}
      <ellipse cx="200" cy="165" rx="110" ry="75" fill="url(#cov)" />
      <ellipse cx="200" cy="165" rx="110" ry="75" fill="none" stroke="rgba(225,29,41,0.5)" strokeWidth="1" strokeDasharray="3 4" />
      {/* HQ marker */}
      <circle cx="200" cy="165" r="6" fill="#E11D29" />
      <circle cx="200" cy="165" r="12" fill="none" stroke="#E11D29" strokeWidth="1" opacity="0.5" />
      {/* van pins */}
      {[[120,140],[260,150],[180,200],[290,180]].map(([x,y],i)=>(
        <g key={i}>
          <circle cx={x} cy={y} r="3" fill="#2bd96b" />
          <circle cx={x} cy={y} r="3" fill="none" stroke="#2bd96b" strokeWidth="1" opacity="0.4">
            <animate attributeName="r" values="3;10;3" dur="2.4s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0.6;0;0.6" dur="2.4s" repeatCount="indefinite" />
          </circle>
        </g>
      ))}
      {/* labels */}
      <text x="200" y="180" fontFamily="ui-monospace, monospace" fontSize="9" fill="#e9ecef" textAnchor="middle" letterSpacing="2">HQ · GOLDEN, CO</text>
      <text x="12" y="20" fontFamily="ui-monospace, monospace" fontSize="9" fill="#6b7075" letterSpacing="2">COVERAGE / LIVE</text>
      <text x="388" y="290" fontFamily="ui-monospace, monospace" fontSize="9" fill="#6b7075" textAnchor="end" letterSpacing="2">40MI RADIUS</text>
    </svg>
  );
}

/* ── Reviews ───────────────────────────────────────────────────────── */

const REVIEWS = [
  { stars: 5, text: "Battery died in the office lot at 4:45pm. Duncan was there by 5:30, swapped the battery, tested the alternator, and I drove home on time. Wild.",
    name: "Marcus L.", car: "'18 Subaru Outback", init: "M" },
  { stars: 5, text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Honest pricing, no upsell. Showed me the worn pads before he replaced them. Felt like a real mechanic, not a sales pitch.",
    name: "Priya R.", car: "'21 Honda CR-V", init: "P" },
  { stars: 5, text: "Manage a small fleet of contractor vans — Duncan's keeps all six on the road. Monthly inspections in our yard means zero downtime at a real shop.",
    name: "Tom V.", car: "Fleet · 6 vehicles", init: "T" },
];

function Reviews() {
  return (
    <section className="section" id="reviews" style={{ background: "#080808" }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot" />— Reviews / 04</span>
            <h2 className="display chrome-text">Loud wrenches.<br /><span className="red-text">Quiet customers.</span></h2>
          </div>
          <div style={{ textAlign: "right" }}>
            <div className="display chrome-text" style={{ fontSize: 56 }}>4.9<span style={{ color: "var(--amber)", fontSize: 32, marginLeft: 4 }}>★</span></div>
            <div className="eyebrow" style={{ marginTop: 4 }}>287 verified · Google + Yelp</div>
          </div>
        </div>
        <div className="reviews">
          {REVIEWS.map((r, i) => (
            <div key={i} className="review">
              <div className="stars">{"★".repeat(r.stars)}</div>
              <p>"{r.text}"</p>
              <div className="who">
                <div className="avatar">{r.init}</div>
                <div className="meta">
                  <div className="name">{r.name}</div>
                  <div className="car">{r.car}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── FAQ ───────────────────────────────────────────────────────────── */

const FAQS = [
  { q: "How does mobile service actually work?",
    a: "You book online or call. We dispatch a fully-equipped service van to your location — driveway, parking lot, roadside. Most jobs wrap in 60-120 minutes." },
  { q: "What's the service area?",
    a: "Lorem ipsum — Denver Metro, Golden, Lakewood, Arvada, Westminster, Boulder, Louisville. Fleet accounts and one-off appointments available in Fort Collins and Colorado Springs." },
  { q: "Are you certified and insured?",
    a: "Yes. ASE-certified technicians, $2M general liability, $1M garage-keeper's, fully bonded. Certificates available on request." },
  { q: "What if I need parts that aren't on the van?",
    a: "Standard wear parts (pads, rotors, batteries, fluids, common filters) ride with us. For specialty parts, we order with same- or next-day delivery and schedule a return visit at no extra trip charge." },
  { q: "Do you offer warranties?",
    a: "12-month / 12,000-mile warranty on all workmanship. Parts carry their manufacturer warranty — typically 24+ months." },
  { q: "Payment?",
    a: "Cards, ACH, Apple/Google Pay, and fleet net-30 invoicing on approval. No surprise fees — you sign off on the quote before we start." },
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot" />— FAQ / 05</span>
            <h2 className="display chrome-text">Common<br /><span className="red-text">questions.</span></h2>
          </div>
        </div>
        <div className="faq">
          {FAQS.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="plus" />
              </button>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── CTA band ──────────────────────────────────────────────────────── */

function CTABand() {
  return (
    <section className="cta-band">
      <span className="slash" style={{ width: 520, top: 36, left: "-80px" }} />
      <span className="slash" style={{ width: 380, bottom: 32, right: "-40px" }} />
      <div className="wrap">
        <div>
          <span className="eyebrow"><span className="dot" />— Dispatch / 24-7 line</span>
          <h2 className="display chrome-text" style={{ marginTop: 12 }}>
            Stuck somewhere?<br /><span className="red-text">We're already rolling.</span>
          </h2>
          <p>
            Lorem ipsum — text the address, the year/make/model, and what's wrong.
            We'll text back with a quote and ETA inside 15 minutes.
          </p>
        </div>
        <div className="actions">
          <div className="phone chrome-text">(555) 555-0100</div>
          <a href="#book" className="btn btn-primary btn-lg">
            Book Online {Ico.arrow}
          </a>
          <a href="sms:5555550100" className="btn btn-ghost btn-lg">
            Text Dispatch
          </a>
        </div>
      </div>
    </section>
  );
}

/* ── Footer ────────────────────────────────────────────────────────── */

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="nav-brand" style={{ marginBottom: 16 }}>
              <BrandMark size={52} />
              <div>
                <div className="name" style={{ fontSize: 24 }}>Duncan's <em>Autoworx</em></div>
                <div className="tag">We Come To You</div>
              </div>
            </div>
            <p style={{ color: "var(--text-dim)", fontSize: 14, lineHeight: 1.6, maxWidth: 320 }}>
              Lorem ipsum — independent mobile mechanic serving the Front Range.
              ASE-certified, fully insured, no garage door required.
            </p>
          </div>
          <div>
            <h5>Services</h5>
            <ul>
              <li><a href="#services">Diagnostics</a></li>
              <li><a href="#services">Brake Service</a></li>
              <li><a href="#services">Battery & Electrical</a></li>
              <li><a href="#services">Oil & Fluids</a></li>
              <li><a href="#services">A/C & Heating</a></li>
              <li><a href="#services">Fleet Programs</a></li>
            </ul>
          </div>
          <div>
            <h5>Service Area</h5>
            <ul>
              <li><a href="#coverage">Golden / Lakewood</a></li>
              <li><a href="#coverage">Denver Metro</a></li>
              <li><a href="#coverage">Arvada / Westminster</a></li>
              <li><a href="#coverage">Boulder / Louisville</a></li>
              <li><a href="#coverage">Check your ZIP →</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="tel:5555550100">(555) 555-0100</a></li>
              <li><a href="sms:5555550100">Text dispatch</a></li>
              <li><a href="mailto:hello@duncansautoworx.example">hello@duncansautoworx.example</a></li>
              <li style={{ color: "var(--text-mute)", fontSize: 12, fontFamily: "var(--font-mono)", letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 8 }}>
                Mon–Sat · 7am–7pm<br />Sun · Emergency only
              </li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Duncan's Autoworx · ASE Certified · Lic. #ABC-12345</div>
          <div>Built for the road · v1.0</div>
        </div>
      </div>
    </footer>
  );
}

/* ── App ───────────────────────────────────────────────────────────── */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E11D29",
  "displayFont": "Barlow Condensed",
  "heroVariant": "stack"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply accent & font via CSS custom properties
  useEffect(() => {
    document.documentElement.style.setProperty("--red", t.accent);
    document.documentElement.style.setProperty(
      "--font-display",
      `"${t.displayFont}", "Arial Narrow", sans-serif`
    );
  }, [t.accent, t.displayFont]);

  return (
    <>
      <Nav />
      <Hero accent={t.accent} heroVariant={t.heroVariant} />
      <Marquee />
      <Services />
      <Process />
      <Coverage />
      <Reviews />
      <FAQ />
      <CTABand />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#E11D29", "#FF6B00", "#FFB300", "#1F8A5B", "#2A6FDB"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Typography" />
        <TweakSelect
          label="Headline font"
          value={t.displayFont}
          options={["Barlow Condensed", "Oswald", "Anton", "Archivo Black", "Bebas Neue"]}
          onChange={(v) => setTweak("displayFont", v)}
        />
        <TweakSection label="Layout" />
        <TweakRadio
          label="Hero stack"
          value={t.heroVariant}
          options={["stack", "wide"]}
          onChange={(v) => setTweak("heroVariant", v)}
        />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);