/* global React, Icon, Wordmark, VehicleCard, TrustStrip, SectionHead, CV_INVENTORY, CV_FACTS, CV_BRANDS */
const { useState, useEffect, useMemo, useRef } = React;

// ─────────────────────────────────────────────────────────────────────────────
// HOME
// ─────────────────────────────────────────────────────────────────────────────
function HomePage({ setPage, openVehicle }) {
  const featured = CV_INVENTORY.slice(0, 4);
  const lineup = CV_INVENTORY.slice(4, 10);

  return (
    <main data-screen-label="Home" className="cv-home">
      {/* ─── Cinematic hero ─── */}
      <section className="cv-hero" data-screen-label="Hero">
        <div className="cv-hero-media">
          <img src="media/showroom-hero-1920.webp" alt="" />
          <div className="cv-hero-veil" />
          <div className="cv-hero-vignette" />
        </div>
        <div className="cv-hero-grid">
          <div className="cv-hero-lockup">
            <div className="cv-eyebrow on-dark">CV Auto — Al Quoz, Dubai · {CV_FACTS.since}</div>
            <h1 className="cv-hero-h1">
              A trusted destination for
              <br />
              <em className="cv-italic">luxury &amp; performance</em>
              <br />
              cars in Dubai.
            </h1>
            <p className="cv-hero-sub">
              Curated multi-brand inventory, transparent consignment, and concierge-grade
              support for buyers and sellers across the GCC.
            </p>
            <div className="cv-hero-cta">
              <button className="cv-btn cv-btn-primary cv-btn-lg" onClick={() => setPage({ name: "inventory" })}>
                Browse inventory <Icon.arrow />
              </button>
              <a className="cv-btn cv-btn-ghost cv-btn-lg on-dark" href={CV_FACTS.whatsapp} target="_blank" rel="noopener">
                <Icon.wa /> WhatsApp the showroom
              </a>
            </div>
          </div>

          <aside className="cv-hero-aside">
            <div className="cv-hero-quick">
              <div className="cv-hero-quick-h">Quick enquiry</div>
              <div className="cv-quick-row">
                <input placeholder="Make or model" />
                <Icon.search />
              </div>
              <div className="cv-quick-grid">
                <select><option>Any body</option><option>Coupe</option><option>Sedan</option><option>SUV</option><option>Convertible</option><option>Hypercar</option><option>Classic</option></select>
                <select><option>Any year</option><option>2024+</option><option>2020+</option><option>2015+</option><option>Pre-2015</option></select>
              </div>
              <button className="cv-btn cv-btn-primary cv-btn-full" onClick={() => setPage({ name: "inventory" })}>
                Search the showroom <Icon.arrow />
              </button>
              <div className="cv-quick-fine">
                Live inventory will be wired to the client's vehicle feed.
                Cars below are demo placeholders from the public listing.
              </div>
            </div>
          </aside>
        </div>

        <div className="cv-hero-foot">
          <div className="cv-hero-foot-l">
            <span className="cv-tick" />
            <span>Showroom open today — 10:00 to 21:00</span>
          </div>
          <div className="cv-hero-foot-r">
            <button onClick={() => setPage({ name: "inventory" })}>Scroll the floor</button>
            <Icon.chev style={{ transform: "rotate(-90deg)" }} />
          </div>
        </div>
      </section>

      {/* ─── Trust strip ─── */}
      <section className="cv-band cv-band-paper">
        <TrustStrip />
      </section>

      {/* ─── Featured / just arrived ─── */}
      <section className="cv-band cv-band-noir" data-screen-label="Featured">
        <div className="cv-container">
          <SectionHead
            eyebrow="Just arrived"
            title="The current floor"
            copy="A rotating selection from the showroom this week. Tap any car for the full story, spec table, and an enquiry line."
            action={
              <button className="cv-link" onClick={() => setPage({ name: "inventory" })}>
                See all inventory <Icon.arrow />
              </button>
            }
          />
          <div className="cv-card-grid">
            {featured.map(v => <VehicleCard key={v.id} v={v} onOpen={openVehicle} />)}
          </div>
        </div>
      </section>

      {/* ─── Editorial split — Consignment ─── */}
      <section className="cv-split" data-screen-label="Consign">
        <div className="cv-split-media">
          <img src="media/showroom-interior-2.webp" alt="" />
        </div>
        <div className="cv-split-body">
          <div className="cv-eyebrow">Consign with CV Auto</div>
          <h2 className="cv-h2">
            We sell your car for you —
            <br />
            <em className="cv-italic">and clean it daily</em>
            <br />
            while it sits on the floor.
          </h2>
          <p className="cv-body">
            The standout secondary service. Free inspection &amp; market assessment, professional
            photography and video, multi-platform marketing across Dubizzle, DubiCars and social,
            buyer negotiation, and finance support — while you retain full ownership of the vehicle.
          </p>
          <ol className="cv-steps">
            <li><span>01</span>Inspection &amp; price assessment</li>
            <li><span>02</span>Studio photography &amp; video</li>
            <li><span>03</span>Listed across every major channel</li>
            <li><span>04</span>We handle inquiries &amp; negotiation</li>
            <li><span>05</span>Daily care while displayed</li>
            <li><span>06</span>Buyer finance assistance</li>
          </ol>
          <div className="cv-split-cta">
            <button className="cv-btn cv-btn-primary" onClick={() => setPage({ name: "consignment" })}>
              Start a consignment <Icon.arrow />
            </button>
            <button className="cv-btn cv-btn-ghost" onClick={() => setPage({ name: "sell" })}>
              Or sell to us directly
            </button>
          </div>
        </div>
      </section>

      {/* ─── Brand wall (text only — no OEM logos, rights not held) ─── */}
      <section className="cv-band cv-band-paper">
        <div className="cv-container">
          <SectionHead
            eyebrow="Brands on the floor"
            title="Marketed multi-brand."
            copy="CV Auto is an independent dealership. We are not a franchise of any of the manufacturers below — all marks remain the property of their respective owners."
          />
          <div className="cv-brandwall">
            {CV_BRANDS.map(b => <span key={b}>{b}</span>)}
          </div>
        </div>
      </section>

      {/* ─── More inventory teaser ─── */}
      <section className="cv-band cv-band-noir">
        <div className="cv-container">
          <SectionHead
            eyebrow="More from the floor"
            title="Sport, SUV, classic, and beyond."
            action={
              <button className="cv-link" onClick={() => setPage({ name: "inventory" })}>
                Open the inventory <Icon.arrow />
              </button>
            }
          />
          <div className="cv-card-grid">
            {lineup.map(v => <VehicleCard key={v.id} v={v} onOpen={openVehicle} />)}
          </div>
        </div>
      </section>

      {/* ─── Visit the showroom ─── */}
      <section className="cv-visit" data-screen-label="Visit">
        <div className="cv-visit-media">
          <img src="media/facility-interior-1.webp" alt="" />
          <div className="cv-visit-veil" />
        </div>
        <div className="cv-visit-body">
          <div className="cv-eyebrow on-dark">Visit the showroom</div>
          <h2 className="cv-h2 on-dark">
            4B Street, opposite Al&nbsp;Serkal&nbsp;Avenue.
          </h2>
          <div className="cv-visit-grid">
            <div>
              <div className="cv-visit-h">Address</div>
              <p>{CV_FACTS.address}</p>
            </div>
            <div>
              <div className="cv-visit-h">Hours</div>
              {CV_FACTS.hours.map(([d, t]) => (
                <p key={d}><span style={{ color: "var(--muted)" }}>{d}</span> &nbsp;&nbsp; {t}</p>
              ))}
            </div>
            <div>
              <div className="cv-visit-h">Reach us</div>
              <p><a href={`tel:${CV_FACTS.phone.replace(/\s/g,"")}`}>{CV_FACTS.phone}</a></p>
              <p><a href={`tel:${CV_FACTS.mobile.replace(/\s/g,"")}`}>{CV_FACTS.mobile}</a></p>
              <p><a href={`mailto:${CV_FACTS.email}`}>{CV_FACTS.email}</a></p>
            </div>
          </div>
          <div className="cv-split-cta">
            <button className="cv-btn cv-btn-primary" onClick={() => setPage({ name: "contact" })}>
              Book a viewing <Icon.arrow />
            </button>
            <a className="cv-btn cv-btn-ghost on-dark" href={CV_FACTS.whatsapp} target="_blank" rel="noopener">
              <Icon.wa /> Message on WhatsApp
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

window.HomePage = HomePage;