/* global React, DCIcons, DCRegSearch, DCTire */
const { IconArrow, IconArrowUR, IconCheck, IconPlus, IconShield, IconSpark, IconLeaf,
  IconBox, IconWrench, IconGauge, IconTarget, IconRefresh, IconStar, IconTire, IconTireDetailed, IconRim,
  IconPin, IconPhone, IconMail, IconClock, IconFB, IconIG, IconYT,
  IconPuncture, IconTireStack, IconPatch, IconAlign } = DCIcons;

/* ── Logo cloud (infinite slider, mask gradient) ── */
function Marquee() {
  // Brand wordmarks. Real PNG images (auto-cropped to tight bounds) where
  // we have them; stylized SVG fallbacks for brands without an upload.
  // Heights are tuned per-logo for optical balance: tall stacked logos
  // (mascot+wordmark) get more pixels so the wordmark itself reads roughly
  // the same size as wordmark-only marks.
  const img = (src, h, alt) =>
  <img src={src} alt={alt}
  style={{ height: h, width: "auto", display: "block" }} />;

  const items = [
  // Heights are calibrated so each wordmark reads at roughly the same
  // optical x-height. Stacked marks (mark + wordmark) get more pixels
  // because their wordmark is only the bottom portion of the artwork.
  { name: "Continental", svg: img("assets/logos/continental.png", 32, "Continental") },
  { name: "MICHELIN", svg: img("assets/logos/michelin.png", 52, "Michelin") },
  { name: "Pirelli", svg: img("assets/logos/pirelli.png", 34, "Pirelli") },
  {
    name: "BRIDGESTONE",
    svg:
    <svg viewBox="0 0 240 40" height="32" aria-label="BRIDGESTONE">
          <rect x="2" y="6" width="28" height="28" rx="2" fill="#E60012" />
          <text x="16" y="28" textAnchor="middle" fontFamily="Inter Tight, Inter, sans-serif"
      fontSize="22" fontWeight="900" fill="#FFF">B</text>
          <text x="38" y="28" fontFamily="Inter Tight, Inter, sans-serif"
      fontSize="22" fontWeight="900" fill="#0E0E10" letterSpacing="1">
            BRIDGESTONE
          </text>
        </svg>

  },
  { name: "GOODYEAR", svg: img("assets/logos/goodyear.png", 32, "Goodyear") },
  { name: "Nokian Tyres", svg: img("assets/logos/nokian.png", 38, "Nokian Tyres") },
  {
    name: "Hankook",
    svg:
    <svg viewBox="0 0 200 40" height="34" aria-label="Hankook">
          <text x="0" y="29" fontFamily="Inter Tight, Inter, sans-serif"
      fontSize="30" fontWeight="800" fill="#E5251D" letterSpacing="-.3"
      style={{ fontStyle: "italic" }}>
            Hankook
          </text>
        </svg>

  },
  { name: "Dunlop", svg: img("assets/logos/dunlop.png", 30, "Dunlop") },
  { name: "VREDESTEIN", svg: img("assets/logos/vredestein.png", 46, "Vredestein") },
  { name: "YOKOHAMA", svg: img("assets/logos/yokohama.png", 28, "Yokohama") },
  { name: "Kumho Tyres", svg: img("assets/logos/kumho.png", 38, "Kumho Tyres") }];

  const all = [...items, ...items];
  return (
    <div className="logocloud" aria-hidden>
      <div className="logocloud-track">
        {all.map((x, i) =>
        <span className="logocloud-item logocloud-item-svg" key={i} title={x.name}>
            {x.svg}
          </span>
        )}
      </div>
    </div>);

}

/* ── Services cards ── */
const SERVICES = [
{ num: "01", icon: <IconTireDetailed size={36} stroke={1.5} />, name: "Däckskifte", desc: "Skifte och kontroll. Drop-in eller bokad tid.", from: "400 kr", href: "tjanst-dackskifte.html" },
{ num: "02", icon: <IconTireStack size={36} stroke={1.5} />, name: "Däckhotell", desc: "Vi förvarar dina däck — tvättat, märkt och redo till nästa säsong.", from: "699 kr", href: "dackhotell.html" },
{ num: "03", icon: <IconPuncture size={36} stroke={1.5} />, name: "Punktering", desc: "Snabb kontroll och bedömning. Oftast medan du väntar.", from: "250 kr", href: "tjanst-punktering.html" },
{ num: "04", icon: <IconWrench size={36} stroke={1.5} />, name: "Montering & balansering", desc: "Vi monterar och balanserar dina däck — snabbt och exakt.", from: "200 kr", href: "tjanst-lagning.html" },
{ num: "05", icon: <IconAlign size={36} stroke={1.5} />, name: "Hjulinställning", desc: "Fyrhjulsinställning med Hunter-maskin — den bästa på marknaden.", from: "995 kr", href: "tjanst-hjulinstallning.html" },
{ num: "06", icon: <IconRim size={36} stroke={1.5} />, name: "Fälgrenovering", desc: "Våt- och pulverlackering av aluminium- och stålfälg i egen verkstad.", from: "offert", href: "tjanst-falgrenovering.html" }];


function Services() {
  return (
    <section className="services" id="tjanster">
      <div className="container">
        <div className="section-head">
          <div>
            <h2 className="services-h2" style={{ marginTop: 0 }}>
              <span className="vt-word">Våra</span><span className="vt-word vt-word--accent">tjänster</span>
            </h2>
          </div>
          <p className="sub">Från däckskifte till hjulinställning — allt utfört i vår verkstad i Helsingborg av vårt erfarna team.</p>
        </div>
        <div className="service-cards">
          {SERVICES.map((s) =>
          <a href={s.href} className="service-card reveal" key={s.num}>
              <div className="sc-icon-wrap">
                <span className="sc-icon-bg" aria-hidden="true"></span>
                <span className="sc-icon">{s.icon}</span>
              </div>
              <h3 className="sc-title">{s.name}</h3>
              <p className="sc-desc">{s.desc}</p>
              <div className="sc-foot">
                {s.from === "offert" ?
              <span className="sc-price">Kontakta oss för <b>offert</b></span> :
              <span className="sc-price">Från <b>{s.from}</b></span>}
                <span className="sc-cta">
                  Läs mer
                  <span className="sc-cta-arrow" aria-hidden="true"><IconArrow size={14} /></span>
                </span>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* ── Reg banner #2 ── */
function RegBanner() {
  return (
    <section className="regbanner">
      <div className="container">
        <div className="regbanner-inner">
          <div>
            <span className="eyebrow" style={{ color: "rgba(255,255,255,.6)" }}>Sök på regnummer</span>
            <h2 style={{ marginTop: 14 }}>
              Skriv in regnumret —<br />
              <em>vi visar vad som passar.</em>
            </h2>
            <p>Vi matchar dina hjul mot däck, fälg och kompletta hjul i sortimentet. Helt gratis, ingen registrering.</p>
            <DCRegSearch label="Ditt regnummer" dark
            help="Vi sparar inget — sökningen sker bara här." />
          </div>
          <div className="regbanner-visual">
            <DCTire size="78%" />
          </div>
        </div>
      </div>
    </section>);

}

/* ── Däckhotell push ── */
function HotelPush() {
  return (
    <section className="hotel">
      <div className="container">
        <div className="hotel-card">
          <div className="hotel-content">
            <span className="eyebrow">Däckhotell</span>
            <h2>Lämna in dina däck — vi tar hand om resten.</h2>
            <p className="lede">
              Tvättat, märkt och förvarat i temperaturkontrollerat lager. När säsongen vänder skickar vi sms och hör av oss — boka enkelt din tid online.
            </p>
            <ul className="hotel-features">
              <li><IconCheck size={18} /> Tvätt &amp; kontroll vid inlämning</li>
              <li><IconCheck size={18} /> Klimatlager — slipp sprickor</li>
              <li><IconCheck size={18} /> Påminnelse innan säsongsskifte</li>
              <li><IconCheck size={18} /> 4 hjul från 699 kr / säsong</li>
            </ul>
            <div className="hotel-cta">
              <a href="dackhotell.html" className="btn btn-accent">Läs mer om däckhotell <span className="arrow"><IconArrow size={16} /></span></a>
              <a href="https://booking.eontyre.com/511" target="_blank" rel="noopener" data-no-loader="true" className="btn btn-ghost">Boka inlämning</a>
            </div>
          </div>
          <div className="hotel-visual">
            <image-slot
              id="hotel-photo"
              shape="rect"
              placeholder="Dra hit en bild av däckhotellet — rader av däck på lagret"
              style={{ width: "100%", height: "100%", display: "block" }}>
            </image-slot>
          </div>
        </div>
      </div>
    </section>);

}

/* ── About teaser ── */
function AboutTeaser() {
  return (
    <section className="about" id="om-oss">
      <div className="container">
        <div className="about-grid">
          <div className="about-img">
            <img src="assets/dackcentrum-facade.jpg" alt="Däckcentrum verkstaden i Helsingborg" loading="lazy" />
          </div>
          <div>
            <span className="eyebrow">Om oss</span>
            <h2 style={{ marginTop: 14 }}>Verkstad <em style={{ fontStyle: "italic", fontWeight: 500, color: "var(--ink-3)" }}>under ett tak</em>.</h2>
            <p className="about-lede">Däckcentrum är en däck- och fälgverkstad på Berga i Helsingborg sedan 2004. Vi gör allt under ett tak — från däckskifte och hjulinställning till fälgrenovering och däckhotell.

            </p>
            <ul className="about-bullets">
              <li><b>22+ år</b> i branschen — vi har sett det mesta som hjul kan råka ut för</li>
              <li><b>155 000+</b> nöjda kunder — bilägare i hela Skåne</li>
              <li><b>1,5 miljoner+</b> däck &amp; fälg att välja mellan</li>
            </ul>
            <a href="om-oss.html" data-no-loader="true" className="link-arrow">Läs hela historien <IconArrow size={16} /></a>
          </div>
        </div>
      </div>
    </section>);

}

/* ── FAQ ── */
const FAQS = [
{ q: "När ska jag byta till sommardäck?", a: "När dygnsmedeltemperaturen stadigt ligger över +7 °C — i Skåne brukar det vara från mitten av april. Vinterdäck är tillåtna fram till 15 april." },
{ q: "När måste jag sätta på vinterdäcken?", a: "Vinterdäck är lagstadgade 1 december – 31 mars om vinterväglag råder (snö, is, slask eller frost). Många byter redan i november för säkerhets skull." },
{ q: "Vad kostar däckskifte hos er?", a: "Hjulskifte (skifte på fälg) börjar på 400 kr. För omontering med nya däck tillkommer monteringspriset — vi ger alltid totalpris innan vi påbörjar arbetet." },
{ q: "Hur fungerar däckhotellet?", a: "Du lämnar in dina hjul, vi tvättar, kontrollerar slitage och märker upp dem. När säsongen vänder skickar vi automatiskt sms-påminnelse och kallar in dig för skifte. Från 599 kr / säsong." },
{ q: "Behöver jag boka tid för punktering?", a: "Vanligtvis tar vi emot drop-in för punktering — men boka gärna online för att slippa väntetid." },
{ q: "Hur bokar jag hjulinställning?", a: "Hjulinställning är tidskrävande och måste bokas i förväg — ring oss på 042-16 08 39 så hittar vi en tid som passar." },
{ q: "Kan ni renovera mina fälgar?", a: "Absolut. Maila oss bilder och en kort beskrivning av skadorna på info@dc.se så återkommer vi med offert inom 24 timmar. Du kan också komma förbi verkstaden på Muskötgatan 2 så ger vi offert på plats." }];


function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div className="faq-side">
            <span className="eyebrow">Vanliga frågor</span>
            <h2 style={{ marginTop: 14 }}>Frågor vi får — varje vecka.</h2>
            <p>Hittar du inte svaret? Ring oss på 042-16 08 39 eller kom förbi verkstaden på Muskötgatan 2 i Helsingborg.</p>
          </div>
          <div className="faq-list">
            {FAQS.map((f, i) =>
            <div className="faq-item" key={i} data-open={open === i}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="faq-toggle"><IconPlus size={16} /></span>
                </button>
                <div className="faq-a"><div><p>{f.a}</p></div></div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ── Contact + map (Google Maps embed) ── */
function DCMap() {
  // Embed iframe of the actual Däckcentrum pin in Helsingborg.
  // Standard /maps/embed iframe — works without API key for basic display + pan/zoom.
  const src = "https://www.google.com/maps?q=D%C3%A4ckcentrum+Helsingborg+Musk%C3%B6tgatan+2&hl=sv&z=13&output=embed";
  return (
    <div className="map map--embed">
      <iframe
        className="map-iframe"
        src={src}
        title="Däckcentrum Helsingborg på karta"
        loading="lazy"
        referrerPolicy="no-referrer-when-downgrade"
        allowFullScreen="" />
      
      <div className="map-card" role="region" aria-label="Däckcentrum adress">
        <div className="map-card-tag">
          <span className="map-card-dot" aria-hidden="true" />
          Däckcentrum Helsingborg
        </div>
        <div className="map-card-addr">
          <div>Muskötgatan 2</div>
          <div>254 66 Helsingborg</div>
        </div>
        <a
          className="map-card-cta"
          href="https://www.google.com/maps/place/D%C3%A4ckcentrum+Helsingborg/@56.0729736,12.7129631,16z/data=!3m1!4b1!4m6!3m5!1s0x4652326da6c9c4a7:0xfcf5087f9799a561!8m2!3d56.0729736!4d12.715538!16s%2Fg%2F11ggs_23jg?entry=ttu&g_ep=EgoyMDI2MDUyMC4wIKXMDSoASAFQAw%3D%3D"
          target="_blank"
          rel="noopener noreferrer"
          data-no-loader="true">
          
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M12 2 L22 12 L12 22 L2 12 Z" />
            <path d="M9 12 L11 14 L15 10" />
          </svg>
          Hitta hit
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M5 12 H19 M13 6 L19 12 L13 18" />
          </svg>
        </a>
      </div>
    </div>);

}

/* ── Contact + map ── */
function Contact() {
  return (
    <section className="contact" id="kontakt">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Kontakta oss</span>
            <h2 style={{ marginTop: 14 }}>Kom förbi —<br />eller ring.</h2>
          </div>
          <p className="sub">Vi sitter på Muskötgatan 2 i Helsingborg, drop-in välkommet under öppettider.</p>
        </div>
        <div className="contact-grid">
          <div className="contact-card">
            <div className="contact-info">
              <div className="contact-info-row">
                <IconPin size={20} />
                <div>
                  <div className="label">Adress</div>
                  <div className="value">Muskötgatan 2, 254 66 Helsingborg</div>
                </div>
              </div>
              <div className="contact-info-row">
                <IconPhone size={20} />
                <div>
                  <div className="label">Telefon</div>
                  <div className="value"><a href="tel:0421608839">042-16 08 39</a></div>
                </div>
              </div>
              <div className="contact-info-row">
                <IconMail size={20} />
                <div>
                  <div className="label">E-post</div>
                  <div className="value"><a href="mailto:info@dc.se">info@dc.se</a></div>
                </div>
              </div>
              <div className="contact-info-row">
                <IconClock size={20} />
                <div style={{ flex: 1 }}>
                  <div className="label">Öppettider</div>
                  <div className="contact-hours">
                    <div className="row today"><span>Mån–Fre</span><span>08–18</span></div>
                    <div className="row"><span>Lördag</span><span>09–14</span></div>
                    <div className="row"><span>Söndag</span><span>Stängt</span></div>
                  </div>
                </div>
              </div>
            </div>
            <a href="https://booking.eontyre.com/511" target="_blank" rel="noopener" data-no-loader="true" className="btn btn-accent" style={{ alignSelf: "flex-start" }}>
              Boka tid online <span className="arrow"><IconArrow size={16} /></span>
            </a>
          </div>
          <DCMap />
        </div>
      </div>
    </section>);

}

/* ── CTA strip ── */
function CTAStrip() {
  return (
    <section className="cta-strip" id="boka">
      <div className="container">
        <div className="cta-strip-inner">
          <span className="eyebrow" style={{ color: "var(--accent-ink)" }}>
</span>
          <h2 style={{ marginTop: 14 }}>Boka <em>direkt</em> — vi <em>hör av oss</em>.</h2>
          <p>Välj tjänst, datum och tid. Får du inte plats den dagen ringer vi dig så vi hittar något som funkar.</p>
          <div className="cta-services">
            {[["Däckskifte", "tjanst-dackskifte.html"],
            ["Däckhotell", "dackhotell.html"],
            ["Punktering", "tjanst-punktering.html"],
            ["Montering & balansering", "tjanst-lagning.html"],
            ["Hjulinställning", "tjanst-hjulinstallning.html"],
            ["Fälgrenovering", "tjanst-falgrenovering.html"]].
            map(([s, h]) =>
            <a key={s} href={h} className="cta-pill">{s}</a>
            )}
          </div>
          <a href="https://booking.eontyre.com/511" target="_blank" rel="noopener" data-no-loader="true" className="btn btn-dark">Öppna bokning <span className="arrow"><IconArrow size={16} /></span></a>
        </div>
      </div>
    </section>);

}

/* ── Footer ── */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <span className="brand-logo"><span className="d1" style={{ color: "#FFF" }}>D</span><span style={{ color: "#FFF" }}>äckcentrum</span></span>
            <p>Din auktoriserade däck- och fälgverkstad i Helsingborg. Allt under ett tak — verkstad, butik, däckhotell.</p>
            <form className="footer-newsletter" onSubmit={(e) => e.preventDefault()}>
              <input type="email" placeholder="din@email.se" />
              <button type="submit">Prenumerera</button>
            </form>
          </div>
          <div className="footer-col">
            <h4>Sortiment</h4>
            <ul>
              <li><a href="dack.html">Däck</a></li>
              <li><a href="falg.html">Fälg</a></li>
              <li><a href="kompletta-hjul.html">Kompletta hjul</a></li>
              <li><a href="dc-wheels.html">DC Wheels</a></li>
              <li><a href="dack.html#kampanjer">Kampanjer</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Tjänster</h4>
            <ul>
              <li><a href="tjanst-dackskifte.html">Däckskifte</a></li>
              <li><a href="dackhotell.html">Däckhotell</a></li>
              <li><a href="tjanst-punktering.html">Punktering</a></li>
              <li><a href="tjanst-lagning.html">Lagning</a></li>
              <li><a href="tjanst-hjulinstallning.html">Hjulinställning</a></li>
              <li><a href="tjanst-falgrenovering.html">Fälgrenovering</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Företaget</h4>
            <ul>
              <li><a href="om-oss.html">Om oss</a></li>
              <li><a href="kontakta-oss.html">Kontakt</a></li>
              <li><a href="mitt-konto.html">Mitt konto</a></li>
              <li><a href="faq.html">FAQ</a></li>
              <li><a href="lediga-jobb.html">Lediga jobb</a></li>
              <li><a href="aterforsaljare.html">Återförsäljare</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Kontakt</h4>
            <ul>
              <li>Muskötgatan 2<br />254 66 Helsingborg</li>
              <li><a href="tel:0421608839">042-16 08 39</a></li>
              <li><a href="mailto:info@dc.se">info@dc.se</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Däck Centrum i Helsingborg AB · Org.nr 559116-9536</div>
          <div className="footer-legal">
            <a href="integritetspolicy.html">Integritetspolicy</a>
            <a href="cookies.html">Cookies</a>
            <a href="kopvillkor.html">Köpvillkor</a>
            <a href="valj-kategori.html">Snabbsök</a>
          </div>
          <div className="footer-social">
            <a href="https://www.facebook.com/" target="_blank" rel="noopener" aria-label="Facebook"><IconFB size={16} /></a>
            <a href="https://www.instagram.com/" target="_blank" rel="noopener" aria-label="Instagram"><IconIG size={16} /></a>
            <a href="https://www.youtube.com/" target="_blank" rel="noopener" aria-label="Youtube"><IconYT size={16} /></a>
          </div>
        </div>
      </div>
    </footer>);

}

window.DCSections = { Marquee, Services, RegBanner, HotelPush, AboutTeaser, FAQ, Contact, CTAStrip, Footer };