// 3C Detailing — Sections

const { useState, useEffect, useRef } = React;

/* ─── Inline icons ─── */
const Icon = {
  arrow: (p) => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}><path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>,
  plus: (p) => <svg width="12" height="12" viewBox="0 0 12 12" fill="none" {...p}><path d="M6 1v10M1 6h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>,
  star: (p) => <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" {...p}><path d="M7 0l1.7 4.6 4.8.4-3.6 3 1.2 4.7L7 10.5 1.9 12.7l1.2-4.7L-.5 5l4.8-.4z" /></svg>,
  x: (p) => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>,
  ig: (p) => <svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...p}><rect x="1.5" y="1.5" width="13" height="13" rx="3.5" stroke="currentColor" strokeWidth="1.2" /><circle cx="8" cy="8" r="3" stroke="currentColor" strokeWidth="1.2" /><circle cx="11.5" cy="4.5" r=".8" fill="currentColor" /></svg>,
  phone: (p) => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}><path d="M3 1.5h2l1 3-1.5 1c.7 1.7 2.3 3.3 4 4l1-1.5 3 1v2c0 .55-.45 1-1 1-5.52 0-10-4.48-10-10 0-.55.45-1 1-1z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" /></svg>,
  sun: (p) => <svg width="15" height="15" viewBox="0 0 15 15" fill="none" {...p}><circle cx="7.5" cy="7.5" r="2.8" stroke="currentColor" strokeWidth="1.3" /><path d="M7.5 1v1.6M7.5 12.4V14M1 7.5h1.6M12.4 7.5H14M2.9 2.9l1.1 1.1M11 11l1.1 1.1M2.9 12.1l1.1-1.1M11 4l1.1-1.1" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" /></svg>,
  moon: (p) => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}><path d="M12 8.5A5 5 0 0 1 5.5 2a1 1 0 0 0-1.2-1.2A6.5 6.5 0 1 0 13.2 9.7 1 1 0 0 0 12 8.5z" fill="currentColor" /></svg>
};

/* ─── Site photos ─ from 3C Detailing's Instagram archive ─── */
const PHOTOS = {
  gt3:      'photos/gt3-ppf.jpg',
  ferrari:  'photos/ferrari-360.jpg',
  interior: 'photos/interior.jpg',
  lincoln:  'photos/lincoln.jpg',
  porsche911: 'photos/911-silver.jpg',
  targa:    'photos/targa.jpg',
};

/* ─── NAV ─── */
function Nav({ onBook }) {
  const [scrolled, setScrolled] = useState(false);
  const [active, setActive] = useState('top');

  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 40);
      // Scroll-spy: find the section nearest to the top of the viewport.
      const sections = ['top', 'services', 'pricing', 'process', 'shop', 'faq'];
      const y = window.scrollY + 200;
      let current = 'top';
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) current = id;
      }
      setActive(current);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const link = (href, label, id) =>
    <a href={href} className={active === id ? 'active' : ''}>{label}</a>;

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="shell nav-inner">
        <a href="#top" className="nav-brand">
          <span className="mark">3C</span>
          <span>Detailing</span>
        </a>
        <div className="nav-links">
          <a href="mission.html">Mission</a>
          {link('#services','Services','services')}
          {link('#pricing','Pricing','pricing')}
          {link('#process','Process','process')}
          {link('#shop','Shop','shop')}
          {link('#faq','FAQ','faq')}
        </div>
        <div className="nav-cta">
          <a href="tel:8459015573" className="caps nav-phone" style={{ color: 'var(--ink-dim)', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <Icon.phone /> (845) 901-5573
          </a>
          <button className="btn btn-primary" onClick={onBook}>Book Now <Icon.arrow className="btn-arrow" /></button>
        </div>
      </div>
    </nav>);

}

/* ─── HERO ─── */
function Hero({ onBook }) {
  return (
    <section className="hero" id="top">
      <div className="hero-bg"></div>
      <div className="hero-grain"></div>
      <div className="hero-marquee">Paint Correction · Ceramic Coatings · Detailing ·</div>
      <div className="shell hero-inner">
        <div className="hero-meta">
          <span className="eyebrow">★ Kingston, NY · Est. 2020</span>
          <h1 className="hero-title h-display">
            Pristine,<br />on <em>principle.</em>
          </h1>
          <p className="hero-sub">
            Concierge-level paint correction, ceramic coatings, and full detailing — performed by hand at our Kingston shop. Your vehicle, restored to better than new.
          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary" onClick={onBook}>Reserve a slot <Icon.arrow className="btn-arrow" /></button>
            <a href="#services" className="btn btn-ghost">Explore services</a>
          </div>
        </div>
        <div className="hero-image">
          <img src={PHOTOS.gt3} alt="Porsche GT3 with PPF being detailed at 3C Detailing" loading="eager" />
          <div className="hero-image-veil"></div>
        </div>
      </div>
      <div className="hero-ticker">
        <div className="hero-ticker-track">
          {Array(2).fill(0).map((_, i) =>
          <React.Fragment key={i}>
              <span>Mon–Sat · 9am – 6pm</span>
              <span>454 NY-28, Kingston</span>
              <span>5-Star Reviewed</span>
              <span>Ceramic Pro Certified</span>
              <span>Paint Protection Film</span>
              <span>By Appointment</span>
              <span>+1 (845) 901-5573</span>
            </React.Fragment>
          )}
        </div>
      </div>
    </section>);

}

/* ─── Feature banner: 12-month package ─── */
function FeatureBanner({ onBook }) {
  return (
    <section className="feature-banner">
      <div className="shell feature-banner-inner">
        <span className="feature-tag"><span className="dot"></span>New · 2026</span>
        <h3 className="feature-headline">
          The <span>12-Month Membership</span> — one payment, express service every month.
        </h3>
      </div>
    </section>);

}

/* ─── SERVICES ─── */
const SERVICE_CATEGORIES = [
{
  id: 'detail',
  label: 'Detailing',
  tiers: [
  { id: 'int-or-ext', name: 'Interior or Exterior', tag: 'Foundation', from: 215, items: ['Choose interior OR exterior', 'Full hand wash & decon', 'Wheels, tires & glass', 'Vacuum + wipe down'] },
  { id: 'signature', name: 'Signature', tag: 'Most Popular', featured: true, from: 335, items: ['Full interior + exterior', 'Clay & spray sealant', 'Door jambs detailed', 'Tire dressing & polish'] },
  { id: 'gentleman', name: "Gentleman's Spec", tag: 'Flagship', from: 435, items: ['Show-car finish', 'Paint deep cleanse', 'Full interior reset', 'Hand-applied sealant'] }]

},
{
  id: 'coatings',
  label: 'Ceramic Coatings',
  tiers: [
  { id: 'seasonal', name: 'Seasonal Coating', tag: 'S.C.C.', from: 800, items: ['Up to 6 mo. protection', 'Hydrophobic finish', 'Includes prep wash', 'Great for daily drivers'] },
  { id: 'coat-1y', name: '1-Year Coating', tag: '1Y · 1-Step Correction', featured: true, from: 1000, items: ['1-step paint correction', 'Gloss + slickness boost', 'Lasting hydrophobics', 'Annual maintenance plan'] },
  { id: 'coat-5y', name: '5-Year Coating', tag: '5Y · 2-Step Correction', from: 1500, items: ['2-step paint correction', '5 years of protection', 'Show-finish prep', 'Annual maintenance plan'] },
  { id: 'ag1051', name: '9-Year + AG 1051', tag: 'Wipe-On Sacrificial Clear Coat', from: 1650, items: ['Up to 9 years protection', 'AG 1051 option available', 'Multi-layer system', 'Lifetime maintenance available'] }]

},
{
  id: 'ppf',
  label: 'Paint Protection',
  tiers: [
  { id: 'ppf-sm', name: 'Front End PPF — Small Vehicle', tag: 'PPF', from: 2300, items: ['Bumper · partial hood', 'Headlights', 'Self-healing film', '10-year warranty'] },
  { id: 'ppf-md', name: 'Front End PPF — Medium Vehicle', tag: 'PPF', featured: true, from: 2600, items: ['Full bumper · partial hood', 'Headlights · fenders', 'Self-healing film', '10-year warranty'] },
  { id: 'ppf-lg', name: 'Front End PPF — Large Vehicle', tag: 'PPF', from: 2900, items: ['Larger trucks & SUVs', 'Full coverage front clip', 'Self-healing film', '10-year warranty'] },
  { id: 'ppf-custom', name: 'Custom Coverage', tag: 'By Quote', from: null, items: ['Full body PPF', 'Track packages', 'Sections & accents', 'Consultation included'] }]

},
{
  id: 'addons',
  label: 'Add-Ons & Specialty',
  tiers: [
  { id: 'headlights', name: 'Headlight Restoration / Protection', tag: 'Add-on', from: 100, items: ['Cuts haze & oxidation', 'Restores clarity', 'Sealed for longevity'] },
  { id: 'odor', name: 'Odor Bomb', tag: 'Add-on', from: 85, items: ['Whole-cabin treatment', 'Eliminates smoke & pet', 'Ozone-grade results'] },
  { id: 'clay', name: 'Clay Bar', tag: 'Add-on', from: 100, items: ['Removes bonded contaminants', 'Preps paint for sealant', 'Glass-smooth finish'] },
  { id: 'specialty', name: 'Specialty Services', tag: '$175–$225/hr', from: null, items: ['Dent repair', 'Custom requests', 'Revival projects'] }]

}];


function Services({ onBook }) {
  const [active, setActive] = useState('detail');
  const cat = SERVICE_CATEGORIES.find((c) => c.id === active);
  return (
    <section className="section services" id="services">
      <div className="shell">
        <div className="section-head">
          <div>
            <span className="section-num">01 / Services</span>
            <h2 className="h-display">A service for <em>every</em> condition.</h2>
          </div>
          <p className="lede">
            From a same-day refresh to multi-year ceramic protection, every package is hand-performed at our Kingston shop. Pick a category to explore.
          </p>
        </div>
        <div className="svc-tabs" role="tablist">
          {SERVICE_CATEGORIES.map((c, i) =>
          <button key={c.id} className={`svc-tab ${active === c.id ? 'active' : ''}`} onClick={() => setActive(c.id)}>
              <span className="num">0{i + 1}</span>{c.label}
            </button>
          )}
        </div>
        <div className="svc-grid">
          {cat.tiers.map((t) =>
          <div
            key={t.name}
            className={`svc-card ${t.featured ? 'featured' : ''}`}
            role="button"
            tabIndex={0}
            onClick={() => onBook({ serviceId: t.id })}
            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onBook({ serviceId: t.id }); } }}
          >
              <div className="svc-card-head">
                <span className="svc-card-tag">{t.tag}</span>
                <div className="svc-card-name">{t.name}</div>
              </div>
              <ul>{t.items.map((it) => <li key={it}>{it}</li>)}</ul>
              <div className="svc-card-foot">
                <div className="svc-card-price">
                  {t.from ? `$${t.from}` : 'Quote'}
                  <small>{t.from ? 'Starting' : 'On request'}</small>
                </div>
                <button className="pick" onClick={(e) => { e.stopPropagation(); onBook({ serviceId: t.id }); }}>Book <Icon.arrow /></button>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { Nav, Hero, FeatureBanner, Services, Icon, PHOTOS });