// 3C Detailing — Sections part 3 (FAQ, CTA, Footer, Booking modal)

const { useState: useState3, useEffect: useEffect3 } = React;

/* ─── FAQ ─── */
const FAQS = [
  { q: "What is car detailing?", a: "A thorough cleaning, renewal, and finishing process for your vehicle. It goes well beyond a car wash — washing, decontamination, polishing, interior reset, and protection inside and out." },
  { q: "How long does a typical service take?", a: "A standard detail runs 2–3 hours. Paint correction and ceramic coatings typically take 3–4 days or more, depending on the package and condition." },
  { q: "Do I need an appointment?", a: "Yes — we are by appointment only." },
  { q: "Can you remove scratches and swirl marks?", a: "In most cases, yes. Paint correction uses specialized compounds and polishes to remove or reduce swirls, light scratches, and oxidation, restoring clarity and depth." },
  { q: "How often should I get my car detailed?", a: "Every 3–6 months is a good cadence for most drivers. If you're in harsh weather or off-road conditions, more often. Coatings can extend that interval significantly." },
  { q: "Will detailing remove odors?", a: "Odors are among the most difficult things to remove — but in most cases they can be. We use deep cleaning, deodorizing, and ozone/treatment-grade services to address smoke, pet, and other persistent odors." },
  { q: "Do I need to prep my car before dropping it off?", a: "Just remove personal items. If you have specific spots or concerns, tell us at check-in and we'll prioritize them." },
];

function FAQ() {
  const [open, setOpen] = useState3(0);
  return (
    <section className="section faq" id="faq">
      <div className="shell">
        <div className="section-head">
          <div>
            <span className="section-num">06 / FAQ</span>
            <h2 className="h-display">Common <em>questions.</em></h2>
          </div>
          <p className="lede">
            Quick answers to what we hear most. Anything else — call us at <a href="tel:8459015573" style={{ color: 'var(--accent)' }}>(845) 901-5573</a> and we'll talk it through.
          </p>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-icon"><Icon.plus /></span>
              </button>
              <div className="faq-a"><p>{f.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── CTA / Visit ─── */
function CTAStrip({ onBook }) {
  return (
    <section className="cta-strip" id="visit">
      <div className="shell cta-strip-inner">
        <div>
          <span className="eyebrow">★ Ready when you are</span>
          <h2 className="h-display cta-title" style={{ marginTop: 18 }}>
            Park it.<br/><em>Pick it up perfect.</em>
          </h2>
          <div style={{ display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap' }}>
            <button className="btn btn-primary" onClick={onBook}>Book your appointment <Icon.arrow className="btn-arrow"/></button>
            <a className="btn btn-ghost" href="tel:8459015573"><Icon.phone /> Call the shop</a>
          </div>
        </div>
        <div className="cta-card">
          <h4>Visit the shop</h4>
          <div className="cta-info">
            <div><b>Address</b>454 NY-28, Kingston, NY 12401</div>
            <div><b>Hours</b>Monday – Saturday · 9am – 6pm<br/>Closed Sunday</div>
            <div><b>Phone</b><a href="tel:8459015573">(845) 901-5573</a></div>
            <div><b>Instagram</b><a href="https://www.instagram.com/3c_detailing_/" target="_blank" rel="noreferrer">@3c_detailing_</a></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── FOOTER ─── */
function Footer() {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div>
            <div className="footer-brand">3C Detailing</div>
            <p className="footer-tagline">Concierge-level paint care, ceramic coatings, and PPF from our Kingston shop.</p>
          </div>
          <div>
            <h5>Shop</h5>
            <div className="footer-links">
              <a href="#services">Services</a>
              <a href="#pricing">Pricing</a>
              <a href="#gallery">Work</a>
              <a href="#process">Process</a>
              <a href="#faq">FAQ</a>
            </div>
          </div>
          <div>
            <h5>Contact</h5>
            <div className="footer-links">
              <a href="tel:8459015573">(845) 901-5573</a>
              <a href="https://maps.google.com/?q=454+NY-28+Kingston+NY" target="_blank" rel="noreferrer">454 NY-28, Kingston</a>
              <a href="https://www.instagram.com/3c_detailing_/" target="_blank" rel="noreferrer">Instagram</a>
            </div>
          </div>
          <div>
            <h5>Mission</h5>
            <p style={{ margin: 0, fontSize: 13, color: 'var(--ink-dim)', lineHeight: 1.55 }}>
              Treat every vehicle like it's the only one on the schedule. No shortcuts. No upsells you don't need.
            </p>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 3C Detailing · Kingston, NY</span>
          <span>Site refreshed 2026</span>
        </div>
      </div>
    </footer>
  );
}

/* ─── BOOKING MODAL ─── native multi-step flow ─── */
const BOOKING_VEHICLES = [
  { id: 'new',     label: 'New', sub: '(< 2k mi)', priceIdx: 0 },
  { id: 'coupe',   label: 'Coupe',                  priceIdx: 1 },
  { id: 'sedan',   label: 'Sedan',                  priceIdx: 2 },
  { id: 'suvmid',  label: 'Hatch / Mid SUV',        priceIdx: 3 },
  { id: 'suvfull', label: 'Full SUV / Half-Ton',    priceIdx: 4 },
  { id: 'truck',   label: '1-Ton / Van',            priceIdx: 5 },
];

// Master service catalog. `prices` keyed by vehicle priceIdx (0..5).
// `flat` is a fixed price for add-ons. `quote` means "by quote".
const BOOKING_SERVICES = [
  { id: 'int-or-ext', name: 'Interior or Exterior', cat: 'Detailing', prices: [215,260,305,350,395,440] },
  { id: 'signature',  name: 'Signature (Both)',     cat: 'Detailing', prices: [335,380,425,470,515,560] },
  { id: 'gentleman',  name: "Gentleman's Spec",     cat: 'Detailing', prices: [435,480,525,570,615,660] },
  { id: 'seasonal',   name: 'Seasonal Coating',     cat: 'Ceramic',   prices: [800,850,900,950,1000,1100] },
  { id: 'coat-1y',    name: '1-Year Coating',       cat: 'Ceramic',   prices: [1000,1100,1200,1300,1400,1500] },
  { id: 'coat-5y',    name: '5-Year Coating',       cat: 'Ceramic',   prices: [1500,1500,1700,1900,2100,2300] },
  { id: 'coat-9y',    name: '9-Year Coating',       cat: 'Ceramic',   prices: [1650,1650,1850,2050,2250,2450] },
  { id: 'ag1051',     name: 'AG 1051',              cat: 'Wipe-On Sacrificial Clear Coat',  prices: [2000,2000,2200,2400,2600,2800] },
  { id: 'ppf-sm',     name: 'Front End PPF — Small Vehicle',    cat: 'Paint Protection Film', quote: 'from $1,800' },
  { id: 'ppf-md',     name: 'Front End PPF — Medium Vehicle',   cat: 'Paint Protection Film', quote: 'from $2,100' },
  { id: 'ppf-lg',     name: 'Front End PPF — Large Vehicle',    cat: 'Paint Protection Film', quote: 'from $2,400' },
  { id: 'headlights', name: 'Headlight Restoration / Protection', cat: 'Add-ons',  flat: 100 },
  { id: 'odor',       name: 'Odor Bomb',             cat: 'Add-ons',  flat:  85 },
  { id: 'clay',       name: 'Clay Bar',              cat: 'Add-ons',  flat: 100 },
];

function svcPrice(svc, veh) {
  if (svc.flat)  return { value: svc.flat,  label: `$${svc.flat}` };
  if (svc.quote) return { value: 0,         label: svc.quote };
  if (!veh)      return { value: null,      label: 'Pick vehicle' };
  const v = BOOKING_VEHICLES.find(x => x.id === veh);
  if (!v) return { value: null, label: 'Pick vehicle' };
  const p = svc.prices[v.priceIdx];
  return { value: p, label: `$${p.toLocaleString()}` };
}

function BookingModal({ open, onClose, prefill }) {
  const [step, setStep]       = useState3(1);
  const [vehicle, setVehicle] = useState3(null);
  const [selected, setSelected] = useState3([]);   // array of service ids
  const [form, setForm]       = useState3({ name: '', email: '', phone: '', date: '', notes: '' });

  // Apply prefill when modal opens.
  useEffect3(() => {
    if (open) {
      setStep(1);
      if (prefill?.vehicleId) setVehicle(prefill.vehicleId);
      if (prefill?.serviceId) setSelected([prefill.serviceId]);
      else if (!prefill?.vehicleId) { setVehicle(null); setSelected([]); }
    }
  }, [open]);

  const toggle = (id) => {
    setSelected((s) => s.includes(id) ? s.filter(x => x !== id) : [...s, id]);
  };

  // Compute running total (skipping quote/no-price items).
  const total = selected.reduce((sum, id) => {
    const s = BOOKING_SERVICES.find(x => x.id === id);
    const p = svcPrice(s, vehicle);
    return sum + (p.value || 0);
  }, 0);
  const hasQuote = selected.some((id) => {
    const s = BOOKING_SERVICES.find(x => x.id === id);
    return s?.quote;
  });

  // Group services by category for the picker.
  const grouped = BOOKING_SERVICES.reduce((acc, s) => {
    (acc[s.cat] = acc[s.cat] || []).push(s);
    return acc;
  }, {});

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = () => {
    if (!form.name || !form.email) { alert('Please add your name and email.'); return; }
    setStep(4);
  };

  const vehLabel = vehicle ? BOOKING_VEHICLES.find(v => v.id === vehicle)?.label : '';
  const svcSummary = selected
    .map(id => BOOKING_SERVICES.find(s => s.id === id))
    .filter(Boolean)
    .map(s => `${s.name} (${svcPrice(s, vehicle).label})`)
    .join(', ');

  return (
    <div className={`modal-bg ${open ? 'open' : ''}`} onClick={onClose}>
      <div className="modal modal-book-native" onClick={(e) => e.stopPropagation()}>
        <div className="modal-book-head">
          <div>
            <span className="eyebrow">★ Book your appointment · Step {Math.min(step, 3)} of 3</span>
            <h3 style={{ marginTop: 6 }}>
              {step === 1 && <>Pick your <em>vehicle.</em></>}
              {step === 2 && <>Pick your <em>services.</em></>}
              {step === 3 && <>Your <em>details.</em></>}
              {step === 4 && <>Reservation <em>received.</em></>}
            </h3>
          </div>
          <button className="modal-close" onClick={onClose} aria-label="Close"><Icon.x /></button>
        </div>

        {/* Progress bar */}
        {step < 4 && (
          <div className="book-progress">
            <div className="book-progress-fill" style={{ width: `${(step / 3) * 100}%` }}></div>
          </div>
        )}

        <div className="modal-book-content">
          {/* STEP 1 · vehicle */}
          {step === 1 && (
            <div className="book-step">
              <p className="modal-sub">Pricing scales with vehicle size. Pick your size below.</p>
              <div className="veh-grid">
                {BOOKING_VEHICLES.map(v => (
                  <button
                    key={v.id}
                    className={`veh-tile ${vehicle === v.id ? 'active' : ''}`}
                    onClick={() => setVehicle(v.id)}
                  >
                    <span className="veh-tile-label">{v.label}</span>
                    {v.sub && <span className="veh-tile-sub">{v.sub}</span>}
                  </button>
                ))}
              </div>
            </div>
          )}

          {/* STEP 2 · services */}
          {step === 2 && (
            <div className="book-step">
              <p className="modal-sub">
                {vehLabel ? <>Showing pricing for your <b style={{ color: 'var(--accent)' }}>{vehLabel}</b>. Select one or more services.</> : 'Select one or more services.'}
              </p>
              {Object.entries(grouped).map(([cat, list]) => (
                <div key={cat} className="svc-group">
                  <div className="svc-group-label">{cat}</div>
                  {list.map(s => {
                    const p = svcPrice(s, vehicle);
                    const on = selected.includes(s.id);
                    return (
                      <button
                        key={s.id}
                        className={`svc-row ${on ? 'on' : ''}`}
                        onClick={() => toggle(s.id)}
                      >
                        <span className="svc-row-check">
                          {on && <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                        </span>
                        <span className="svc-row-name">{s.name}</span>
                        <span className="svc-row-price">{p.label}</span>
                      </button>
                    );
                  })}
                </div>
              ))}
            </div>
          )}

          {/* STEP 3 · contact */}
          {step === 3 && (
            <div className="book-step">
              <p className="modal-sub">We'll confirm by phone or email within one business day to lock in your time.</p>
              <div className="field"><label>Full Name</label><input type="text" placeholder="Jane Driver" value={form.name} onChange={update('name')} /></div>
              <div className="field-row">
                <div className="field"><label>Email</label><input type="email" placeholder="you@email.com" value={form.email} onChange={update('email')} /></div>
                <div className="field"><label>Phone</label><input type="tel" placeholder="(845) 555-0100" value={form.phone} onChange={update('phone')} /></div>
              </div>
              <div className="field"><label>Preferred Date</label><input type="date" value={form.date} onChange={update('date')} /></div>
              <div className="field"><label>Notes (optional)</label><textarea rows={2} placeholder="Year/make/model, condition, anything else." value={form.notes} onChange={update('notes')} /></div>

              <div className="book-summary">
                <div className="book-summary-row"><span>Vehicle</span><b>{vehLabel || '—'}</b></div>
                <div className="book-summary-row"><span>Services</span><b>{svcSummary || '—'}</b></div>
                <div className="book-summary-row total">
                  <span>Estimated total</span>
                  <b>${total.toLocaleString()}{hasQuote && <span style={{ color: 'var(--ink-mute)', fontWeight: 400, fontSize: 12, marginLeft: 6 }}>+ quote items</span>}</b>
                </div>
              </div>
            </div>
          )}

          {/* STEP 4 · confirmation */}
          {step === 4 && (
            <div className="book-step book-success">
              <div className="book-success-mark">
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M6 14l5 5 11-12" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
              <h4>Reservation request received.</h4>
              <p>Thanks, {form.name.split(' ')[0] || 'we got it'}. We'll be in touch within one business day to confirm your slot. For urgent bookings call <a href="tel:8459015573" style={{ color: 'var(--accent)' }}>(845) 901-5573</a>.</p>
              <div className="book-summary" style={{ marginTop: 8 }}>
                <div className="book-summary-row"><span>Vehicle</span><b>{vehLabel}</b></div>
                <div className="book-summary-row"><span>Services</span><b>{svcSummary}</b></div>
                <div className="book-summary-row total"><span>Estimated total</span><b>${total.toLocaleString()}{hasQuote && ' + quote'}</b></div>
              </div>
            </div>
          )}
        </div>

        <div className="modal-book-foot">
          {step === 1 && (
            <>
              <a href="tel:8459015573" className="caps" style={{ color: 'var(--ink-mute)' }}>Or call (845) 901-5573</a>
              <button className="btn btn-primary" disabled={!vehicle} onClick={() => setStep(2)}>Continue <Icon.arrow className="btn-arrow"/></button>
            </>
          )}
          {step === 2 && (
            <>
              <button className="btn btn-ghost" onClick={() => setStep(1)}>← Back</button>
              <button className="btn btn-primary" disabled={selected.length === 0} onClick={() => setStep(3)}>
                Continue · ${total.toLocaleString()}{hasQuote && ' +'} <Icon.arrow className="btn-arrow"/>
              </button>
            </>
          )}
          {step === 3 && (
            <>
              <button className="btn btn-ghost" onClick={() => setStep(2)}>← Back</button>
              <button className="btn btn-primary" onClick={submit}>Request booking <Icon.arrow className="btn-arrow"/></button>
            </>
          )}
          {step === 4 && (
            <button className="btn btn-ghost" onClick={onClose} style={{ marginLeft: 'auto' }}>Close</button>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FAQ, CTAStrip, Footer, BookingModal });