/* WHEELS — one-page nettside. Bygget på WHEELS Design System. */
const { useState, useEffect, useRef } = React;
const DS = window.WHEELSDesignSystem_d6c818;
const { Button, Logo, Rating, Input } = DS;

const GETAROUND = 'https://no.getaround.com/';

/* ---- Ikoner: Lucide-stil, 24-grid, 2px strek, currentColor ---- */
const Icon = ({ d, children, size = 24 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none"
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
aria-hidden="true">
    {d ? <path d={d} /> : children}
  </svg>;

const IconSearch = (p) => <Icon {...p}><circle cx="11" cy="11" r="7" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></Icon>;
const IconPhone = (p) => <Icon {...p}><rect x="6" y="2" width="12" height="20" rx="2.5" /><line x1="12" y1="18" x2="12.01" y2="18" /></Icon>;
const IconCar = (p) => <Icon {...p}><path d="M5 13l1.5-4.5A2 2 0 0 1 8.4 7h7.2a2 2 0 0 1 1.9 1.5L19 13" /><path d="M4 17h16v-3.2a1.8 1.8 0 0 0-.9-1.6L18 11H6l-1.1.6A1.8 1.8 0 0 0 4 13.2z" /><circle cx="7.5" cy="17.5" r="1.4" /><circle cx="16.5" cy="17.5" r="1.4" /></Icon>;
const IconShield = (p) => <Icon {...p}><path d="M12 22s7-3.5 7-9V5.5L12 3 5 5.5V13c0 5.5 7 9 7 9z" /><polyline points="9 12 11 14 15 10" /></Icon>;
const IconPin = (p) => <Icon {...p}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z" /><circle cx="12" cy="10" r="3" /></Icon>;
const IconKey = (p) => <Icon {...p}><circle cx="8" cy="15" r="4" /><path d="M10.8 12.2 20 3" /><path d="M16 7l3 3" /><path d="M18 5l2.5 2.5" /></Icon>;
const IconArrow = (p) => <Icon {...p}><line x1="5" y1="12" x2="18" y2="12" /><polyline points="12 6 18 12 12 18" /></Icon>;
const IconMail = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3.5 7 8.5 6 8.5-6" /></Icon>;

/* ---- Scroll-reveal hook (rAF + getBoundingClientRect) ----
   IntersectionObserver does not fire reliably in embedded iframes,
   so we drive reveals off the scroll position directly. */
function useReveal() {
  useEffect(() => {
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) {
      document.querySelectorAll('.reveal').forEach((e) => e.classList.add('is-in'));
      return;
    }
    // Arm the hidden state only now that JS is running — so if anything
    // fails, content stays visible rather than stuck hidden.
    document.documentElement.classList.add('reveal-armed');
    let ticking = false;
    const check = () => {
      ticking = false;
      const vh = window.innerHeight;
      document.querySelectorAll('.reveal:not(.is-in)').forEach((el) => {
        const r = el.getBoundingClientRect();
        // reveal once the element's top crosses ~88% of the viewport
        if (r.top < vh * 0.88 && r.bottom > 0) el.classList.add('is-in');
      });
    };
    const onScroll = () => {
      if (!ticking) {ticking = true;requestAnimationFrame(check);}
    };
    // initial pass (twice, to catch post-layout/font shifts)
    check();
    requestAnimationFrame(check);
    // safety net: never leave content hidden if scroll math misbehaves
    const failsafe = setTimeout(() => {
      document.querySelectorAll('.reveal:not(.is-in)').forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight) el.classList.add('is-in');
      });
    }, 1800);
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll, { passive: true });
    return () => {
      clearTimeout(failsafe);
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);
}

/* ---- Sticky nav ---- */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const close = () => setMenuOpen(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { href: '#biler', label: 'Bilene' },
    { href: '#slik', label: 'Slik fungerer det' },
    { href: '#hvorfor', label: 'Hvorfor Wheels' },
    { href: '#kontakt', label: 'Kontakt' },
  ];
  return (
    <>
      <header className={'nav' + (scrolled ? ' nav--scrolled' : '')}>
        <div className="nav__inner wh-container">
          <a href="#hero" className="nav__brand" aria-label="WHEELS — til toppen" onClick={close}>
            <Logo tone={scrolled ? 'dark' : 'cream'} size={22} />
          </a>
          <nav className="nav__links">
            {links.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
          </nav>
          <Button as="a" href={GETAROUND} target="_blank" rel="noopener" size="sm"
            variant={scrolled ? 'primary' : 'cream'}>Lei en bil</Button>
          <button className={'nav__burger' + (menuOpen ? ' is-open' : '')}
            aria-label={menuOpen ? 'Lukk meny' : 'Åpne meny'}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(o => !o)}>
            <span /><span /><span />
          </button>
        </div>
        <nav className={'nav__mobile' + (menuOpen ? ' is-open' : '')} aria-hidden={!menuOpen}>
          {links.map(l => (
            <a key={l.href} href={l.href} onClick={close}>{l.label}</a>
          ))}
          <div className="nav__mobile-cta">
            <Button as="a" href={GETAROUND} target="_blank" rel="noopener"
              size="lg" onClick={close}>Lei en bil</Button>
          </div>
        </nav>
      </header>
    </>
  );
}


/* ---- Hero ---- */
function Hero() {
  return (
    <section id="hero" className="band band--dark hero">
      <div className="hero__glow" aria-hidden="true" />
      <div className="wh-container hero__inner">
        <span className="overline reveal hero__eyebrow">Bilutleie via Getaround</span>
        <img className="hero__logo reveal" src="assets/wheels-wordmark-cream-trim.png"
        alt="WHEELS" width="1600" height="292" />
        <h1 className="hero__tagline reveal">Sømløs bilutleie.</h1>
        <p className="hero__sub reveal">
          Finn bilen du trenger i nabolaget, lås den opp med mobilen, og kjør.
          Ingen nøkkelutveksling, ingen skranke.
        </p>
        <div className="hero__cta reveal">
          <Button as="a" href={GETAROUND} target="_blank" rel="noopener" size="lg"
          trailingIcon={<IconArrow size={18} />}>Lei en bil</Button>
          <Button as="a" href="#slik" size="lg" variant="onDark">Slik fungerer det</Button>
        </div>
      </div>
      <a href="#tall" className="hero__scroll reveal" aria-label="Bla ned">
        <span>Bla ned</span>
        <span className="hero__scrollLine" aria-hidden="true" />
      </a>
    </section>);

}

/* ---- Tall / stats ---- */
function Stats() {
  const items = [
  { n: '10+', l: 'biler i flåten' },
  { n: '500+', l: 'leieforhold' },
  { n: '4,5+', l: 'av 5 i rating', rating: true }];

  return (
    <section id="tall" className="band band--cream stats">
      <div className="wh-container">
        <span className="overline reveal stats__eyebrow">Wheels i tall</span>
        <h2 className="stats__head reveal">Tillit, bygget tur for tur.</h2>
        <div className="stats__grid">
          {items.map((it, i) =>
          <div className="stat reveal" key={it.l} style={{ transitionDelay: `${i * 90}ms` }}>
              <span className="stat__n wh-wordmark">{it.n}</span>
              <span className="stat__l">{it.l}</span>
              {it.rating && <div className="stat__stars"><Rating value={4.5} size={18} showNumber={false} /></div>}
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---- Vår flåte ---- */
const CARS = [
{
  name: 'Renault Trafic',
  year: 2015, type: 'Varebil', seats: '3 seter', fuel: 'Diesel',
  capacity: '6 m³', rating: 4.8, reviews: 40, price: 618,
  desc: 'Romslig varebil — ideell for flytting og transport av møbler.',
  feats: ['Aircondition', 'Tilhengerfeste', 'Vinterdekk'],
  img: 'https://drivy.gumlet.io/uploads/originals/4cc58738f61f1a4b6629b18929899ef8.jpg?compress=true&dpr=1&fm=auto&h=342&mode=crop&w=608',
  url: 'https://no.getaround.com/bilutleie/oslo/renault-trafic-1725576'
},
{
  name: 'Renault Clio',
  year: 2017, type: 'Personbil', seats: '5 seter', fuel: 'Bensin',
  capacity: null, rating: 4.6, reviews: 24, price: 563,
  desc: 'Drivstoffgjerrig bybil — lett å kjøre og lett å parkere.',
  feats: ['GPS', 'Aircondition', 'Cruisekontroll'],
  img: 'https://drivy.gumlet.io/uploads/originals/a9ec309c238922d41a4cb1c08ac6c1d8.jpg?compress=true&crop=focalpoint&dpr=1&fm=auto&h=342&mode=crop&w=608',
  url: 'https://no.getaround.com/bilutleie/oslo/renault-clio-1696823'
},
{
  name: 'Peugeot Expert',
  year: 2018, type: 'Varebil', seats: '3 seter', fuel: 'Diesel',
  capacity: '6 m³', rating: 4.6, reviews: 20, price: 675,
  desc: 'Stor lasteplass med ryggekamera — enkel å parkere i bybildet.',
  feats: ['Apple CarPlay', 'GPS', 'Tilhengerfeste'],
  img: 'https://drivy.gumlet.io/uploads/originals/e8655fcad0b2c8d048bf704f0dc6fff1.jpg?compress=true&dpr=1&fm=auto&h=342&mode=crop&w=608',
  url: 'https://no.getaround.com/bilutleie/oslo/peugeot-expert-1764392'
}];


function Fleet() {
  const { Badge, Rating } = DS;
  return (
    <section id="biler" className="band band--fleet fleet">
      <div className="wh-container">
        <span className="overline reveal fleet__eyebrow">Vår flåte</span>
        <h2 className="fleet__head reveal">Biler folk faktisk trenger.</h2>
        <div className="fleet__grid">
          {CARS.map((car, i) =>
          <a key={car.name} href={car.url} target="_blank" rel="noopener"
          className="carcard reveal" style={{ transitionDelay: `${i * 90}ms` }}>
              <div className="carcard__img">
                <img src={car.img} alt={car.name} loading="lazy" />
                <span className="carcard__type wh-overline">{car.type}</span>
              </div>
              <div className="carcard__body">
                <h3 className="carcard__name">{car.name}</h3>
                <p className="carcard__sub">{car.year} · {car.seats}{car.capacity ? ` · ${car.capacity}` : ''} · {car.fuel}</p>
                <div className="carcard__rating">
                  <Rating value={car.rating} count={car.reviews} size={14} onDark />
                </div>
                <div className="carcard__feats">
                  {car.feats.map((f) => <Badge key={f} variant="pill">{f}</Badge>)}
                </div>
                <div className="carcard__footer">
                  <span className="carcard__price">
                    <span className="carcard__kr">kr {car.price}</span><span className="carcard__unit">/dag</span>
                  </span>
                  <span className="carcard__cta">Reserver →</span>
                </div>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* ---- Slik fungerer det ---- */
function HowItWorks() {
  const steps = [
  { Icon: IconSearch, t: 'Finn bil', d: 'Søk opp en ledig bil i nærheten av deg — når det passer for deg.' },
  { Icon: IconPhone, t: 'Book via Getaround', d: 'Reserver og lås opp bilen rett fra Getaround-appen. Ingen nøkkelutveksling.' },
  { Icon: IconKey, t: 'Kjør', d: 'Hopp inn og kjør av gårde. Forsikring og veihjelp er inkludert.' }];

  return (
    <section id="slik" className="band band--dark how">
      <div className="wh-container">
        <span className="overline reveal how__eyebrow">Slik fungerer det</span>
        <h2 className="how__head reveal">Fra app til ratt på ett minutt.</h2>
        <ol className="how__grid">
          {steps.map((s, i) => (
            <li className="step reveal" key={s.t} style={{ transitionDelay: `${i * 110}ms` }}>
              <div className="step__top">
                <span className="step__bignum">{String(i+1).padStart(2,'0')}</span>
                <span className="step__icon"><s.Icon size={22} /></span>
              </div>
              <h3 className="step__t">{s.t}</h3>
              <p className="step__d">{s.d}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>);

}

/* ---- Hvorfor Wheels ---- */
function Why() {
  const points = [
  { Icon: IconKey, t: 'Nøkkelfri tilgang', d: 'Lås opp bilen med mobilen. Ingen nøkler, ingen møteavtaler.' },
  { Icon: IconShield, t: 'Trygt og forsikret', d: 'Forsikring og veihjelp følger med på hver eneste tur.' },
  { Icon: IconPin, t: 'Alltid i nærheten', d: 'Biler i nabolaget, klare når du trenger dem.' }];

  return (
    <section id="hvorfor" className="band band--cream why">
      <div className="wh-container">
        <div className="why__head reveal">
          <span className="overline">Hvorfor Wheels</span>
          <h2>Enkelt, trygt og nært.</h2>
        </div>
        <div className="why__grid">
          {points.map((p, i) =>
          <article className="point reveal" key={p.t} style={{ transitionDelay: `${i * 90}ms` }}>
              <span className="point__icon"><p.Icon size={24} /></span>
              <h3 className="point__t">{p.t}</h3>
              <p className="point__d">{p.d}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ---- Avslutning / CTA + kontakt ---- */
const EMAIL = 'wheels.norge@gmail.com';
const MAILTO = 'mailto:' + EMAIL + '?subject=' + encodeURIComponent('Henvendelse til Wheels');

function Closing() {
  return (
    <section id="kontakt" className="band band--dark closing">
      <div className="wh-container closing__inner">
        <div className="closing__lead reveal">
          <span className="overline">Klar når du er</span>
          <h2 className="closing__head">Bilen står klar.<br />Hopp inn.</h2>
          <p className="closing__sub">
            Start med Getaround, eller send oss en mail — så hjelper vi deg i gang.
          </p>
          <div className="closing__cta">
            <Button as="a" href={GETAROUND} target="_blank" rel="noopener" size="lg"
            trailingIcon={<IconArrow size={18} />}>Lei en bil på Getaround</Button>
          </div>
        </div>

        <div className="closing__form-wrap reveal">
          <div className="mailcard">
            <span className="mailcard__icon"><IconMail size={26} /></span>
            <p className="mailcard__title">Har du et spørsmål?</p>
            <p className="mailcard__sub">
              Send oss en mail, så svarer vi så fort vi kan. Vi hjelper deg med
              booking, biler og alt det praktiske.
            </p>
            <Button as="a" href={MAILTO} size="lg" block
            leadingIcon={<IconMail size={18} />}>Send oss en mail</Button>
            <span className="mailcard__addr">{EMAIL}</span>
          </div>
        </div>
      </div>

      <footer className="footer">
        <div className="wh-container footer__inner">
          <img className="footer__logo" src="assets/wheels-wordmark-cream-trim.png"
          alt="WHEELS" width="1600" height="292" />
          <div className="footer__meta">
            <span>Wheels AS · Bilutleie via Getaround</span>
            <nav className="footer__links">
              <a href="#slik">Slik fungerer det</a>
              <a href="#hvorfor">Hvorfor Wheels</a>
              <a href={GETAROUND} target="_blank" rel="noopener">Getaround</a>
            </nav>
          </div>
        </div>
      </footer>
    </section>);

}

function App() {
  useReveal();
  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Stats />
        <Fleet />
        <HowItWorks />
        <Why />
        <Closing />
      </main>
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);