/* 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 with Stripe, PayPal, Zelle, Venmo, Cash App — or cash.' },
  ];
  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:'ext',    title:'Exterior Wash',          tag:'Essential',  body:'A professional exterior clean to remove dirt, dust, and road buildup. Wheels, tires, windows, body.' },
    { id:'both',   title:'Interior & Exterior',    tag:'Most Popular', body:'A complete refresh for your vehicle inside and out. Hand wash plus interior vacuum and wipe-down.' },
    { id:'detail', title:'Full Detail',            tag:'Premium',    body:'A deeper cleaning service designed to restore a polished, premium look — top to bottom.' },
    { id:'intd',   title:'Interior Deep Cleaning', tag:'Specialty',  body:'Focused care for seats, carpets, dashboard, panels, and interior surfaces. Leather conditioning included.' },
    { id:'wax',    title:'Wax & Paint Protection', tag:'Protection', body:'Add shine and protection to your vehicle\u2019s exterior finish. Long-lasting hand-applied sealant.' },
    { id:'spa',    title:'Premium Auto Spa',       tag:'Signature',  body:'Our most complete service for customers who want the full Prestige experience. Concierge-level care.' },
  ];
  return (
    <section id="services" className="section services-section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Services</span>
          <h2>Six tiers. <span className="gold-text">One standard.</span></h2>
          <p>From a quick exterior refresh to our signature top-to-bottom spa 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 === 1 || i === 5 ? '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 an exterior wash, up to 3.5 hours for the Premium Auto Spa.' },
    { q: 'Can I pay by card?', a: 'Yes. You can securely pay online by Stripe, PayPal, Zelle, Venmo, or Cash App. 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:+13105550110" 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:+13105550110">
            <Icon name="phone" size={14}/> (310) 555-0110
          </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;