// === Services + Portfolio + Process ===

const SERVICES = [
  {
    num: "01",
    title: "Vinyl Wrap",
    tag: "Color change · Full body",
    desc: "Transform the look of your car with premium cast vinyl from 3M and Avery. Color change, satin, gloss, chrome — engineered to remove cleanly when you're ready for the next chapter.",
    price: "From $3,000",
    sub: "Full vehicle · 5–7 days",
    placeholder: "Vinyl wrap photo",
    image: "images/wrx-yellow.jpg",
  },
  {
    num: "02",
    title: "Paint Protection Film",
    tag: "PPF · Self-healing",
    desc: "Invisible armor against rock chips, road rash, swirl marks and bird droppings. Self-healing topcoat, 10-year warranty, hydrophobic finish. Front-end, track pack, or full coverage.",
    price: "From $1,750",
    sub: "Up to $7,000 full · 4–6 days",
    placeholder: "PPF install photo",
    image: "images/aventador-test-fit.jpg",
  },
  {
    num: "03",
    title: "Ceramic Coating",
    tag: "9H hardness · Hydrophobic",
    desc: "A molecular bond that locks in gloss, repels water and shrugs off contaminants. Two- to seven-year coatings from CQuartz, Gtechniq and Modesta. Paired with full paint correction.",
    price: "From $600",
    sub: "Up to $1,200 multi-stage · 1–3 days",
    placeholder: "Ceramic coating photo",
    image: "images/m4-red.jpg",
  },
  {
    num: "04",
    title: "Window Tint",
    tag: "Ceramic · IR blocking",
    desc: "Heat-rejecting ceramic film that keeps your interior 30°F cooler without the haze. Lifetime warranty against bubbling, fading and peeling. CA-legal shades available.",
    price: "From $450",
    sub: "Up to $1,200 ceramic · 2–4 hours",
    placeholder: "Window tint photo",
    image: "images/r8-side.jpg",
    imagePosition: "center 18%",
  },
];

function Services() {
  return (
    <section className="section" id="services">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="section-head-meta">
              <span className="eyebrow">— Services</span>
              <h2 className="h-1">Four ways<br/>to protect what<br/>moves you.</h2>
            </div>
            <p className="lede">
              Every service starts with a paint inspection and a conversation. We don't upsell — we
              recommend the package that actually fits how you drive, where you park, and how long
              you plan to keep the car.
            </p>
          </div>
        </Reveal>
        <div className="services-grid">
          {SERVICES.map((s, i) => (
            <Reveal key={s.num} delay={i * 80}>
              <div className="service-card">
                <div className="service-num">{s.num} / {s.tag}</div>
                <div className="service-img-wrap">
                  {s.image ? <img src={s.image} alt={s.title} className="service-img" style={s.imagePosition ? { objectPosition: s.imagePosition } : null}/> : <Placeholder label={s.placeholder} />}
                </div>
                <div className="service-content">
                  <h3 className="h-2" style={{ fontSize: "32px" }}>{s.title}</h3>
                  <p className="body" style={{ fontSize: 15 }}>{s.desc}</p>
                </div>
                <div className="service-bottom">
                  <div>
                    <span className="service-price-from">Starting</span>
                    <span className="service-price">{s.price}</span>
                  </div>
                  <a href="contact.html" className="btn-link">
                    Get pricing
                    <span className="arrow"><Icon.Arrow size={14}/></span>
                  </a>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const PORTFOLIO = [
  { tag: "Lamborghini Aventador S", title: "Satin White full body wrap", span: "span-8", image: "images/aventador-white.jpg" },
  { tag: "BMW M4 Competition", title: "Matte Black PPF", span: "span-4", image: "images/m4-matte-black.jpg" },
  { tag: "Subaru WRX STI", title: "Gloss Yellow color change", span: "span-4", image: "images/wrx-yellow.jpg" },
  { tag: "Dodge Viper ACR", title: "Custom stripe layout", span: "span-4", image: "images/viper-stripe.jpg" },
  { tag: "BMW M4", title: "Imola Red ceramic + tint", span: "span-4", image: "images/m4-red.jpg" },
  { tag: "Lamborghini Aventador S", title: "PPF test-fit pre-install", span: "span-6", image: "images/aventador-test-fit.jpg" },
  { tag: "BMW M4 Competition", title: "Matte Stealth at the shop", span: "span-6", image: "images/m4-matte-black.jpg" },
];

function Portfolio() {
  const filters = ["All", "Vinyl Wrap", "PPF", "Ceramic", "Tint"];
  const [active, setActive] = React.useState("All");
  return (
    <section className="section" id="portfolio" style={{ paddingTop: 0 }}>
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="section-head-meta">
              <span className="eyebrow">— Portfolio</span>
              <h2 className="h-1">Recent builds<br/>from the bay.</h2>
            </div>
            <p className="lede">
              A rotating selection of cars that have left our Sorrento Valley shop. Tap a filter to
              focus, or just scroll — every project is documented from drop-off to delivery.
            </p>
          </div>
        </Reveal>
        <Reveal>
          <div className="portfolio-filter">
            {filters.map((f) => (
              <button
                key={f}
                className={`filter-chip ${active === f ? "active" : ""}`}
                onClick={() => setActive(f)}
              >
                {f}
              </button>
            ))}
          </div>
        </Reveal>
        <div className="portfolio-grid">
          {PORTFOLIO.map((p, i) => (
            <Reveal key={i} delay={i * 50} className={`portfolio-item ${p.span}`}>
              <div className="portfolio-item" style={{ position: "absolute", inset: 0 }}>
                {p.image ? <img src={p.image} alt={p.tag} style={{width:"100%", height:"100%", objectFit:"cover"}}/> : <Placeholder label={p.label} />}
                <div className="portfolio-overlay">
                  <span className="portfolio-tag">{p.tag}</span>
                  <span className="portfolio-title">{p.title}</span>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: 56 }}>
          <a href="portfolio.html" className="btn btn-ghost">
            View full portfolio
            <Icon.Arrow size={14}/>
          </a>
        </div>
      </div>
    </section>
  );
}

const PROCESS = [
  { num: "01", title: "Consult", time: "30 min", desc: "Bring the car by — or send photos. We inspect paint, talk goals, and recommend the right material and coverage. No pressure." },
  { num: "02", title: "Quote & Schedule", time: "Same day", desc: "Locked-in price, locked-in calendar. 25% deposit holds your spot. Loaner available for full-week jobs." },
  { num: "03", title: "Prep & Install", time: "1–7 days", desc: "Decontamination, paint correction, install in our climate-controlled, dust-filtered bay. Daily progress photos to your phone." },
  { num: "04", title: "Delivery", time: "Final inspection", desc: "Walkthrough under shop lights and outside. We hand over care instructions, warranty docs, and a follow-up at 30 days." },
];

function Process() {
  return (
    <section className="section" id="process" style={{ background: "var(--bg-elev)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="section-head-meta">
              <span className="eyebrow">— Process</span>
              <h2 className="h-1">From the first<br/>call to keys back.</h2>
            </div>
            <p className="lede">
              Four steps, no surprises. We've installed enough wraps to know exactly where projects
              go sideways — and we've designed our process so yours doesn't.
            </p>
          </div>
        </Reveal>
      </div>
      <div className="process-grid">
        {PROCESS.map((p, i) => (
          <Reveal key={p.num} delay={i * 80}>
            <div className="process-step">
              <div className="process-num">{p.num}</div>
              <div className="process-time">{p.time}</div>
              <h3 className="process-title">{p.title}</h3>
              <p className="process-desc">{p.desc}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Services, Portfolio, Process });