// === About + Testimonials + FAQ ===

function About() {
  return (
    <section className="section" id="about">
      <div className="container">
        <div className="about-layout">
          <Reveal>
            <div className="about-img">
              <Placeholder label="Team / shop photo" />
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="about-text">
              <span className="eyebrow">— About Wrap Station</span>
              <h2 className="h-1" style={{ fontSize: "clamp(36px, 4.5vw, 64px)" }}>Built by people who'd rather wrap your car than sell to you.</h2>
              <p className="body" style={{ fontSize: 17 }}>
                We started Wrap Station in 2018 in a single bay off Production Avenue. Today we run
                a four-bay, climate-controlled shop in Sorrento Valley — but the philosophy hasn't
                moved. Hire the best installers, use the best film, document everything, and treat
                every car like it's going home with us.
              </p>
              <p className="about-quote">
                "We don't have a sales team. The people quoting your car are the ones installing it."
              </p>
              <span className="about-cite">— Marco R., Founder & Lead Installer</span>
              <div className="about-features">
                <div className="about-feature">
                  <div className="about-feature-num">STEK</div>
                  <div className="about-feature-label">Authorized PPF installer</div>
                </div>
                <div className="about-feature">
                  <div className="about-feature-num">3M</div>
                  <div className="about-feature-label">Preferred Pro Network</div>
                </div>
                <div className="about-feature">
                  <div className="about-feature-num">Avery</div>
                  <div className="about-feature-label">Certified wrap installer</div>
                </div>
                <div className="about-feature">
                  <div className="about-feature-num">CQuartz</div>
                  <div className="about-feature-label">Finest Reserve authorized</div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

const TESTIMONIALS = [
  { name: "James K.", car: "Tesla Model S Plaid", initials: "JK", text: "Took my Plaid in for satin black PPF. The install is invisible — and I mean invisible. They documented every panel and called me twice with updates. This is the only shop I'll use." },
  { name: "Priya S.", car: "BMW M4 Competition", initials: "PS", text: "Got a full body satin stealth PPF and ceramic. The shop is spotless, the work is dialed, and they didn't try to sell me anything I didn't need. The G-Wagon comes here next." },
  { name: "Daniel R.", car: "Mercedes-AMG GT", initials: "DR", text: "I drove down from LA after seeing their portfolio. Worth every mile. Color-change wrap on my AMG GT looks factory. Zero lifting at the edges three months in." },
];

function Testimonials() {
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="section-head-meta">
              <span className="eyebrow">— Testimonials</span>
              <h2 className="h-1">What clients<br/>say after delivery.</h2>
            </div>
            <p className="lede">
              We pull these from Google, Yelp and Instagram DMs. No editing. No paid placement.
            </p>
          </div>
        </Reveal>
        <div className="testimonials-row">
          {TESTIMONIALS.map((t, i) => (
            <Reveal key={i} delay={i * 100}>
              <div className="testimonial">
                <div className="testimonial-stars">
                  {[...Array(5)].map((_, j) => <Icon.Star key={j}/>)}
                </div>
                <p className="testimonial-quote">"{t.text}"</p>
                <div className="testimonial-meta">
                  <div className="testimonial-avatar">{t.initials}</div>
                  <div>
                    <div className="testimonial-name">{t.name}</div>
                    <div className="testimonial-car">{t.car}</div>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const FAQS = [
  { q: "How long does a full vinyl wrap take?", a: "A full color-change vinyl wrap typically takes 5–7 business days. We disassemble panels, prep the surface, and install in a climate-controlled bay. Rush jobs are possible — ask about our priority slot." },
  { q: "Will PPF or wrap damage my paint?", a: "No — when properly installed and removed by a certified installer, neither product damages factory paint. In fact, both protect the original finish. We only install on paint that's in good condition; we'll tell you upfront if there's a concern." },
  { q: "Can I finance the work?", a: "Yes. We partner with Affirm and Klarna for 0% APR financing on approved credit, up to 24 months. We also accept all major cards and bank transfer. Ask during your quote." },
  { q: "Do you offer a warranty?", a: "All vinyl wraps carry a 5–7 year manufacturer warranty. PPF carries a 10–12 year warranty against yellowing, cracking, and peeling. Ceramic coatings come with a 2–7 year warranty depending on the package. We back labor for 12 months." },
  { q: "How do I care for my wrapped car?", a: "Hand wash only — no automatic car washes for the first 4 weeks. Use pH-neutral soap. Avoid pressure washing edges. We send a full care guide at delivery and offer a free first wash at 30 days." },
  { q: "Do you ship to clients outside San Diego?", a: "We don't ship film, but we welcome clients from LA, Orange County and Phoenix. We've had cars trailered down from Bay Area and Vegas. Ask about our out-of-town package — we coordinate hotels and pickup." },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="section-head-meta">
              <span className="eyebrow">— FAQ</span>
              <h2 className="h-1">Questions we<br/>hear most.</h2>
            </div>
            <p className="lede">
              Don't see what you're looking for? Text the shop directly at (858) 405-2330.
              You'll hear back from a real installer, usually within an hour.
            </p>
          </div>
        </Reveal>
        <Reveal>
          <div className="faq-list">
            {FAQS.map((f, i) => (
              <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="faq-icon"><Icon.Plus/></span>
                </button>
                <div className="faq-a">
                  <div className="faq-a-inner">{f.a}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { About, Testimonials, FAQ });