// Visual sections for Rövhattens Åkeri (Highway 66 hi-fi).
const { useState, useEffect, useRef } = React;

/* ---------------- NAV ---------------- */
const Nav = ({ onHonk, onLogoClick }) => {
  const [menuOpen, setMenuOpen] = useState(false);
  const closeMenu = () => setMenuOpen(false);
  const navLinks = [
    { href: '#tjanster', label: 'TJÄNSTER' },
    { href: '#priser',   label: 'PRISER'   },
    { href: '#omdomen',  label: 'OMDÖMEN'  },
    { href: '#boka',     label: 'BOKA'     },
  ];
  return (
    <nav className="nav">
      <div className="lockup">
        <div className="mini" onClick={onLogoClick} title="prova att klicka..."></div>
        <span>RÖVHATTENS<br/><span className="star">★</span> ÅKERI</span>
      </div>
      <div className="links">
        {navLinks.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
      </div>
      <button
        className="nav-hamburger"
        aria-label="Öppna meny"
        aria-expanded={menuOpen}
        onClick={() => setMenuOpen(true)}
      >
        <span></span><span></span><span></span>
      </button>
      <button className="honk-btn" onClick={onHonk}>📣 TUT</button>
      {menuOpen && (
        <div className="nav-drawer" role="dialog" aria-modal="true">
          <div className="nav-drawer-backdrop" onClick={closeMenu}></div>
          <div className="nav-drawer-sheet">
            <button className="nav-drawer-close" aria-label="Stäng meny" onClick={closeMenu}>×</button>
            <div className="nav-drawer-links">
              {navLinks.map(l => (
                <a key={l.href} href={l.href} onClick={closeMenu}>{l.label}</a>
              ))}
            </div>
          </div>
        </div>
      )}
    </nav>
  );
};

/* ---------------- HERO ---------------- */
const Hero = ({ onHonk, mascotDance }) => (
  <header className="hero">
    <div className="hero-sky" />
    <div className="hero-sun" />
    <div className="hero-mountains" />
    <div className="hero-ground" />
    <div className="hero-road" />
    <div className="hero-inner">
      <span className="hero-kicker"><span className="star">★</span> EST. JUNI 2026 · KATRINEHOLM, SE <span className="star">★</span></span>
      <h1 className="hero-title">
        RÖVHATTEN'S
        <span className="row2">ÅKERI &amp; HAULING CO.</span>
      </h1>
      <p className="hero-sub">— DEN ENDA ÅKAREN MED EGEN BOWLINGKLUBB OCH C-KÖRKORT FRÅN I FÖRRGÅR —</p>
      <div className={"hero-mascot" + (mascotDance ? " dance" : "")} onClick={onHonk}></div>
      <div className="hero-cta-row">
        <button className="btn" onClick={onHonk}>🚛 HOPPA IN — VI KÖR!</button>
        <a href="#priser" className="btn alt" style={{textDecoration:'none'}}>SE PRISERNA ↓</a>
      </div>
    </div>
  </header>
);

/* ---------------- MARQUEE ---------------- */
const Marquee = ({ dark, items }) => {
  const arr = items || ['TUTAR', 'KÖR', 'LEVERERAR', 'TUTAR IGEN', 'BOWLAR PÅ RASTEN', 'GLÖMMER LASTEN'];
  const row = arr.concat(arr).map((t, i) => (
    <span key={i}><span className="star">★</span> {t} </span>
  ));
  return (
    <div className={"marquee" + (dark ? " dark" : "")}>
      <div className="marquee-track">{row}{row}</div>
    </div>
  );
};

/* ---------------- ASPHALT STRIP w/ driving truck ---------------- */
const AsphaltStrip = ({ fast }) => (
  <div className="asphalt-strip">
    <div className={"driving-truck" + (fast ? " fast" : "")} />
  </div>
);

/* ---------------- STATS ---------------- */
const useCountUp = (target, ms = 1200, decimals = 0) => {
  const [v, setV] = useState(0);
  const ref = useRef();
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        const start = performance.now();
        const factor = Math.pow(10, decimals);
        const tick = (now) => {
          const t = Math.min(1, (now - start) / ms);
          const eased = 1 - Math.pow(1 - t, 3);
          setV(Math.round(target * eased * factor) / factor);
          if (t < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
        io.disconnect();
      }
    });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [target, ms, decimals]);
  return [v, ref];
};

const Stat = ({ value, label, suffix, decimals = 0 }) => {
  const isNum = typeof value === 'number';
  const [v, ref] = useCountUp(isNum ? value : 0, 1200, decimals);
  const display = isNum ? v.toFixed(decimals).replace('.', ',') : value;
  return (
    <div className="stat" ref={ref}>
      <div className="stat-num">{display}{suffix || ''}</div>
      <div className="stat-label">{label}</div>
    </div>
  );
};

const Stats = () => (
  <section className="stats">
    <Stat value={1} label="lastbil i flottan" />
    <Stat value="∞" label="drömmar / vecka" />
    <Stat value={225.88} decimals={2} label="bowling-poäng (snitt)" />
    <Stat value={100} suffix="%" label="nöjda mammor" />
  </section>
);

/* ---------------- LIVE TRACKER ---------------- */
const cbMessages = [
  "10-4. Lastat. Mår bra.",
  "Tutade på en hare. Han tutar tillbaka.",
  "Stannar för en pilsner... eh, lättöl. Lättöl.",
  "Vart skulle jag igen?",
  "Janne ringde från Nyköping. Slog 248.",
  "Det luktar konstigt här bak.",
  "Glömde åt vilket håll Katrineholm ligger.",
  "Tar svängen till Nyköping. Bara en bowlingrunda. Sen kör jag.",
  "Tankar. Tar en korv. Är på väg.",
  "Mamma ringde. Sa att hon var stolt.",
  "ETA: imorgon. Eller övermorgon. Eller.",
];

const LiveTracker = () => {
  const [tick, setTick] = useState(0);
  const [feed, setFeed] = useState([
    { ts: '14:32', msg: cbMessages[0] },
    { ts: '14:18', msg: cbMessages[1] },
  ]);
  useEffect(() => {
    const t = setInterval(() => setTick(x => x + 1), 100);
    return () => clearInterval(t);
  }, []);
  useEffect(() => {
    const t = setInterval(() => {
      const now = new Date();
      const hh = String(now.getHours()).padStart(2, '0');
      const mm = String(now.getMinutes()).padStart(2, '0');
      const msg = cbMessages[Math.floor(Math.random() * cbMessages.length)];
      setFeed(f => [{ ts: hh + ':' + mm, msg }, ...f].slice(0, 5));
    }, 6500);
    return () => clearInterval(t);
  }, []);

  // truck position along a sinuous polyline
  const W = 700, H = 200;
  const path = [
    [30, 160], [120, 110], [220, 150], [320, 80], [420, 130], [520, 60], [620, 120], [680, 90]
  ];
  const i = (tick / 60) % (path.length - 1);
  const k = Math.floor(i), f = i - k;
  const p0 = path[k], p1 = path[k+1];
  const tx = p0[0] + (p1[0] - p0[0]) * f;
  const ty = p0[1] + (p1[1] - p0[1]) * f;
  const angle = Math.atan2(p1[1] - p0[1], p1[0] - p0[0]) * 180 / Math.PI;

  return (
    <section className="live">
      <div className="live-head">
        <div className="live-pulse" />
        <h2>LIVE SPÅRNING</h2>
        <div className="live-status">⌬ Senast pingad: just nu · Hastighet: 78 km/h · Riktning: ungefär norrut</div>
      </div>
      <div className="live-map">
        <svg viewBox={"0 0 " + W + " " + H} preserveAspectRatio="xMidYMid meet">
          {/* terrain */}
          <rect x="0" y="0" width={W} height={H} fill="transparent" />
          <g opacity=".35" fill="#5a8a4a">
            <circle cx="80"  cy="40" r="20"/>
            <circle cx="460" cy="30" r="14"/>
            <circle cx="170" cy="190" r="22"/>
            <circle cx="560" cy="180" r="18"/>
          </g>
          {/* route dashes */}
          <polyline
            points={path.map(p => p.join(',')).join(' ')}
            fill="none" stroke="#1a1410" strokeWidth="6" strokeLinecap="round"
            strokeDasharray="2 10"
          />
          {/* start + end markers */}
          <g>
            <circle cx={path[0][0]} cy={path[0][1]} r="10" fill="#1a1410" />
            <circle cx={path[0][0]} cy={path[0][1]} r="5"  fill="#f0c419" />
            <text x={path[0][0] + 14} y={path[0][1] + 5} fontFamily="Special Elite" fontSize="14" fill="#1a1410">KATRINEHOLM</text>
          </g>
          <g>
            <path d={`M${path[path.length-1][0]} ${path[path.length-1][1] - 22} l8 -8 l-30 0 z`} fill="#d83a2a" stroke="#1a1410" strokeWidth="2"/>
            <rect x={path[path.length-1][0] - 30} y={path[path.length-1][1] - 38} width="38" height="16" fill="#d83a2a" stroke="#1a1410" strokeWidth="2"/>
            <text x={path[path.length-1][0] - 25} y={path[path.length-1][1] - 27} fontFamily="Bebas Neue" fontSize="11" fill="#fff" letterSpacing="1">ICA</text>
          </g>
          {/* truck */}
          <g transform={`translate(${tx},${ty}) rotate(${angle})`}>
            <rect x="-16" y="-9" width="32" height="14" fill="#d83a2a" stroke="#1a1410" strokeWidth="2" rx="2"/>
            <rect x="6" y="-12" width="10" height="6" fill="#1a1410"/>
            <circle cx="-10" cy="6" r="3.5" fill="#1a1410"/>
            <circle cx="10"  cy="6" r="3.5" fill="#1a1410"/>
          </g>
        </svg>
      </div>
      <div className="live-info">
        <div className="cell">
          <b>{(78 + Math.sin(tick/8)*4).toFixed(0)} km/h</b>
          aktuell hastighet (n&auml;st&auml;n laglig)
        </div>
        <div className="cell">
          <b>{(12.4 + (tick * 0.0006)).toFixed(1)} L/100km</b>
          br&auml;nsle. mest fr&aring;n OKQ8.
        </div>
        <div className="cell">
          <b>ETA snart</b>
          ungef&auml;r. typ. snart-snart.
        </div>
      </div>
      <div className="dispatch-screen" style={{marginTop:14}}>
        <strong style={{color:'#bafa84'}}>CB CHATTER ↯</strong>
        <ul className="cb-feed">
          {feed.map((f, i) => (
            <li key={i}><span className="ts">[{f.ts}]</span>{f.msg}</li>
          ))}
        </ul>
      </div>
    </section>
  );
};

/* ---------------- TJÄNSTER ---------------- */
const services = [
  { h: 'Flytt-Light™', p: 'Vi flyttar dina små saker till din andra lilla plats. Lite tungt? Då tar vi en paus.', tag: 'fr. 499 :-', badge: null },
  { h: 'Hela Hipp som Happ', p: 'Hela hemmet. Bowlingklotet bärs separat och med vördnad.', tag: 'fr. 2 990 :-', badge: 'mest bokad' },
  { h: 'Late Night Run', p: 'Behöver du nåt levererat 02:47? Yes. Vi sover ändå inte.', tag: 'fr. 1 200 :-', badge: null },
  { h: 'Mystery Cargo', p: 'Du frågar inte. Vi frågar inte. ICA-kvitto medföljer som kamouflage.', tag: 'fr. ???', badge: '🤫' },
  { h: 'Bowling-Express', p: 'Klot, käglor, stinkande skor — och en hemlighet i klotpåsen. Frågar inte. Specialitet.', tag: 'fr. 300 :-', badge: null },
  { h: 'Studentflak™', p: 'Klätt flak, högtalare som hörs i Norrköping, chaufför som sjunger Vikingarna med er. Det här är hans dröm. Var snäll mot honom.', tag: 'fr. 5 000 :-', badge: 'säsong!' },
];

const Tjanster = () => (
  <section id="tjanster" className="sect">
    <div className="sect-head">
      <div className="sect-kicker">★ STOPS ALONG THE WAY ★</div>
      <h2 className="sect-h">VAD VI KÖR</h2>
      <p className="sect-sub">Allt utom det som är jobbigt. Vi reserverar oss för väder, humor och växellåda.</p>
    </div>
    <div className="billboards">
      {services.map((s, i) => (
        <div className="billboard" key={i}>
          {s.badge ? <span className="badge">{s.badge}</span> : null}
          <h3>{s.h}</h3>
          <p>{s.p}</p>
          <span className="price-tag">{s.tag}</span>
          <div className="pole"/>
        </div>
      ))}
    </div>
  </section>
);

/* ---------------- PRISER ---------------- */
const Priser = ({ onSpin }) => (
  <section id="priser" className="sect pricing-bg">
    <div className="sect-head">
      <div className="sect-kicker">★ PRISLISTA ★ GÄLLER FRÅN 7 JUNI 2026 ★</div>
      <h2 className="sect-h">VAD KOSTAR DET DÅ?</h2>
      <p className="sect-sub">Priser exklusive moms, snack och eventuell singalong.</p>
    </div>
    <div className="price-grid">
      <div className="price-card">
        <h3>STANDARD</h3>
        <div className="price">499<small> :- / timme</small></div>
        <ul>
          <li>Vi kommer (typ)</li>
          <li>Vi lastar (gärna)</li>
          <li>Vi kör (på rätt håll)</li>
          <li className="no">Inga frågor besvaras</li>
          <li className="no">Inga garantier</li>
        </ul>
        <button className="btn" onClick={onSpin}>BOKA STANDARD</button>
      </div>
      <div className="price-card featured">
        <div className="ribbon">★ MEST POPULÄR ★</div>
        <h3>PREMIUM HAT</h3>
        <div className="price">1 990<small> :- / dag</small></div>
        <ul>
          <li>Allt i Standard, plus:</li>
          <li>Cowboy-hatt hela tiden</li>
          <li>(1) tut vid ankomst</li>
          <li>En (1) korv från OKQ8 ingår</li>
          <li>Vi backar in i rätt uppfart på första försöket</li>
        </ul>
        <button className="btn dark" onClick={onSpin}>BOKA PREMIUM</button>
      </div>
      <div className="price-card">
        <h3>VIP KATRINEHOLM</h3>
        <div className="price">4 990<small> :- / dygn</small></div>
        <ul>
          <li>Vi kör <i>bara</i> dig</li>
          <li>Lunch på OKQ8</li>
          <li>Bowling efter</li>
          <li>Du väljer Spotify-spellistan</li>
          <li>Vi sjunger med (osökt)</li>
        </ul>
        <button className="btn gold" onClick={onSpin}>BOKA VIP</button>
      </div>
    </div>
  </section>
);

/* ---------------- OMDÖMEN ---------------- */
// TODO ★ PERSONALISERA ★ — byt ut de generiska omdömena mot riktiga citat
// från familj, klasskompisar, grannar, bowlinghäng. Behåll formatet:
//   { stars: 1-5, q: "citatet", who: "Namn, relation", a: "initial" }
// `a` är initialen som visas i avatar-rundeln.
const tms = [
  { stars: 5, q: "Han kom faktiskt fram. Med saker. Inom en vecka. Magiskt.", who: "Mamma Camilla", a: "C" },
  { stars: 5, q: "Han övade backning i 50 timmar. Backade sen ändå in i min bil. Charmen kvar dock.", who: "Martin, körlärare", a: "M" },
  { stars: 5, q: "Sa 'kör försiktigt'. Han tutade. Jag tutade tillbaka. Vi förstår varandra.", who: "Pappa Hasse", a: "H" },
  { stars: 5, q: "Levererade på fel adress men erbjöd kaffe så det blev bra.", who: "Bowling-Janne, Nyköping", a: "J" },
  { stars: 5, q: "Bästa eleven jag haft. Eller en av dem. Eller han var där, ja.", who: "Tisse, också körlärare", a: "T" },
  { stars: 4, q: "Stjärna avdragen för att han sjöng med på Vikingarna. Annars 5.", who: "Anonym kund", a: "?" },
  { stars: 3, q: "Han kör mig dit jag vill, när jag vill. Skickar räkning ändå. Min bror.", who: "Freja, syster", a: "F" },
  { stars: 5, q: "Han är roligast i hela familjen. Roligare än min hund. Jag åker med när som helst.", who: "Smilla, favoritkusin", a: "S" },
  { stars: 5, q: "Han har ett stort hjärta och en hatt som är för stor. Båda växer han nog i.", who: "Ingabritt, mormor", a: "I" },
];

const Omdomen = ({ onStars }) => (
  <section id="omdomen" className="sect tm-bg">
    <div className="sect-head">
      <div className="sect-kicker">★ VAD FOLK SÄGER ★</div>
      <h2 className="sect-h">4.97 / 5 STJÄRNOR</h2>
      <p className="sect-sub">Baserat på 9 omdömen från personer som inte vet bättre. (Klicka på stjärnorna.)</p>
    </div>
    <div className="tm-grid">
      {tms.map((t, i) => (
        <div className="tm" key={i}>
          <div className="stars-row" onClick={onStars}>{'★'.repeat(t.stars) + '☆'.repeat(5 - t.stars)}</div>
          <p className="quote">"{t.q}"</p>
          <div className="who"><span className="avatar">{t.a}</span>— {t.who}</div>
        </div>
      ))}
    </div>
  </section>
);

/* ---------------- BOKA / DISPATCH ---------------- */
const Boka = ({ onSubmit, screen }) => (
  <section id="boka" className="sect dispatch-bg">
    <div className="sect-head">
      <div className="sect-kicker">★ BOKA EN TRANSPORT ★</div>
      <h2 className="sect-h">DISPATCH OPEN 24/7*</h2>
      <p className="sect-sub">*Egentligen typ när Ted vaknar. Vi återkommer inom 3–14 arbetsdagar.</p>
    </div>
    <form className="dispatch" onSubmit={onSubmit}>
      <div className="dispatch-screen">
        <strong style={{color:'#bafa84'}}>UNIT 1 → BASE</strong><br/>
        {screen}
      </div>
      <div className="dispatch-form">
        <div>
          <label>NAMN</label>
          <input placeholder="Vad ska vi tuta?" required />
        </div>
        <div>
          <label>TELEFON</label>
          <input placeholder="070-xxx xx xx" />
        </div>
        <div>
          <label>FRÅN</label>
          <input placeholder="Stad / lada / motell" />
        </div>
        <div>
          <label>TILL</label>
          <input placeholder="Helst inom Sverige" />
        </div>
        <div className="full">
          <label>VAD SKA FRAKTAS?</label>
          <select defaultValue="">
            <option value="" disabled>Välj din transport...</option>
            <option>1 möbel jag inte orkar bära</option>
            <option>Bowlingutrustning</option>
            <option>Hela mitt liv (flytt)</option>
            <option>Något jag inte vill specificera</option>
            <option>En överraskning till Ted</option>
            <option>Annat (förklara i meddelandet)</option>
          </select>
        </div>
        <div className="full">
          <label>MEDDELANDE</label>
          <textarea placeholder="Är det tungt? Är det olagligt? Får jag bowla efteråt?"></textarea>
        </div>
        <div className="full">
          <button type="submit" className="dispatch-submit">→ SKICKA TILL DISPATCH</button>
        </div>
      </div>
    </form>
  </section>
);

/* ---------------- HYLLNING ---------------- */
const Hyllning = () => (
  <section className="hyll">
    <div className="hyll-cap">★ EN LITEN GREJ TILL CHEFEN ★</div>
    <h2>GRATTIS, TED!</h2>
    <p>
      Tre år på Fordon och transport på Duveholmsgymnasiet. Klass FT23,
      C-körkort, examen och timmar bakom ratten som hade räckt till halva
      Sveriges vägnät. Du klarade det.
    </p>
    <p>
      Vi har sett dig kämpa, vi har sett dig växa och vi har sett dig
      fälla strike efter strike på bowlinghallen som om kloten lyder
      dig personligen. Vi vet hur tufft det varit ibland. Det är just
      därför vi står här idag och nästan inte får fram orden.
    </p>
    <p>
      Du är en av de finaste, roligaste och mest omtänksamma personerna
      vi känner, Ted. Vi är så stolta över dig att det knappt får plats.
    </p>
    <p>
      Nu kör du. Bokstavligen.
    </p>
    <div className="sig">Catrine, Andreas och Smilla</div>
  </section>
);

/* ---------------- FOOTER ---------------- */
const Footer = ({ visits, onSecret }) => (
  <footer className="footer">
    <div className="ftr-brand">
      <div className="ftr-mini"></div>
      <div>
        <div className="name">RÖVHATTENS ÅKERI AB</div>
        <div className="blurb">
          Sveriges yngsta åkeri sedan i förrgår. Vi tutar oss fram. Vi
          levererar (oftast). Vi är så stolta över dig, Ted.
        </div>
        <div style={{fontSize:11,opacity:.55,marginTop:8,fontStyle:"italic",lineHeight:1.4}}>Sidan byggd av Andreas (vet ungefär hur kod fungerar).</div>
        <div style={{marginTop:10}} className="visit-counter">
          ⊙ {String(visits).padStart(7, '0')}
        </div>
      </div>
    </div>
    <div>
      <h5>KONTOR</h5>
      <ul>
        <li>Box 1, 641 00 Katrineholm</li>
        <li>ted@rövhattensåkeri.se</li>
        <li>+46 70-TUT-TUT-1</li>
        <li>Öppet: när han är vaken</li>
      </ul>
    </div>
    <div>
      <h5>SOCIAL</h5>
      <ul>
        <li>@rövhatten (privat)</li>
        <li>CB-kanal 19</li>
        <li>OKQ8 Katrineholm (lunch)</li>
        <li>Bowlinghallen Nyköping (av outgrundliga skäl)</li>
        <li><span className="secret-pin" onClick={onSecret}>★ Hemlig länk</span></li>
      </ul>
    </div>
  </footer>
);

Object.assign(window, {
  Nav, Hero, Marquee, AsphaltStrip, Stats, LiveTracker,
  Tjanster, Priser, Omdomen, Boka, Hyllning, Footer
});