/* global React, DCIcons, DCTire, DCTireRealistic, DCRegSearch */
const { IconArrow, IconShield, IconSpark, IconLeaf, IconCheck } = DCIcons;

function CountUp({ to, duration = 1600, suffix = "", prefix = "" }) {
  const [v, setV] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;if (!el) return;
    let raf,started = false;
    const io = new IntersectionObserver((es) => {
      if (es[0].isIntersecting && !started) {
        started = true;
        const t0 = performance.now();
        const step = (t) => {
          const p = Math.min(1, (t - t0) / duration);
          const eased = 1 - Math.pow(1 - p, 3);
          setV(Math.round(eased * to));
          if (p < 1) raf = requestAnimationFrame(step);
        };
        raf = requestAnimationFrame(step);
      }
    }, { threshold: .4 });
    io.observe(el);
    return () => {io.disconnect();if (raf) cancelAnimationFrame(raf);};
  }, [to, duration]);
  return <span ref={ref}>{prefix}{v.toLocaleString("sv-SE")}{suffix}</span>;
}

function HeroEyebrow({ children }) {
  return <div className="hero-eyebrow"><span className="dot" />{children}</div>;
}

function HeroStats({ items }) {
  return (
    <div className="hero-stats">
      {items.map((s, i) =>
      <div className="hero-stat" key={i}>
          <div className="num">{s.num}{s.plus && <span className="plus">+</span>}</div>
          <div className="label">{s.label}</div>
        </div>
      )}
    </div>);

}

/* ── Variant 1: classic light "allt under ett tak" ── */
function HeroV1() {
  return (
    <section className="hero" data-variant="1">
      <div className="container hero-grid">
        <div className="hero-text">
          <a href="#kontakt" className="hero-eyebrow hero-eyebrow-link hero-eyebrow-pulse">
            <span className="dot" />
            <strong>Vi finns i Helsingborg</strong>&nbsp;— hitta oss
            <span className="arrow"><IconArrow size={14} /></span>
          </a>
          <h1 className="reveal in hero-fx-h1">
            <span className="ink">Däck, fälg</span><br />
            <span className="hero-fx-word">hjulservice</span>
          </h1>
          <p className="hero-lede reveal in" data-delay="2">Hos oss får du hjälp med allt från däckskifte, däckhotell och hjulinställning till montering, balansering, fälgar och fälgrenovering — samlat på ett och samma ställe.


          </p>
          <div className="hero-cta reveal in" data-delay="3">
            <a href="https://booking.eontyre.com/511" target="_blank" rel="noopener" data-no-loader="true" className="btn btn-accent">Boka tid <span className="arrow"><IconArrow size={16} /></span></a>
            <a href="#tjanster" className="btn btn-ghost">Se tjänster</a>
          </div>
          <DCRegSearch label="Sök på regnummer (valfritt)" help="Hitta däck och fälg som passar exakt din bil." />
          <div style={{ height: 36 }} />
          <HeroStats items={[
          { num: <CountUp to={22} suffix=" år" />, label: "i branschen" },
          { num: <CountUp to={155000} />, plus: true, label: "nöjda kunder" },
          { num: <span>1,5M</span>, plus: true, label: <>däck & fälg</> }]
          } />
        </div>
        <div className="hero-visual reveal in" data-delay="2">
          <window.DCHeroLoop />
          <div className="hero-card c1">
            <div className="ic ic-shield">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                <path d="M12 3 L20 6 V12 C20 16.5 16.5 20 12 21 C7.5 20 4 16.5 4 12 V6 Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
                <path d="M9 12 L11 14 L15 10" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            <div><div className="t">14 dagars öppet köp</div><div className="s">på alla däck &amp; fälg</div></div>
          </div>
          <div className="hero-card c2">
            <div className="ic ic-tire">
              <svg width="26" height="26" viewBox="0 0 32 32" fill="none">
                {/* Outer tire */}
                <circle cx="16" cy="16" r="14" fill="#e8e8e6" stroke="#9b9ba0" strokeWidth="1" />
                {/* Tread blocks — 8 around */}
                {Array.from({ length: 8 }).map((_, i) => {
                  const a = i * 45 * Math.PI / 180;
                  const x1 = 16 + Math.cos(a) * 11;
                  const y1 = 16 + Math.sin(a) * 11;
                  const x2 = 16 + Math.cos(a) * 13.5;
                  const y2 = 16 + Math.sin(a) * 13.5;
                  return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#6e6e75" strokeWidth="1.4" strokeLinecap="round" />;
                })}
                {/* Inner sidewall */}
                <circle cx="16" cy="16" r="9" fill="#f4f4f1" stroke="#b8b8be" strokeWidth="0.8" />
                {/* Hub */}
                <circle cx="16" cy="16" r="5" fill="#cfcfd2" stroke="#8a8a90" strokeWidth="0.6" />
                {/* Spokes */}
                {[0, 60, 120, 180, 240, 300].map((deg) => {
                  const a = deg * Math.PI / 180;
                  const x2 = 16 + Math.cos(a) * 4.5;
                  const y2 = 16 + Math.sin(a) * 4.5;
                  return <line key={deg} x1="16" y1="16" x2={x2} y2={y2} stroke="#7e7e86" strokeWidth="0.7" strokeLinecap="round" />;
                })}
                <circle cx="16" cy="16" r="1.4" fill="#3a3a40" />
              </svg>
            </div>
            <div><div className="t">Däckskifte</div><div className="s">Från 400 kronor</div></div>
          </div>
          <div className="hero-card c3">
            <div className="ic ic-hotel">
              <svg width="26" height="26" viewBox="0 0 32 32" fill="none">
                {/* Stacked tires from side — 3 rings */}
                <ellipse cx="16" cy="22" rx="11" ry="3" fill="#1a1a1d" />
                <ellipse cx="16" cy="22" rx="11" ry="3" fill="none" stroke="#3aa959" strokeWidth="0.6" />
                <ellipse cx="16" cy="16" rx="11" ry="3" fill="#1a1a1d" />
                <ellipse cx="16" cy="16" rx="11" ry="3" fill="none" stroke="#3aa959" strokeWidth="0.6" />
                <ellipse cx="16" cy="10" rx="11" ry="3" fill="#1a1a1d" />
                <ellipse cx="16" cy="10" rx="11" ry="3" fill="none" stroke="#3aa959" strokeWidth="0.6" />
                {/* Tag/label on top */}
                <rect x="20" y="6" width="6" height="3" rx="0.6" fill="#3aa959" />
              </svg>
            </div>
            <div><div className="t">Däckhotell</div><div className="s">från 699 kr / säsong</div></div>
          </div>

        </div>
      </div>
    </section>);

}

/* ── Variant 2: dark — "boka tid för säsongen" ── */
function HeroV2() {
  return (
    <section className="hero" data-variant="2">
      <div className="container hero-grid">
        <div className="hero-text">
          <HeroEyebrow><strong>Vårens däckskifte är öppet</strong> — vi hinner ta emot dig denna vecka</HeroEyebrow>
          <h1>
            <span className="ink">Vi tar hand om</span><br />
            <em>varje millimeter —</em><br />
            <span className="ink">så du kommer fram.</span>
          </h1>
          <p className="hero-lede">
            Däckskifte, balansering, hjulinställning, punktering och däckhotell.
            En verkstad. Ett team. Tjugo minuter från E4:an.
          </p>
          <div className="hero-cta">
            <a href="https://booking.eontyre.com/511" target="_blank" rel="noopener" data-no-loader="true" className="btn btn-accent">Boka tid nu <span className="arrow"><IconArrow size={16} /></span></a>
            <a href="#tjanster" className="btn btn-ghost">Våra tjänster</a>
          </div>
          <DCRegSearch label="Sök på regnummer" dark
          help="Visar däck och fälg som passar din bil." />
          <div style={{ height: 36 }} />
          <HeroStats items={[
          { num: <CountUp to={20} suffix=" min" />, label: "från E4" },
          { num: <CountUp to={6} />, label: "verkstadsplatser" },
          { num: <CountUp to={400} prefix="" suffix=" kr" />, label: "däckskifte fr." }]
          } />
        </div>
        <div className="hero-visual">
          <DCTire size="92%" className="hero-tire" style={{ top: "4%", left: "4%" }} />
          <div className="hero-card c1">
            <div className="ic"><IconCheck size={18} /></div>
            <div><div className="t">Lediga tider denna vecka</div><div className="s">Mån–fre 08–18</div></div>
          </div>
          <div className="hero-card c2">
            <div className="ic dark"><IconSpark size={18} /></div>
            <div><div className="t">Hjulinställning</div><div className="s">3D-mätning, 4 hjul</div></div>
          </div>
        </div>
      </div>
    </section>);

}

/* ── Variant 3: editorial — big type "Däckcentrum" ── */
function HeroV3() {
  return (
    <section className="hero" data-variant="3">
      <div className="container">
        <div className="hero-grid">
          <div>
            <HeroEyebrow><strong>Helsingborgs däckverkstad</strong> · auktoriserad</HeroEyebrow>
            <h1>
              Däck. Fälg.<br />
              <em>Kvalitet</em> <span className="underline-accent">under ett tak</span>.
            </h1>
            <p className="hero-lede">
              Allt under ett tak — från första däcket vi rullade in till sista bulten vi drar.
            </p>
            <div className="hero-cta">
              <a href="https://booking.eontyre.com/511" target="_blank" rel="noopener" data-no-loader="true" className="btn btn-accent">Boka tid <span className="arrow"><IconArrow size={16} /></span></a>
              <a href="#tjanster" className="btn btn-ghost">Se sortiment</a>
            </div>
          </div>
        </div>
        <div className="hero-bottom">
          <div className="img tall">FOTO · Verkstad</div>
          <div className="center">
            <DCTire size="86%" className="hero-tire" />
          </div>
          <div>
            <div className="img" style={{ aspectRatio: "3/4" }}>FOTO · Däck</div>
            <div style={{ height: 24 }} />
            <DCRegSearch label="Sök regnummer" help="Hitta produkter som passar din bil." />
          </div>
        </div>
      </div>
    </section>);

}

window.DCHero = { HeroV1, HeroV2, HeroV3 };