// Homepage — Lifestyle edition
// More editorial, slower, story-led. Inspired by lifestyle-brand structure
// (marquee strip, tabbed discoveries, journey steps, single portrait quote).

const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

/* -------- Hero — Clean / single-line with morphing word -------- */
function Hero({ onBookClick }) {
  const scenes = [
    {
      word: 'weekend',
      label: 'Coastal weekend',
      img: HERO_SLIDES[0].image,
      lede: 'Pack on Friday. Unpack on Sunday. The road in between is yours.',
      meta: [
        ['Destination', 'Cherating, Pahang'],
        ['Drive from KL', '3 hours east'],
        ['Recommended van', 'Anggun 07 motorhome'],
      ],
    },
    {
      word: 'morning',
      label: 'Highland morning',
      img: HERO_SLIDES[1].image,
      lede: 'Kettle on at first light. Tea estates outside the window, mist below.',
      meta: [
        ['Destination', 'Cameron Highlands'],
        ['Drive from KL', '2.5 hours north'],
        ['Recommended van', 'Anggun 10 motorhome'],
      ],
    },
    {
      word: 'detour',
      label: 'Jungle detour',
      img: HERO_SLIDES[2].image,
      lede: 'No itinerary. No hotel check-in. No reason to rush back.',
      meta: [
        ['Destination', 'Taman Negara, Pahang'],
        ['Drive from KL', '4 hours north'],
        ['Recommended van', 'Anggun 14 off-grid'],
      ],
    },
  ];
  const [idx, setIdx] = useStateH(0);
  useEffectH(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % scenes.length), 6000);
    return () => clearInterval(t);
  }, []);
  const s = scenes[idx];

  return (
    <section className="hero-clean">
      {/* slim top bar */}
      <div className="wrap hero-clean-top">
        <div className="hero-clean-top-l">
          <span className="hero-clean-dot"/> VR Motorhome · Est. 2016
        </div>
        <div className="hero-clean-top-c">— A Field Guide to Slow Weekends —</div>
        <div className="hero-clean-top-r">{String(idx+1).padStart(2,'0')} / {String(scenes.length).padStart(2,'0')}</div>
      </div>

      {/* headline */}
      <div className="wrap hero-clean-head">
        <h1 className="hero-clean-h1">
          <span>A slow</span>
          <span className="hero-clean-morph" key={s.word}>
            <em>{s.word}</em>
          </span>
          <span>on wheels.</span>
        </h1>
        <p className="hero-clean-lede" key={'lede-' + idx}>{s.lede}</p>
      </div>

      {/* full photo */}
      <div className="hero-clean-photo">
        {scenes.map((sc, i) => (
          <div key={i} className={`hero-clean-photo-layer ${i === idx ? 'active' : ''}`}
            style={{ backgroundImage:`url(${sc.img})` }}/>
        ))}
        <div className="hero-clean-photo-veil" aria-hidden="true"/>
        <div className="hero-clean-photo-frame"/>

        {/* layered hero subject — the motorhome */}
        <div className="hero-clean-van" aria-hidden="true">
          <div className="hero-clean-van-shadow"/>
          <img className="hero-clean-van-img" src="images/van-cutout.png" alt=""/>
        </div>
      </div>

      {/* footer */}
      <div className="wrap hero-clean-foot">
        <button className="btn btn-primary" onClick={onBookClick}>
          Reserve a date <Icon.Arrow/>
        </button>
        <div className="hero-clean-dots">
          {scenes.map((_, i) => (
            <button key={i}
              className={`hero-clean-dot-btn ${i === idx ? 'active' : ''}`}
              onClick={() => setIdx(i)}
              aria-label={`Scene ${i+1}`}/>
          ))}
        </div>
      </div>
    </section>
  );
}

/* -------- Marquee tagline strip -------- */
function Marquee() {
  const items = ['Wander further', 'Live lighter', 'Sleep wider skies', 'Drive slower', 'Stay longer'];
  const loop = [...items, ...items, ...items, ...items];
  return (
    <section className="marquee-strip">
      <div className="marquee-track">
        {loop.map((t, i) => (
          <span className="marquee-item" key={i}>
            {t}<span className="marquee-star">✦</span>
          </span>
        ))}
      </div>
    </section>
  );
}

/* -------- Our Story — editorial split screen -------- */
function OurStory({ setPage }) {
  return (
    <section className="our-story">
      <div className="our-story-grid">
        <div className="our-story-photo" style={{backgroundImage:`url(images/service-rental.png)`}}>
          <div className="our-story-photo-tag">
            <span>Anggun 07</span>
            <span>— flagship build, 2024</span>
          </div>
        </div>
        <div className="our-story-body">
          <div className="our-story-body-inner">
            <span className="eyebrow our-story-eyebrow">Our Story</span>
            <h2 className="our-story-h">
              Ten years. Eighty vans.<br/>
              <em>One philosophy.</em>
            </h2>
            <p className="our-story-copy">
              What started as one Toyota Hilux conversion in a small Klang workshop has grown into Malaysia's most-trusted motorhome maker — quietly, deliberately, one van at a time. We've never wanted to be the biggest; we've only ever wanted the next van out to feel a little better than the last.
            </p>
            <div className="our-story-stats">
              <div><strong><CountUp to={2016} from={2010}/></strong><span>founded</span></div>
              <div><strong><CountUp to={80} suffix="+"/></strong><span>builds</span></div>
              <div><strong><CountUp to={400} suffix="+"/></strong><span>rentals</span></div>
            </div>
            <button className="btn btn-light our-story-cta" onClick={() => setPage('about')}>
              Read our story <Icon.Arrow/>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------- Why Choose Us — certification stamps -------- */
function WhyChooseUs() {
  const reasons = [
    {
      n: '01',
      tag: 'Origin',
      title: 'Made in Malaysia',
      copy: 'Designed, fabricated and finished in our Klang workshop. Built by hands that have driven the same routes you will.',
      accent: 'Klang · Selangor',
      rotate: '-4deg',
      icon: (
        <g transform="translate(90,82)" fill="currentColor">
          {/* Map pin — location marker */}
          <path d="M 0 -22 C -10 -22 -17 -14 -17 -6 C -17 4 -6 16 0 22 C 6 16 17 4 17 -6 C 17 -14 10 -22 0 -22 Z"/>
          {/* inner cut-out */}
          <circle cx="0" cy="-7" r="5.5" fill="#ffffff"/>
          {/* tiny dot inside (Klang mark) */}
          <circle cx="0" cy="-7" r="2.4" fill="currentColor"/>
        </g>
      ),
    },
    {
      n: '02',
      tag: 'Craft',
      title: 'Hand-built quality',
      copy: 'Cabinet-makers and engineers in-house. No production line, no shortcuts — the cup-holder is where you reach for it.',
      accent: '80+ bespoke builds',
      rotate: '3deg',
      icon: (
        <g transform="translate(90,84)" fill="currentColor">
          {/* Open-end wrench at -28deg */}
          <g transform="rotate(-28)">
            {/* handle */}
            <rect x="-22" y="-3" width="28" height="6" rx="1.4"/>
            {/* open-end head — C shape */}
            <path d="M 6 -10 L 14 -10 L 20 -4 L 20 4 L 14 10 L 6 10 L 6 4 L 12 2 L 14 0 L 12 -2 L 6 -4 Z"/>
          </g>
          {/* spark — small decorative dot for "craft" */}
          <circle cx="-16" cy="-12" r="1.8"/>
          <circle cx="-12" cy="-16" r="1.2" opacity="0.6"/>
        </g>
      ),
    },
    {
      n: '03',
      tag: 'Support',
      title: 'On call, on Sundays',
      copy: 'Real roadside dispatch from real people. We answer the phone in monsoons, on public holidays, after midnight.',
      accent: '24 / 7 · ten years on',
      rotate: '-2deg',
      icon: (
        <g transform="translate(90,86)" fill="currentColor">
          {/* Headset arc band */}
          <path d="M -18 2 Q -18 -16 0 -16 Q 18 -16 18 2"
            fill="none" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round"/>
          {/* Left ear cup */}
          <rect x="-22" y="0" width="8" height="14" rx="2.2"/>
          {/* Right ear cup */}
          <rect x="14" y="0" width="8" height="14" rx="2.2"/>
          {/* Mic boom */}
          <path d="M 18 10 Q 20 16 14 18 L 6 18"
            fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round"/>
          {/* Mic tip */}
          <ellipse cx="4" cy="18" rx="3.2" ry="2.2"/>
        </g>
      ),
    },
  ];
  return (
    <section className="wcu3">
      <div className="wrap">
        <header className="wcu3-head">
          <span className="eyebrow wcu3-eyebrow">Why Choose Us</span>
          <h2 className="wcu3-h">
            Three reasons,<br/>
            <em>certified.</em>
          </h2>
          <p className="wcu3-sub">Stamped, signed, and inspected on every van — for ten quiet years.</p>
        </header>

        <div className="wcu3-grid">
          {reasons.map(r => (
            <article key={r.n} className="wcu3-item">
              <div className="wcu3-stamp" style={{'--rot': r.rotate}}>
                <svg className="wcu3-stamp-svg" viewBox="0 0 180 180" aria-hidden="true">
                  <defs>
                    <path id={`wcu3-arc-top-${r.n}`} d="M 90,90 m -68,0 a 68,68 0 0 1 136,0"/>
                    <path id={`wcu3-arc-bot-${r.n}`} d="M 90,90 m -68,0 a 68,68 0 0 0 136,0"/>
                  </defs>
                  <circle cx="90" cy="90" r="84" fill="none" stroke="currentColor" strokeWidth="1.4"/>
                  <circle cx="90" cy="90" r="74" fill="none" stroke="currentColor" strokeWidth="1" strokeDasharray="3 4"/>
                  <text className="wcu3-arc-text" textAnchor="middle">
                    <textPath href={`#wcu3-arc-top-${r.n}`} startOffset="50%">
                      VR MOTORHOME · {r.tag.toUpperCase()}
                    </textPath>
                  </text>
                  <text className="wcu3-arc-text" textAnchor="middle">
                    <textPath href={`#wcu3-arc-bot-${r.n}`} startOffset="50%">
                      APPROVED · KLANG · MY
                    </textPath>
                  </text>
                  {/* center mark */}
                  <line x1="40" y1="118" x2="62" y2="118" stroke="currentColor" strokeWidth="1"/>
                  <line x1="118" y1="118" x2="140" y2="118" stroke="currentColor" strokeWidth="1"/>
                  {/* themed icon above the dashes */}
                  {r.icon}
                  {/* number below dashes */}
                  <text x="90" y="138" textAnchor="middle" className="wcu3-stamp-num">{r.n}</text>
                </svg>
              </div>
              <h3 className="wcu3-title">{r.title}</h3>
              <p className="wcu3-copy">{r.copy}</p>
              <span className="wcu3-accent">{r.accent}</span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* -------- Manifesto / Editorial intro -------- */
function Manifesto() {
  return (
    <section className="manifesto">
      <div className="wrap manifesto-inner">
        <div className="manifesto-mark" aria-hidden="true">“</div>
        <div className="manifesto-content">
          <span className="eyebrow">A different kind of weekend</span>
          <h2 className="manifesto-h">
            A house <em>on wheels.</em><br/>
            A weekend, redefined.
          </h2>
          <p>For ten years we've quietly hand-built motorhomes in a Klang workshop — not for collectors, not for the algorithm, but for families who'd rather wake up by a river than in a hotel room. Every van leaves with the same idea baked in: <em>the road should feel like home, and home should travel well.</em></p>
          <div className="manifesto-sig">
            <span className="manifesto-sig-line" aria-hidden="true"/>
            <span className="manifesto-sig-text">VR Motorhome · Est. 2016 · Klang, Selangor</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------- Main Services — Editorial zigzag rows -------- */
function MainServices({ setPage }) {
  const services = [
    {
      n: '01',
      title: 'Modification',
      tag: 'Build',
      go: 'modification',
      copy: 'Customize from chassis to cabinetry. Every panel, plumbing, electrical and finish is detailed and built in our Klang workshop — no outsourcing, no surprises.',
      features: ['90-minute studio consult', 'Walk the workshop floor', '12 — 16 week build'],
      img: 'images/service-modification.png',
      meta: 'From RM 95,000',
    },
    {
      n: '02',
      title: 'Rental',
      tag: 'Drive',
      go: 'rental',
      copy: 'Six fully-equipped motorhomes and campervans, road-ready Friday morning. Bedding, kitchen, RFID and offline maps included. Pick a date, we handle the rest.',
      features: ['Pickup in Klang or KLIA', 'No mileage cap in Peninsula', 'Free cancel until D-14'],
      img: 'images/service-rental.png',
      meta: 'From RM 320 / night',
    },
    {
      n: '03',
      title: 'Pre-order',
      tag: 'Reserve',
      go: 'motorhomes',
      copy: 'Stay ahead of the next season. Reserve a build slot for our newest layouts, lock in your spec, and move up the queue with a refundable deposit.',
      features: ['6 layouts in rotation', 'Refundable deposit', 'Quarterly intakes'],
      img: 'images/service-preorder.png',
      meta: 'Q1 / Q3 / Q4 intake',
    },
    {
      n: '04',
      title: 'Accessories',
      tag: 'Outfit',
      go: 'about',
      copy: 'Personalize your journey with curated accessories — awnings, roof racks, water filtration, solar add-ons. Tested on the same roads you\'ll drive.',
      features: ['Awnings & overlanding gear', 'Lithium / solar upgrades', 'Workshop fitting available'],
      img: 'images/service-accessories.png',
      meta: 'Walk-in fitting · Mon–Sat',
    },
  ];
  return (
    <section className="services-editorial">
      <div className="wrap">
        <div className="services-head">
          <div>
            <span className="eyebrow">Our main services</span>
            <h2>Four ways<br/>to get <em>on the road.</em></h2>
          </div>
          <p>Build, rent, pre-order or accessorise — all under one roof in a small Klang workshop, in-house, since 2016.</p>
        </div>

        <div className="services-rows">
          {services.map((s, i) => (
            <article key={s.n}
              className={`service-row ${i % 2 === 0 ? 'photo-left' : 'photo-right'}`}
              onClick={() => setPage(s.go)}
              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setPage(s.go); } }}
              role="button"
              tabIndex="0"
              aria-label={`Read more about ${s.title}`}>
              <div className="service-photo">
                <div className="service-photo-img" style={{backgroundImage:`url(${s.img})`}}/>
                <span className="service-photo-tag">{s.tag}</span>
                <span className="service-photo-num">№ {s.n}</span>
              </div>
              <div className="service-body">
                <span className="service-eyebrow">{s.tag} · service {s.n}</span>
                <h3 className="service-title">{s.title}</h3>
                <p className="service-copy">{s.copy}</p>
                <ul className="service-features">
                  {s.features.map((f, j) => (
                    <li key={j}>
                      <span className="service-feature-tick" aria-hidden="true">
                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                          <path d="M2 6 L5 9 L10 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                        </svg>
                      </span>
                      {f}
                    </li>
                  ))}
                </ul>
                <div className="service-foot">
                  <span className="service-meta">{s.meta}</span>
                  <span className="service-link" aria-hidden="true">
                    Read more <Icon.Arrow/>
                  </span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* -------- Three pillars (replaces commercial "Why") -------- */
function Pillars() {
  const items = [
    { kicker: '01', title: 'Hand-built in Klang', copy: 'Every panel, every cabinet, every wire crimp leaves our workshop. No sub-contractors. No surprises.' },
    { kicker: '02', title: 'Quietly considered', copy: 'A decade of layouts, refined by 400+ real trips. The cup holder is where you reach for it.' },
    { kicker: '03', title: 'Friend on the road', copy: 'Real humans answer the phone. We\'ve dispatched help on Sundays, in monsoons, after midnight.' },
  ];
  return (
    <section className="pillars">
      <div className="wrap pillars-grid">
        {items.map(p => (
          <div key={p.kicker} className="pillar">
            <span className="pillar-kicker">{p.kicker}</span>
            <h3 className="pillar-title">{p.title}</h3>
            <p className="pillar-copy">{p.copy}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* -------- Companions — Cinema spotlight + thumbnail rail -------- */
function Companions({ setPage }) {
  const vans = FLEET.slice(0, 5);
  const [active, setActive] = useStateH(0);
  const [paused, setPaused] = useStateH(false);
  useEffectH(() => {
    if (paused) return;
    const t = setInterval(() => setActive(i => (i + 1) % vans.length), 5500);
    return () => clearInterval(t);
  }, [paused, vans.length]);
  const v = vans[active];
  return (
    <section className="companions-v2"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}>
      <div className="wrap">
        <div className="section-head companions-v2-head">
          <div>
            <span className="eyebrow" style={{color:'var(--tan)'}}>Your companions</span>
            <h2>Six vans,<br/><em>one philosophy.</em></h2>
          </div>
          <p>Each van has a name and a personality. Pick the one that matches your kind of slow.</p>
        </div>

        <div className="companions-stage">
          {/* huge background number */}
          <div className="companions-bignum" key={active}>0{active+1}</div>

          {/* spotlight cinema */}
          <div className="companions-spot">
            {vans.map((vn, i) => (
              <div key={vn.id} className={`companions-spot-layer ${i === active ? 'active' : ''}`}
                style={{backgroundImage:`url(${vn.image})`}}/>
            ))}
            <div className="companions-spot-grain"/>
            <div className="companions-spot-meta">
              <div className="companions-spot-tag">
                {v.badge && <span className="companions-badge">{v.badge}</span>}
                <span className="companions-tag-line">{v.tag} · {v.sub}</span>
              </div>
              <h3 className="companions-spot-name" key={'name-' + active}>{v.name}</h3>
              <div className="companions-spot-row">
                <div className="companions-specs">
                  <div><Icon.Bed/><span>Sleeps {v.sleeps}</span></div>
                  <div><Icon.Seat/><span>{v.seats} seats</span></div>
                  <div><Icon.Ruler/><span>{v.length}</span></div>
                </div>
                <div className="companions-price-row">
                  <div className="companions-price">
                    <small>from</small>
                    <strong>RM {v.price}</strong>
                    <small>/ night</small>
                  </div>
                  <button className="btn btn-light companions-cta" onClick={() => setPage('rental')}>
                    See this van <Icon.Arrow/>
                  </button>
                </div>
              </div>
            </div>
          </div>

          {/* thumbnail rail with progress bars */}
          <div className="companions-rail">
            {vans.map((vn, i) => (
              <button key={vn.id}
                className={`companions-thumb ${i === active ? 'active' : ''}`}
                onClick={() => setActive(i)}>
                <div className="companions-thumb-img" style={{backgroundImage:`url(${vn.image})`}}/>
                <div className="companions-thumb-body">
                  <span className="companions-thumb-num">0{i+1}</span>
                  <span className="companions-thumb-name">{vn.name.replace(/^[A-Za-z]+ (Motorhome|Campervan) — /, '')}</span>
                  <span className="companions-thumb-price">RM {vn.price}<small> /nt</small></span>
                </div>
                <div className="companions-thumb-progress">
                  <div className={`companions-thumb-progress-bar ${i === active && !paused ? 'play' : ''}`}/>
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------- Routes — kept, lighter copy -------- */
function Routes() {
  return (
    <section className="routes">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">Where to point the van</span>
            <h2>Three roads,<br/><em>three Malaysias.</em></h2>
          </div>
          <p>Loved by our crew, road-tested by 400+ renters. We'll send the offline maps and food stops the night before pickup.</p>
        </div>
        <div className="route-grid">
          {ROUTES.map(r => (
            <div key={r.title} className="route-card">
              <div className="route-img" style={{backgroundImage:`url(${r.image})`}}/>
              <div className="route-body">
                <div className="route-eyebrow">{r.eyebrow}</div>
                <div className="route-title">{r.title}</div>
                <div className="route-meta">
                  {r.meta.map((m, i) => <span key={i}>{m}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* -------- Story / Portrait quote (single big testimonial) -------- */
function StoryQuote() {
  return (
    <section className="story-quote">
      <div className="wrap story-quote-grid">
        <div className="story-quote-img"
          style={{backgroundImage:`url(https://images.unsplash.com/photo-1502685104226-ee32379fefbe?w=1200&q=80&auto=format&fit=crop)`}}>
          <div className="story-quote-tag">A customer story</div>
        </div>
        <div className="story-quote-body">
          <span className="eyebrow">What it actually feels like</span>
          <blockquote className="story-quote-text">
            <span className="story-quote-mark">“</span>
            We thought we were renting a van. We came back having renamed the dog, finished a book, and decided to do this every school holiday for the rest of our lives.
          </blockquote>
          <div className="story-quote-attr">
            <div>
              <strong>Aishah & Daniel</strong>
              <span>Petaling Jaya · Anggun 07 · 6 nights East Coast</span>
            </div>
          </div>
          <div className="story-quote-stats">
            <div><strong><CountUp to={4.9} decimals={1}/> / 5</strong><span>average rating</span></div>
            <div><strong><CountUp to={400} suffix="+"/></strong><span>weekends sent off</span></div>
            <div><strong><CountUp to={10} suffix=" yrs"/></strong><span>quietly building</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------- Visit Workshop — final CTA paired with photo -------- */
function VisitWorkshop({ setPage }) {
  return (
    <section className="visit-workshop">
      <div className="wrap visit-grid">
        <div className="visit-body">
          <span className="eyebrow">Come say hi</span>
          <h2>Drop by the workshop.<br/><em>Kopi's on us.</em></h2>
          <p>We're a small team in Klang — half mechanics, half cabinet-makers, all sambal enthusiasts. Walk in any weekday, climb into the vans, and bring your trip ideas.</p>
          <div className="visit-meta">
            <div>
              <span className="visit-meta-label">Workshop</span>
              <strong>Lot 5, Klang · Selangor</strong>
            </div>
            <div>
              <span className="visit-meta-label">Open</span>
              <strong>Mon–Sat · 9am – 6pm</strong>
            </div>
          </div>
          <div className="visit-cta-row">
            <button className="btn btn-primary" onClick={() => setPage('rental')}>Plan a weekend <Icon.Arrow/></button>
            <button className="btn btn-ghost">Get directions</button>
          </div>
        </div>
        <div className="visit-img"
          style={{backgroundImage:`url(https://www.newpages.com.my/customer/images/16883768208f5830cbdf28d88ec636060124cf8266.jpg)`}}/>
      </div>
    </section>
  );
}

/* -------- FAQ — practical questions, accordion -------- */
function FAQ() {
  const items = [
    {
      q: 'What driving license do I need?',
      a: 'A standard Malaysian Class D license is enough for our Anggun 07 motorhome (under 3.5T). No special van or commercial license required. Minimum age 23 with 2+ years driving experience.'
    },
    {
      q: 'What\'s included in the rental?',
      a: 'Bedding, kitchenware, gas, RFID / Touch \'n Go credit, offline maps, basic recovery kit, and 24/7 roadside support. Just bring clothes, food, and your sense of adventure.'
    },
    {
      q: 'Where do I pick up and drop off?',
      a: 'Standard pickup is from our Klang HQ — free, with a 30-minute orientation walkthrough. Delivery to KLIA, KLIA2 or KL Sentral for a small fee. Pickup from 09:00, return by 18:00.'
    },
    {
      q: 'Is there a mileage limit?',
      a: 'No mileage cap within Peninsular Malaysia. East Malaysia trips need advance arrangement (ferry logistics). Fuel is on you — return with the same level you picked up.'
    },
    {
      q: 'What if I need to cancel?',
      a: 'Full refund up to 14 days before pickup. 50% refund 7–14 days out. Within 7 days we\'ll work with you to reschedule rather than cancel — life happens.'
    },
    {
      q: 'What if something breaks down on the road?',
      a: '24/7 roadside support — real humans on the phone, real callbacks within 30 minutes. We\'ve dispatched help on Sundays, in monsoons, after midnight. Ten years and counting.'
    },
  ];
  const [open, setOpen] = useStateH(0);
  return (
    <section className="faq">
      <div className="wrap faq-inner">
        <header className="faq-head">
          <span className="eyebrow">Practical things</span>
          <h2 className="faq-h">The short answers,<br/><em>up front.</em></h2>
        </header>
        <div className="faq-list">
          {items.map((item, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q"
                onClick={() => setOpen(open === i ? -1 : i)}
                aria-expanded={open === i}>
                <span className="faq-q-text">{item.q}</span>
                <span className="faq-toggle" aria-hidden="true">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M2 7 H12 M7 2 V12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
                  </svg>
                </span>
              </button>
              <div className="faq-a"><p>{item.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* -------- Page -------- */
function HomePage({ setPage, bookingState, setBookingState }) {
  const onSubmit = (state) => {
    setBookingState(state);
    setPage('rental');
  };
  return (
    <div className="page">
      <Hero onBookClick={() => setPage('rental')}/>
      <div className="wrap">
        <BookingStrip onSubmit={onSubmit} initial={bookingState}/>
      </div>
      <Manifesto/>
      <MainServices setPage={setPage}/>
      <OurStory setPage={setPage}/>
      <WhyChooseUs/>
      <StoryQuote/>
      <FAQ/>
      <VisitWorkshop setPage={setPage}/>
    </div>
  );
}

window.HomePage = HomePage;