/* global React, ReactDOM, I, Nav, Footer, FabWa, useReveal */
const { useState: _us, useEffect: _ue } = React;

/* ─── DATA ────────────────────────────────────────────────── */

const STATS = [
  { value: "5+",   label: "Jaar persoonlijke service in Ede" },
  { value: "600+", label: "Auto's met liefde doorgegeven" },
  { value: "12",   label: "Europese landen waar we inkopen" },
  { value: "5,0",  label: "Gemiddelde Google-score van klanten" },
];

const TIMELINE = [
  {
    year: "2021",
    title: "Abba Automotive opent",
    desc: "Wat begon als één man, één werkplaats en één belofte: auto's verkopen zoals je 'm aan je beste vriend zou verkopen. Begonnen in Ede.",
  },
  {
    year: "2022",
    title: "Eerste import uit Duitsland",
    desc: "We breiden uit naar import & export. Directe lijnen met dealers in Stuttgart, München en Hamburg. BPM-aangifte en RDW-keuring volledig in eigen hand.",
  },
  {
    year: "2023",
    title: "BOVAG-erkenning",
    desc: "Officieel BOVAG-aangesloten met 40-puntencheck op alle verkochte occasions. Standaard drie maanden BOVAG-garantie — zonder kleine lettertjes.",
  },
  {
    year: "2024",
    title: "Live voorraad via mijnVWE",
    desc: "Directe integratie met Hexon en VWE: kentekencheck, NAP, schadeverleden — alles binnen 30 seconden zichtbaar. Geen verrassingen, ooit.",
  },
  {
    year: "2026",
    title: "Team groeit door",
    desc: "Vandaag: een hecht team van vier, een netwerk in heel Europa, en honderden klanten die ons aanbevelen aan vrienden. Nog steeds dezelfde belofte.",
  },
];

const VALUES = [
  {
    n: "01",
    title: "Persoonlijk",
    desc: "Geen callcenter, geen formulier-fabriek. Je belt en je krijgt iemand aan de lijn die je auto kent — of vandaag nog gaat kennen.",
  },
  {
    n: "02",
    title: "Transparant",
    desc: "Iedere euro die je betaalt is uitlegbaar. Open boek over inkoopprijs, BPM, transport en marge. Geen verborgen kosten, geen verkoop-trucs.",
  },
  {
    n: "03",
    title: "Vakmanschap",
    desc: "Elke auto wordt persoonlijk geïnspecteerd vóór hij ons terrein op komt. NAP, CARPASS, 40-puntencheck — en daarna nog een rondje van ons.",
  },
  {
    n: "04",
    title: "Eerlijk",
    desc: "Een eerlijke prijs is geen reclamekreet maar een rekensom. We laten 'm zien — en als de auto niet bij je past, zeggen we dat ook.",
  },
];

const TESTIMONIALS = [
  {
    rating: 5,
    quote:
      "Eindelijk een autobedrijf waar je gewoon de waarheid hoort. Belde me terug binnen het uur, gaf een eerlijke prijs voor mijn Golf en regelde alles — inclusief de vrijwaring. Geld stond 's avonds op mijn rekening.",
    name: "Mark van Doorn",
    city: "Wageningen",
    context: "Verkocht zijn VW Golf · 2025",
    source: "Google review",
  },
  {
    rating: 5,
    quote:
      "Ze hebben een Audi RS6 voor ons uit Stuttgart gehaald. BPM, transport, RDW — alles zonder gedoe geregeld. Vooraf precies de kostenopgave die ik beloofd kreeg, achteraf geen euro extra. Zeldzaam tegenwoordig.",
    name: "Linda & Bas Hoekstra",
    city: "Apeldoorn",
    context: "Importeerde Audi RS6 uit Duitsland · 2024",
    source: "Google review",
  },
  {
    rating: 5,
    quote:
      "Was de derde dealer waar ik kwam kijken voor m'n eerste auto. De enige die uitlegde wat hij ging doen vóórdat hij mijn handtekening vroeg. Drie jaar later nog steeds blij met de aanschaf — en met de service.",
    name: "Yara El Khattabi",
    city: "Ede",
    context: "Kocht Peugeot 3008 · 2023",
    source: "Google review",
  },
];

const HOURS = [
  { day: "Maandag t/m vrijdag", time: "09:00 – 18:00" },
  { day: "Zaterdag",            time: "10:00 – 17:00" },
  { day: "Zondag",              time: "Op afspraak" },
];

/* ─── COMPONENTS ──────────────────────────────────────────── */

function StoryHero() {
  return (
    <section className="over-hero" data-screen-label="Over ons · Verhaal">
      <div className="container">
        <div className="over-hero__grid">
          <div className="over-hero__copy">
            <span className="eyebrow">Sinds 2021 · Ede, Gelderland</span>
            <h2 className="over-hero__title">
              Een auto kopen of verkopen<br/>
              hoort te voelen als <em>een handdruk</em>,<br/>
              niet als een transactie.
            </h2>
            <p className="over-hero__lede">
              Abba Automotive is een onafhankelijk autobedrijf in Ede.
              We doen vier dingen — <strong>inkoop, verkoop, import en taxatie</strong> — en we
              doen ze met de aandacht die je vroeger nog bij de garage om de hoek vond.
            </p>
            <p className="over-hero__lede">
              Geen verkooptrucs, geen "actie deze week", geen kleine lettertjes. Wel: een
              persoonlijk telefoongesprek, een eerlijke prijs en een auto die we zelf ook zouden rijden.
            </p>
          </div>

          <div className="over-hero__media">
            <div className="over-hero__portrait placeholder over-hero__portrait--logo">
              <img src="assets/logo.png" alt="Abba Automotive" className="over-hero__logo-img" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatsStrip() {
  return (
    <section className="over-stats" data-screen-label="Over ons · Cijfers">
      <div className="container">
        <div className="over-stats__grid">
          {STATS.map((s, i) => (
            <div className="over-stats__cell" key={i}>
              <div className="over-stats__value">{s.value}</div>
              <div className="over-stats__label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Timeline() {
  return (
    <section className="section over-timeline" data-screen-label="Over ons · Tijdlijn">
      <div className="container">
        <div className="section__head reveal">
          <div>
            <span className="eyebrow">Mijlpalen</span>
            <h2 className="section__title" style={{ marginTop: 22 }}>
              Vijf jaar,<br/> één <em>belofte</em>.
            </h2>
          </div>
          <p className="section__intro" style={{ marginTop: 0 }}>
            Van één man met één werkplaats tot een hecht team met een Europees netwerk —
            maar onze manier van werken bleef precies hetzelfde.
          </p>
        </div>

        <ol className="over-timeline__list">
          {TIMELINE.map((m, i) => (
            <li className="over-timeline__item" key={m.year}>
              <div className="over-timeline__year">
                <span>{m.year}</span>
                <i className="over-timeline__dot" aria-hidden="true" />
              </div>
              <div className="over-timeline__body">
                <h4 className="over-timeline__title">{m.title}</h4>
                <p className="over-timeline__desc">{m.desc}</p>
              </div>
              <div className="over-timeline__idx">{String(i + 1).padStart(2, "0")}</div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function Values() {
  return (
    <section className="section over-values" data-screen-label="Over ons · Waarden">
      <div className="container">
        <div className="section__head reveal">
          <div>
            <span className="eyebrow">Wat ons drijft</span>
            <h2 className="section__title" style={{ marginTop: 22 }}>
              Vier <em>waarden</em>,<br/> geen marketing.
            </h2>
          </div>
          <p className="section__intro" style={{ marginTop: 0 }}>
            We hangen ze niet aan de muur. Ze zitten in elk telefoontje, elke taxatie en
            elke handdruk — en daar mag je ons aan houden.
          </p>
        </div>

        <div className="over-values__grid">
          {VALUES.map((v) => (
            <div className="over-values__card" key={v.n}>
              <div className="over-values__num">{v.n}</div>
              <h4 className="over-values__title">{v.title}</h4>
              <p className="over-values__desc">{v.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Voices() {
  return (
    <section className="section over-voices" data-screen-label="Over ons · Klanten">
      <div className="container">
        <div className="section__head reveal">
          <div>
            <span className="eyebrow">Klanten over ons</span>
            <h2 className="section__title" style={{ marginTop: 22 }}>
              In hun <em>eigen woorden</em>.
            </h2>
          </div>
          <p className="section__intro" style={{ marginTop: 0 }}>
            We mogen onszelf de hele dag aanprijzen — uiteindelijk telt wat de
            mensen zeggen die hier de sleutels kwamen ophalen. Een greep.
          </p>
        </div>

        <div className="over-voices__grid">
          {TESTIMONIALS.map((t, i) => (
            <article className="over-voices__card" key={i}>
              <div className="over-voices__stars" aria-label={`${t.rating} van 5 sterren`}>
                {Array.from({ length: t.rating }).map((_, k) => (
                  <span key={k}>★</span>
                ))}
              </div>
              <p className="over-voices__quote">{t.quote}</p>
              <div className="over-voices__foot">
                <div>
                  <div className="over-voices__name">{t.name}</div>
                  <div className="over-voices__meta">{t.city} · {t.context}</div>
                </div>
                <span className="over-voices__source">{t.source}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Place() {
  return (
    <section className="over-place" data-screen-label="Over ons · Locatie">
      <div className="container">
        <div className="over-place__grid">
          <div className="over-place__media">
            <iframe
              className="over-place__map"
              title="Locatie Abba Automotive op de kaart"
              src="https://www.google.com/maps?q=Nieuwe+Maanderbuurtweg+63+Ede&output=embed"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
            <div className="over-place__pin">
              <span className="over-place__pin-dot" aria-hidden="true" />
              <div className="over-place__pin-card">
                <strong>Abba Automotive</strong>
                <small>Nieuwe Maanderbuurtweg · Ede</small>
              </div>
            </div>
          </div>

          <div className="over-place__body">
            <span className="eyebrow">Kom langs</span>
            <h3 className="over-place__title">
              Kom langs in <em>Ede</em>.
            </h3>
            <p className="over-place__desc">
              Ruim parkeren, vers gezet espresso. Loop binnen, neem
              een rondje langs het aanbod en stel ons elke vraag die je hebt — ook als je
              "alleen even rondkijkt".
            </p>

            <div className="over-place__rows">
              <div className="over-place__row">
                <span className="over-place__row-label">Adres</span>
                <span className="over-place__row-value">Nieuwe Maanderbuurtweg 63 · 6717 AP Ede</span>
              </div>
              <div className="over-place__row">
                <span className="over-place__row-label">Telefoon</span>
                <span className="over-place__row-value"><a href="tel:+31649069000">+31 6 49069000</a></span>
              </div>
              <div className="over-place__row">
                <span className="over-place__row-label">E-mail</span>
                <span className="over-place__row-value"><a href="mailto:info@abbaautomotive.nl">info@abbaautomotive.nl</a></span>
              </div>
              <div className="over-place__row">
                <span className="over-place__row-label">KvK</span>
                <span className="over-place__row-value">84086815</span>
              </div>
            </div>

            <div className="over-place__hours">
              {HOURS.map((h) => (
                <div className="over-place__hour" key={h.day}>
                  <span>{h.day}</span>
                  <span>{h.time}</span>
                </div>
              ))}
            </div>

            <div className="over-place__ctas">
              <a href="Contact.html" className="btn btn--primary">
                Plan een bezoek <span className="btn__arrow"><I.arrow /></span>
              </a>
              <a href="tel:+31649069000" className="btn btn--ghost">
                <I.phone /> Bel direct
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── PAGE ───────────────────────────────────────────────── */

function OverPage() {
  useReveal();
  return (
    <>
      <Nav active="over" />

      <header className="page-head" data-screen-label="Over ons · Header">
        <div className="container">
          <div className="crumb">
            <a href="index.html">Home</a>
            <span className="crumb__sep">/</span>
            <span className="crumb__current">Over ons</span>
          </div>
          <div className="page-head__inner">
            <h1 className="page-head__title">
              Vier mensen, één <em>belofte</em>,<br/>
              honderden tevreden eigenaren.
            </h1>
            <div className="page-head__meta">
              <p style={{ maxWidth: 420, color: "var(--fg-mute)", fontSize: 15, lineHeight: 1.55 }}>
                We zijn geen ketens-dealer en geen marktplaats. We zijn vier auto-mensen
                in Ede die geloven dat een eerlijke deal nog steeds bestaat — en die er
                elke dag op leveren.
              </p>
            </div>
          </div>
        </div>
      </header>

      <StoryHero />
      <StatsStrip />
      <Timeline />
      <Values />
      <Voices />
      <Place />

      {/* Bottom CTA — hergebruik van Diensten-patroon */}
      <section className="cta-block" data-screen-label="Over ons · CTA">
        <div className="container">
          <div className="cta-block__inner reveal">
            <div>
              <span className="eyebrow">Tot ziens in Ede</span>
              <h2 className="cta-block__title">
                Liever even praten<br/> dan <em>typen</em>?
              </h2>
              <p className="cta-block__desc">
                Bel ons, app ons, of kom gewoon langs aan de Nieuwe Maanderbuurtweg. We hebben
                altijd tijd voor een goed gesprek over auto's — ook als je vandaag niets koopt.
              </p>
            </div>
            <div className="cta-block__actions">
              <a href="tel:+31649069000" className="btn btn--primary">
                <I.phone /> +31 6 49069000
              </a>
              <a href="https://wa.me/31649069000" className="contact__cta-wa">
                <I.whatsapp /> Stuur WhatsApp
              </a>
              <a href="Contact.html" className="btn btn--ghost">
                Stuur een bericht
              </a>
            </div>
          </div>
        </div>
      </section>

      <Footer />
      <FabWa />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<OverPage />);