// 3C Detailing — Sections part 2

const { useState: useState2, useEffect: useEffect2 } = React;

/* ─── PRICING MATRIX ─── */
const VEHICLES = [
  { id: 'new',   label: 'New', sub: '(< 2k mi)' },
  { id: 'coupe', label: 'Coupe' },
  { id: 'sedan', label: 'Sedan' },
  { id: 'suvmid', label: 'Hatch / Mid SUV' },
  { id: 'suvfull', label: 'Full SUV / Half-Ton' },
  { id: 'truck', label: '1-Ton / Van' },
];
// pricing rows: each package, prices indexed by vehicle order above
const PRICE_PACKAGES = [
  { id: 'int-or-ext', name: 'Int. or Ext.', cat: 'Detailing', desc: 'Choose interior OR exterior', prices: [215,260,305,350,395,440] },
  { id: 'signature', name: 'Signature',    cat: 'Detailing', desc: 'Full interior + exterior',   prices: [335,380,425,470,515,560] },
  { id: 'gentleman', name: "Gentleman's Spec", cat: 'Detailing', desc: 'Signature show-car finish', prices: [435,480,525,570,615,660] },
  { id: 'seasonal', name: 'Seasonal Coating', cat: 'Ceramic', desc: '~6 months protection',     prices: [800,850,900,950,1000,1100] },
  { id: 'coat-1y', name: '1-Year Coating',   cat: 'Ceramic', desc: '1-step paint correction',  prices: [1000,1100,1200,1300,1400,1500] },
  { id: 'coat-5y', name: '5-Year Coating',   cat: 'Ceramic', desc: '2-step paint correction',  prices: [1500,1500,1700,1900,2100,2300] },
  { id: 'coat-9y', name: '9-Year Coating',   cat: 'Ceramic', desc: '2-step + premium ceramic', prices: [1650,1650,1850,2050,2250,2450] },
  { id: 'ag1051', name: 'AG 1051',          cat: 'Wipe-On Sacrificial Clear Coat',desc: 'Top tier paint protection coating system',  prices: [2000,2000,2200,2400,2600,2800] },
];

function PricingMatrix({ onBook }) {
  const [veh, setVeh] = useState2(2); // sedan default
  return (
    <section className="section pricing" id="pricing" style={{ background: 'var(--bg-elev)' }}>
      <div className="shell">
        <div className="section-head">
          <div>
            <span className="section-num">02 / Pricing</span>
            <h2 className="h-display">Pick your <em>vehicle.</em><br/>See every tier.</h2>
          </div>
          <p className="lede">
            Pricing scales with vehicle size and condition. Select your vehicle below and we'll show the full menu — from a quick express through nine-year ceramic.
          </p>
        </div>
        <div className="veh-picker-label">
          <span className="eyebrow-dim" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span style={{ color: 'var(--accent)', fontSize: 14 }}>↓</span> Tap your vehicle size to update pricing
          </span>
        </div>
        <div className="veh-picker" role="tablist">
          {VEHICLES.map((v, i) => (
            <button key={v.id} className={`veh-pill ${veh === i ? 'active' : ''}`} onClick={() => setVeh(i)}>
              {v.label}{v.sub ? ` ${v.sub}` : ''}
            </button>
          ))}
        </div>
        <table className="matrix">
          <thead>
            <tr>
              <th style={{ width: '50%' }}>Package</th>
              <th>Category</th>
              <th>Price</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {PRICE_PACKAGES.map((p) => (
              <tr className="row-pkg" key={p.name}>
                <td>
                  <span className="pkg-name">{p.name}</span>
                  <span className="pkg-desc">{p.desc}</span>
                </td>
                <td><span className="pkg-cat">{p.cat}</span></td>
                <td><span className="pkg-price">${p.prices[veh].toLocaleString()}</span></td>
                <td><button className="book" onClick={() => onBook({ vehicleId: VEHICLES[veh].id, serviceId: p.id })}>Book</button></td>
              </tr>
            ))}
          </tbody>
        </table>

        {/* Front End PPF — fixed pricing by vehicle size */}
        <div style={{ marginTop: 40, paddingTop: 32, borderTop: '1px solid var(--line)' }}>
          <div className="section-head" style={{ marginBottom: 22 }}>
            <div>
              <span className="section-num">Front End PPF</span>
              <h2 className="h-display" style={{ fontSize: 'clamp(26px,3.4vw,40px)' }}>Protect the <em>strike zone.</em></h2>
            </div>
            <p className="lede">Self-healing paint protection film across the front end — bumper, hood &amp; headlights. 10-year warranty.</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 16 }}>
            {[['Small Vehicle', 2300], ['Medium Vehicle', 2600], ['Large Vehicle', 2900]].map(([label, price]) => (
              <div key={label} style={{ border: '1px solid var(--line)', borderRadius: 12, padding: 26, background: 'var(--bg-card)', display: 'flex', flexDirection: 'column', gap: 10 }}>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--accent)' }}>{label}</span>
                <span style={{ fontFamily: 'var(--serif)', fontSize: 40, fontWeight: 500, letterSpacing: '-.025em', color: 'var(--ink)', lineHeight: 1 }}>${price.toLocaleString()}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="matrix-foot" style={{ marginTop: 28 }}>
          <span>↳ Full-body PPF, add-ons & specialty pricing on quote</span>
          <span>All prices in USD · Taxes additional</span>
        </div>
      </div>
    </section>
  );
}

/* ─── PROCESS ─── */
const STEPS = [
  { n: '01', title: 'Consultation', body: 'We assess your paint, interior, and goals — and recommend the right package, not the most expensive one.' },
  { n: '02', title: 'Prep & Decon', body: 'Hand wash, iron decon, clay treatment. We don\'t skip steps — this is what separates a wash from a detail.' },
  { n: '03', title: 'Execution', body: 'Paint correction by hand and machine. Swirls, oxidation, and defects removed to your spec — single-step to full multi-stage.' },
  { n: '04', title: 'Protect & Deliver', body: 'Sealant, ceramic, or PPF applied in our controlled bay. Final inspection. You drive away looking new.' },
];

function Process() {
  return (
    <section className="section process" id="process">
      <div className="shell">
        <div className="section-head">
          <div>
            <span className="section-num">03 / Process</span>
            <h2 className="h-display">No <em>shortcuts.</em><br/>Just the work.</h2>
          </div>
          <p className="lede">
            Every vehicle gets the same four-step treatment — whether it's a quick interior refresh or a nine-year ceramic build. Time on each stage scales with the package.
          </p>
        </div>
        <div className="process-grid">
          {STEPS.map((s) => (
            <div className="process-step" key={s.n}>
              <div className="step-num">{s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── SHOP PREVIEW (cross-promo on home) ─── */
function ShopPreview() {
  return (
    <section className="section shop-preview" id="shop">
      <div className="shell">
        <div className="section-head">
          <div>
            <span className="section-num">04 / Shop <span style={{ color: '#16a34a', fontWeight: 700 }}>● Now open</span></span>
            <h2 className="h-display">The shop is <em>open.</em></h2>
          </div>
          <p className="lede">
            Gift cards and memberships are live — buy securely online, anytime. Two of the most-asked-about things, now in one place.
          </p>
        </div>

        <div className="shop-preview-grid">
          <a href="shop.html#gift" className="sp-card sp-gift">
            <div className="sp-eyebrow">★ Gift Cards</div>
            <h3 className="sp-title">Give the <em>gift</em><br/>of detail.</h3>
            <div className="sp-meta">
              <div className="sp-range">
                <span className="sp-range-label">Available in</span>
                <span className="sp-range-value">$100 – $500</span>
              </div>
              <div className="sp-range">
                <span className="sp-range-label">Increments</span>
                <span className="sp-range-value">$50</span>
              </div>
            </div>
            <p className="sp-desc">Redeemable for any service in the shop. Never expires.</p>
            <span className="sp-cta">Browse gift cards <Icon.arrow /></span>
          </a>

          <a href="shop.html#memberships" className="sp-card sp-memb">
            <div className="sp-eyebrow">★ Memberships</div>
            <h3 className="sp-title">A year of <em>finish.</em></h3>
            <div className="sp-meta">
              <div className="sp-range">
                <span className="sp-range-label">Monthly from</span>
                <span className="sp-range-value">$185 / mo</span>
              </div>
              <div className="sp-range">
                <span className="sp-range-label">Tiers</span>
                <span className="sp-range-value">Bronze · Silver · Gold</span>
              </div>
            </div>
            <p className="sp-desc">Or a one-time 12-month prepay package — express service every month, locked-in rates.</p>
            <span className="sp-cta">View memberships <Icon.arrow /></span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ─── GALLERY ─── */
function Gallery() {
  const tiles = [
    { cls: 't-1', badge: 'Featured', tone: 'after',  label: 'Porsche 993 · Revival Detail', img: PHOTOS.porsche911 },
    { cls: 't-2', badge: 'Detail',   tone: '',       label: 'Porsche Targa 4S · Shop',           img: PHOTOS.targa },
    { cls: 't-3', badge: 'Interior', tone: '',       label: 'Cabin Reset',                       img: PHOTOS.interior },
    { cls: 't-4', badge: 'After',    tone: 'after',  label: 'Ferrari 360 · Wet Reveal',          img: PHOTOS.ferrari },
    { cls: 't-6', badge: 'Classic',  tone: '',       label: 'Lincoln Continental · Revival',  img: PHOTOS.lincoln },
    { cls: 't-7', badge: 'PPF',      tone: 'after',  label: 'GT3 · Paint Protection Film',       img: PHOTOS.gt3 },
  ];
  return (
    <section className="section gallery" id="gallery">
      <div className="shell">
        <div className="section-head">
          <div>
            <span className="section-num">04 / Work</span>
            <h2 className="h-display">A <em>portfolio</em><br/>of finishes.</h2>
          </div>
          <p className="lede">
            Selections from the shop. Daily drivers, weekend cars, builds, and showpieces. See the full archive on Instagram.
          </p>
        </div>
        <div className="gallery-grid">
          {tiles.map((t, i) => (
            <a key={i} href="https://www.instagram.com/3c_detailing_/" target="_blank" rel="noreferrer" className={`gallery-tile ${t.cls}`}>
              {t.img ? (
                <img className="ph-img" src={t.img} alt={t.label} loading="lazy"/>
              ) : (
                <>
                  <div className="ph-bg"></div>
                  <div className="ph-glint"></div>
                </>
              )}
            </a>
          ))}
        </div>
        <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center', gap: 14 }}>
          <a href="https://www.instagram.com/3c_detailing_/" target="_blank" rel="noreferrer" className="btn btn-ghost">
            <Icon.ig /> @3c_detailing_ · See more on Instagram
          </a>
        </div>
      </div>
    </section>
  );
}

/* ─── TESTIMONIALS ─── */
const REVIEWS = [
  { quote: "Quality of equipment, quality of space, and quality of service. 3C has it all — by far the best in the area. My vehicles are always like new upon completion.", name: "Jerad King", svc: "Google · ★★★★★ · Mar 2024", initial: "J" },
  { quote: "My truck honestly looks better than the day I bought it. They took their time, didn't cut corners — treated it like their own. Top-quality results, fair pricing.", name: "Mike Romano",   svc: "Google · ★★★★★ · Dec 2025", initial: "M" },
  { quote: "Great communication, fair pricing & excellent work! My car had 11 years of wear & tear I truly felt wasn't fixable. It feels like a brand new car — highly recommend.", name: "Rachel Meyers", svc: "Google · ★★★★★ · Feb 2026", initial: "R" },
];

function Testimonials() {
  return (
    <section className="section testimonials" style={{ background: 'var(--bg-elev)' }}>
      <div className="shell">
        <div className="section-head">
          <div>
            <span className="section-num">05 / Reviews</span>
            <h2 className="h-display">Trusted by the<br/><em>Hudson Valley.</em></h2>
          </div>
          <p className="lede">
            Five-star ratings across platforms, but we'd rather you hear it from the people who drove away.
          </p>
        </div>
        <div className="testi-grid">
          {REVIEWS.map((r, i) => (
            <a className="testi" key={i} href="https://www.google.com/search?q=3C+Detailing+Kingston+NY+reviews" target="_blank" rel="noreferrer">
              <div className="testi-stars">★ ★ ★ ★ ★</div>
              <p className="testi-quote">"{r.quote}"</p>
              <div className="testi-by">
                <div className="testi-av">{r.initial}</div>
                <div>
                  <b>{r.name}</b>
                  <span>{r.svc}</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PricingMatrix, Process, Gallery, Testimonials, ShopPreview });