/* How It Works, Why Choose, Services, About, Testimonials, FAQ, Final CTA */

const HowItWorks = () => {
  const steps = [
    { n: '01', title: 'Choose your vehicle & service', body: 'Select your vehicle type and the auto spa service you need. Pricing updates live.', icon: 'sparkle' },
    { n: '02', title: 'Get an instant quote', body: 'See your price instantly and pick a date and time that fits your schedule.', icon: 'calendar' },
    { n: '03', title: 'We come to you', body: 'Our mobile team arrives at your location and leaves your vehicle looking its best.', icon: 'truck' },
  ];
  return (
    <section id="how" className="section how-section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">How it works</span>
          <h2>Three steps. <span className="gold-text">Zero hassle.</span></h2>
          <p>From browsing to a sparkling vehicle in your driveway — built to be the fastest, most transparent booking in LA.</p>
        </div>
        <ol className="how-flow">
          <div className="how-flow-line" aria-hidden></div>
          {steps.map((s, i) => (
            <li key={s.n} className="how-step" style={{'--i': i}}>
              <div className="how-step-node">
                <span className="how-step-num mono">{s.n}</span>
                <div className="how-step-icon"><Icon name={s.icon} size={28}/></div>
                <span className="how-step-pulse" aria-hidden></span>
              </div>
              <div className="how-step-body">
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
};

const WhyChoose = () => {
  const items = [
    { icon: 'truck',   title: 'Mobile convenience',    body: 'No lines, no waiting, no driving to a car wash. We come to you.' },
    { icon: 'sparkle', title: 'Premium results',       body: 'Professional care for both the interior and exterior of your vehicle.' },
    { icon: 'leaf',    title: 'Quality products',      body: 'Safe, high-quality products designed to protect your vehicle\u2019s finish.' },
    { icon: 'clock',   title: 'Easy online booking',   body: 'Quote, schedule, and pay online in minutes — done from your phone.' },
    { icon: 'shield',  title: 'Reliable service',      body: 'Our team is trained, punctual, and focused on every detail.' },
    { icon: 'card',    title: 'Secure payments',       body: 'Pay confidently online with Stripe — or cash on service for 10% off.' },
  ];
  return (
    <section className="section why-section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Why Prestige</span>
          <h2>The luxury car wash experience —<br/><span className="gold-text">on your schedule.</span></h2>
        </div>
        <div className="why-grid">
          {items.map((it,i) => (
            <div key={i} className="why-card">
              <div className="why-icon"><Icon name={it.icon} size={22}/></div>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Services = ({ onSelectService }) => {
  const cards = [
    { id:'regular',   title:'Regular Wash',        tag:'Essential',  body:'Our most common, basic wash — perfect for keeping your vehicle clean. Wheels, tires, windows, body.' },
    { id:'detailing', title:'Detailing',           tag:'Premium',    body:'Deep interior or exterior cleaning using specialized chemical products for a thorough, professional finish.' },
    { id:'luxury',    title:'Luxury Wash',         tag:'Signature',  body:'Premium service designed for high-end vehicles, with the utmost care and attention to every detail.' },
    { id:'headlight', title:'Headlight Polishing', tag:'Specialty',  body:'We clean and restore the original shine of your headlights, improving both visibility and appearance.' },
  ];
  return (
    <section id="services" className="section services-section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Services</span>
          <h2>Four services. <span className="gold-text">One standard.</span></h2>
          <p>From a quick regular wash to our signature luxury treatment — every service is performed by a trained Prestige technician using premium-grade products.</p>
        </div>
        <div className="services-grid">
          {cards.map((c,i) => (
            <article key={c.id} className={`service-card ${i === 2 ? 'is-feature' : ''}`}>
              <div className="service-card-img ph ph-img" data-img={c.id}>
                [ {c.title.toUpperCase()} REFERENCE PHOTO ]
              </div>
              <div className="service-card-body">
                <div className="service-card-tag mono">{c.tag}</div>
                <h3>{c.title}</h3>
                <p>{c.body}</p>
                <button className="btn btn-ghost service-card-btn" onClick={()=>onSelectService(c.id)}>
                  Quote this service <Icon name="arrow" size={14}/>
                </button>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const About = () => (
  <section id="about" className="section about-section">
    <div className="container">
      <div className="about-grid">
        <div className="about-img-stack">
          <div className="ph ph-img about-img-1">[ FOUNDER · MOBILE SETUP ]</div>
          <div className="ph ph-img about-img-2">[ DETAIL WORK CLOSE-UP ]</div>
        </div>
        <div className="about-copy">
          <span className="eyebrow">About Prestige</span>
          <h2>15 years of obsessing<br/>over <span className="gold-text">every detail.</span></h2>
          <p>
            Prestige Auto Spa Mobile was created to make premium car care more
            convenient. We believe your time is valuable, which is why we bring
            professional auto spa services directly to your home, office, or
            preferred location.
          </p>
          <p>
            With attention to detail, top-grade products, and a team that has
            cared for everything from daily drivers to Lamborghinis, we help your
            vehicle look clean, polished, and well cared for — without
            interrupting your day.
          </p>
          <div className="about-stats">
            <div><span className="serif gold-text">15+</span><span className="mono">Years detailing</span></div>
            <div><span className="serif gold-text">2.4k</span><span className="mono">Vehicles served</span></div>
            <div><span className="serif gold-text">4.9★</span><span className="mono">Avg. rating</span></div>
            <div><span className="serif gold-text">7d</span><span className="mono">Service window</span></div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Testimonials = () => {
  const list = [
    { quote: 'Excellent service. They arrived on time and left my SUV looking brand new.', name: 'Marisa V.', loc: 'Beverly Hills, CA', stars: 5, vehicle: 'Range Rover Sport' },
    { quote: 'Booking was easy, payment was secure, and the results were amazing. The detail work on my interior was unreal.', name: 'Daniel K.', loc: 'Santa Monica, CA', stars: 5, vehicle: 'Tesla Model S' },
    { quote: 'I loved that they came to my office. Super convenient and professional. Will be a repeat customer.', name: 'Sofia R.', loc: 'Newport Beach, CA', stars: 5, vehicle: 'Mercedes GLE' },
    { quote: 'They handle my Porsche the way I would. Careful products, attention to every panel.', name: 'James L.', loc: 'Malibu, CA', stars: 5, vehicle: 'Porsche 911' },
  ];
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx(i => (i + 1) % list.length), 6000);
    return () => clearInterval(t);
  }, [paused, list.length]);

  const go = (n) => setIdx(((n % list.length) + list.length) % list.length);

  return (
    <section className="section testimonials-section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Testimonials</span>
          <h2>What clients across LA<br/><span className="gold-text">are saying.</span></h2>
        </div>

        <div
          className="testimonial-carousel"
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
        >
          <div className="testimonial-quote-mark serif" aria-hidden>&ldquo;</div>

          <div className="testimonial-track">
            {list.map((t, i) => (
              <figure
                key={i}
                className={`testimonial-slide ${i === idx ? 'is-active' : ''} ${i < idx ? 'is-prev' : ''} ${i > idx ? 'is-next' : ''}`}
                aria-hidden={i !== idx}
              >
                <div className="testimonial-stars">
                  {Array(t.stars).fill(0).map((_, k) => <span key={k}><Icon name="star" size={16}/></span>)}
                </div>
                <blockquote>{t.quote}</blockquote>
                <figcaption>
                  <div className="testimonial-name serif">{t.name}</div>
                  <div className="testimonial-loc mono">{t.loc} · {t.vehicle}</div>
                </figcaption>
              </figure>
            ))}
          </div>

          <div className="testimonial-controls">
            <button className="testimonial-arrow" onClick={() => go(idx - 1)} aria-label="Previous testimonial">
              <Icon name="arrow" size={16} stroke={1.6}/>
            </button>
            <div className="testimonial-dots">
              {list.map((_, i) => (
                <button
                  key={i}
                  className={`testimonial-dot ${i === idx ? 'is-active' : ''}`}
                  onClick={() => go(i)}
                  aria-label={`Go to testimonial ${i + 1}`}
                />
              ))}
            </div>
            <button className="testimonial-arrow" onClick={() => go(idx + 1)} aria-label="Next testimonial">
              <Icon name="arrow" size={16} stroke={1.6}/>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

const FAQ = () => {
  const items = [
    { q: 'Do I need to provide water or electricity?', a: 'Most services include our self-contained water and power supply. If something is required for your specific service, we\u2019ll let you know during booking.' },
    { q: 'How long does the service take?', a: 'Service time depends on your vehicle type and selected package — typically 45 minutes for a Regular Wash, up to 3.5 hours for Detailing or our Luxury Wash.' },
    { q: 'Can I pay by card?', a: 'Yes. You can securely pay online by card through Stripe. We also accept cash on the day for a 10% discount.' },
    { q: 'What areas do you serve?', a: 'We cover the West Coast from Malibu to Newport Beach — including West Hollywood, Beverly Hills, Santa Monica, Manhattan Beach and surrounding areas. Enter your ZIP at booking to confirm.' },
    { q: 'What happens if it rains?', a: 'If weather affects your appointment, we\u2019ll proactively reach out to reschedule based on availability — at no charge.' },
    { q: 'Can I book for multiple vehicles?', a: 'Absolutely. After your first booking, you can add additional vehicles at checkout. Fleet and building accounts are available — ask about our promo codes.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="section faq-section">
      <div className="container">
        <div className="faq-grid">
          <div className="section-head" style={{marginBottom:0}}>
            <span className="eyebrow">FAQ</span>
            <h2>Questions<br/>before you <span className="gold-text">book?</span></h2>
            <p>Can\u2019t find what you\u2019re looking for? Text our team — we reply within the hour during business days.</p>
            <a href="tel:+14244150208" className="btn btn-ghost" style={{marginTop:24,alignSelf:'flex-start'}}>
              <Icon name="phone" size={14}/> Talk to a human
            </a>
          </div>
          <div className="faq-list">
            {items.map((it,i) => (
              <div key={i} className={`faq-item ${open === i ? 'is-open' : ''}`}>
                <button className="faq-q" onClick={()=>setOpen(open === i ? -1 : i)}>
                  <span className="mono faq-num">{String(i+1).padStart(2,'0')}</span>
                  <span className="faq-q-text">{it.q}</span>
                  <span className="faq-q-icon"><Icon name={open === i ? 'minus' : 'plus'} size={18}/></span>
                </button>
                {open === i && <div className="faq-a">{it.a}</div>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const FinalCTA = ({ onBook }) => (
  <section className="section final-cta-section">
    <div className="container">
      <div className="final-cta-card">
        <div className="gold-corner tl"></div>
        <div className="gold-corner tr"></div>
        <div className="gold-corner bl"></div>
        <div className="gold-corner br"></div>
        <span className="eyebrow" style={{justifyContent:'center'}}>Ready when you are</span>
        <h2 style={{textAlign:'center'}}>
          Ready for a cleaner,<br/>
          <span className="gold-text">sharper-looking vehicle?</span>
        </h2>
        <p style={{textAlign:'center',maxWidth:560,margin:'0 auto',color:'var(--muted)',fontSize:18}}>
          Get your instant quote, book online, and let Prestige Auto Spa Mobile come to you.
        </p>
        <div style={{display:'flex',gap:12,justifyContent:'center',marginTop:32,flexWrap:'wrap'}}>
          <button className="btn btn-primary" onClick={onBook}>
            Get a quote &amp; book now <Icon name="arrow" size={14}/>
          </button>
          <a className="btn btn-ghost" href="tel:+14244150208">
            <Icon name="phone" size={14}/> (424) 415-0208
          </a>
        </div>
      </div>
    </div>
  </section>
);

window.HowItWorks = HowItWorks;
window.WhyChoose = WhyChoose;
window.Services = Services;
window.About = About;
window.Testimonials = Testimonials;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;