// Over ons — story + team + certificaten + apparatuur
function Over({ onNav }) {
  const diplomas = [
    "MBO Technisch Specialist Personenauto's",
    "MBO Technisch Leidinggevende",
  ];
  const certPersonenauto = [
    "Onderhoudsbeurt uitvoeren",
    "Reparaties uitvoeren",
    "Diagnose stellen",
    "Diagnose mechanisch",
    "Diagnose elektronisch",
    "Complexe reparaties (BVE 1)",
  ];
  const certEV = [
    "NEN 9140 — Werkverantwoordelijke",
    "NEN 9140 — Vakbekwaam Persoon",
    "EV-adviseur Basis",
  ];
  const certAirco = ["F-gassen voor personenauto's"];
  const certToekomst = ["Waterstof in mobiliteit"];

  const apparatuur = [
    "Autel", "Jaltest", "Bosch KTS", "Texa",
    "Hella Gutmann (mega macs)", "Launch X431",
    "Delphi", "Snap-on", "WOW! / Würth Snooper",
    "VCDS (Ross-Tech)",
  ];
  const oem = [
    { merk: "VW / Audi / Seat / Skoda", soft: "VCDS" },
    { merk: "BMW", soft: "ISTA" },
    { merk: "Mercedes-Benz", soft: "XENTRY" },
    { merk: "Ford", soft: "IDS" },
    { merk: "Volvo", soft: "VIDA" },
    { merk: "Renault", soft: "CLIP" },
  ];

  return (
    <div>
      {/* Hero */}
      <section style={{ borderBottom: "1px solid var(--border)" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", padding: "80px 32px" }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Over Garage DéDé</div>
          <h1 className="display" style={{ fontSize: 72, marginBottom: 24, maxWidth: 900 }}>
            Een werkplaats waar <span style={{ color: "var(--accent)", fontStyle: "italic", fontWeight: 700 }}>vakkennis</span> nog telt.
          </h1>
          <p className="subhead" style={{ maxWidth: 720, fontSize: 22 }}>
            In Vijfhuizen — eerlijk advies, transparante prijzen, en monteurs die hun
            vak verstaan. Of het nu een APK is, complexe motormanagement-storing of
            NEN 9140 werk aan een EV.
          </p>
        </div>
      </section>

      {/* Foto-galerij — echt werk */}
      <section style={{ padding: "32px 0" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 32px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 16 }}>
            <PhotoTile src="photos/diagnose/IMG_4615.JPG" h={360} caption="Werkplaats Vijfhuizen"/>
            <PhotoTile src="photos/diagnose/IMG_4626%20kopie%20klein.jpg" h={360} caption="Diagnose in actie"/>
            <PhotoTile src="photos/diagnose/IMG_4609.JPG" h={360} caption="OEM software — Volkswagen"/>
          </div>
        </div>
      </section>

      {/* Numbers */}
      <section style={{ padding: "80px 0", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)", background: "var(--surface)" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 32px",
                      display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, textAlign: "center" }}>
          {[
            { n: "18", l: "Jaar ervaring" },
            { n: "1.200+", l: "Vaste klanten" },
            { n: "5+", l: "Monteurs" },
            { n: "4.9", l: "Google rating" },
          ].map((s, i) => (
            <div key={i}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 80, fontWeight: 800, color: "var(--accent)",
                            letterSpacing: "-0.04em", lineHeight: 0.9 }}>
                {s.n}
              </div>
              <div className="text-muted" style={{ fontSize: 14, marginTop: 8, letterSpacing: "0.05em" }}>
                {s.l}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Certificaten section */}
      <section style={{ padding: "100px 0" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 32px" }}>
          <div style={{ marginBottom: 56, maxWidth: 720 }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Diploma's, certificaten & apparatuur</div>
            <h2 className="headline">Bewezen vakkennis — zwart op wit.</h2>
            <p className="subhead" style={{ marginTop: 16 }}>
              Van standaard onderhoud tot werk aan hoogspanningssystemen.
              Onze monteurs blijven bijscholen — u rijdt veilig weg.
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginBottom: 40 }}>
            <CertBlock Icon={I.ShieldCheck} title="Diploma's" items={diplomas}/>
            <CertBlock Icon={I.Wrench} title="Certificaten — Personenauto's" items={certPersonenauto}/>
            <CertBlock Icon={I.Bolt} title="Elektrische voertuigen" items={certEV}
                       note="Onze werkplaats is conform NEN 9140 ingericht voor werk aan hoogspanningssystemen."/>
            <CertBlock Icon={I.Snow} title="Airco" items={certAirco} extra={[{ Icon: I.Sparkle, title: "Toekomsttechniek", items: certToekomst }]}/>
          </div>

          {/* Certificaat-slider */}
          <CertificaatSlider/>

          {/* Apparatuur — ribbon met foto */}
          <div className="card" style={{ padding: 0, background: "var(--surface)", marginTop: 32, overflow: "hidden" }}>
            {/* Hero foto bovenin */}
            <div role="img" aria-label="Diagnose-apparatuur Garage DéDé Vijfhuizen — Autel, Bosch KTS, Texa, OEM dealer-software" style={{
              height: 280,
              backgroundImage: "url('photos/diagnose/IMG_4626%20kopie%20klein.jpg')",
              backgroundSize: "cover",
              backgroundPosition: "center",
              position: "relative",
              borderBottom: "1px solid var(--border)",
            }}>
              <div aria-hidden style={{
                position: "absolute", inset: 0,
                background: "linear-gradient(180deg, rgba(11,11,12,0.1) 0%, rgba(11,11,12,0.85) 100%)",
              }}/>
              <div style={{ position: "absolute", left: 32, right: 32, bottom: 28 }}>
                <div className="eyebrow" style={{ marginBottom: 10, display: "inline-flex", alignItems: "center", gap: 8 }}>
                  <I.Diag size={13}/> Uitleesapparatuur in actie
                </div>
                <h3 style={{ fontSize: 32, fontWeight: 800, letterSpacing: "-0.02em", margin: 0 }}>
                  Diagnose op dealer-niveau.
                </h3>
              </div>
            </div>

            <div style={{ padding: 36 }}>
            <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 48 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 10, display: "inline-flex", alignItems: "center", gap: 8 }}>
                  <I.Wrench size={13}/> Universeel
                </div>
                <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", marginBottom: 12 }}>
                  Alle merken.
                </h3>
                <p className="text-muted" style={{ fontSize: 14, lineHeight: 1.6, margin: 0 }}>
                  Tien tools van de top-leveranciers. Wat de ene niet leest,
                  leest de andere wel.
                </p>
              </div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {apparatuur.map((a, i) => (
                  <span key={i} style={{
                    padding: "10px 16px", border: "1px solid var(--border)",
                    borderRadius: 8, fontSize: 14, fontWeight: 500,
                    background: "var(--surface-2)",
                    fontFamily: "var(--font-mono)",
                  }}>
                    {a}
                  </span>
                ))}
              </div>
            </div>

            <hr className="div" style={{ margin: "32px 0" }}/>

            <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 48 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 10 }}>OEM software</div>
                <h3 style={{ fontSize: 24, fontWeight: 700, letterSpacing: "-0.02em", marginBottom: 12 }}>
                  Fabrikant-spec.
                </h3>
                <p className="text-muted" style={{ fontSize: 14, lineHeight: 1.6, margin: 0 }}>
                  Originele dealer-software voor accuraat coderen, programmeren en
                  service-resets.
                </p>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
                {oem.map((o, i) => (
                  <div key={i} style={{
                    padding: 16, border: "1px solid var(--border)", borderRadius: 10,
                    background: "var(--surface-2)",
                  }}>
                    <div style={{ fontSize: 13, color: "var(--text-muted)", marginBottom: 4 }}>{o.merk}</div>
                    <div className="text-mono" style={{ fontWeight: 700, color: "var(--accent)", letterSpacing: "0.05em" }}>
                      {o.soft}
                    </div>
                  </div>
                ))}
              </div>
            </div>
            </div>
          </div>
        </div>
      </section>

      {/* RDW + locatie */}
      <section style={{ padding: "80px 0", borderTop: "1px solid var(--border)", background: "var(--surface)" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 32px",
                      display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12, display: "inline-flex", alignItems: "center", gap: 8 }}>
              <I.Pin size={13}/> Vind ons
            </div>
            <h2 className="headline" style={{ marginBottom: 32 }}>
              Achterasweg <span className="text-muted" style={{ fontWeight: 400 }}>·</span> Vijfhuizen.
            </h2>

            <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
              <LocCard
                name="Garage DéDé — Vijfhuizen"
                address="Achterasweg 10-A, 2141 DG Vijfhuizen"
                hours="Ma–Za 9:00 — 18:00 · Zondag gesloten"
                tel="023 - 545 1809"
                mobile="06 - 2527 5552"
                email="info@garage-dede.nl"
              />
            </div>
          </div>

          <iframe
            title="Garage DéDé op de kaart"
            src="https://www.google.com/maps?q=Achterasweg+10-A,+2141+DG+Vijfhuizen&output=embed"
            style={{ width: "100%", height: 480, border: 0, borderRadius: 14 }}
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
          />
        </div>
      </section>
    </div>
  );
}

// Slider voor certificaat-foto's. Bestanden in photos/certificaten/ (gesymlinkt naar Certificaten/)
const CERTIFICATEN = [
  { src: "photos/certificaten/NEN%209140%20Voor%20Werkverantwoordelijke.jpg", title: "NEN 9140 Werkverantwoordelijke", year: "2023" },
  { src: "photos/certificaten/NEN%209140%20Vakbekwaam%20Persoon.jpg",         title: "NEN 9140 Vakbekwaam Persoon", year: "2022" },
  { src: "photos/certificaten/NEN%209140%20Professional%20Person.jpg",        title: "NEN 9140 Professional Person", year: "2023" },
  { src: "photos/certificaten/EV-adviseur%20Basis.jpg",                       title: "EV-adviseur Basis", year: "2022" },
  { src: "photos/certificaten/F-gassen%20voor%20personenauto%60s.jpg",        title: "F-gassen personenauto's", year: "2022" },
  { src: "photos/certificaten/Mbo%20Technisch%20Specialist%20Personenauto%27s.pdf.png", title: "MBO Technisch Specialist Personenauto's" },
  { src: "photos/certificaten/Mbo%20Technisch%20Leidinggevende.pdf.png",      title: "MBO Technisch Leidinggevende" },
  { src: "photos/certificaten/Technische%20Specialist%20Personenauto%20BVE1%20Complexe%20reparaties%20aan%20mechanische%20componenten-systemen.jpg", title: "Complexe reparaties (BVE 1)", year: "2025" },
  { src: "photos/certificaten/Technische%20Specialist%20PA%20Diagnose%20stellen%20aan%20personenauto%60s.jpg", title: "Diagnose stellen", year: "2025" },
  { src: "photos/certificaten/Technische%20Specialist%20PA%20Diagnose%20stellen%20aan%20personenauto%60s%20mechanisch.jpg", title: "Diagnose mechanisch", year: "2022" },
  { src: "photos/certificaten/Technische%20Specialist%20PA%20Diagnose%20stellen%20aan%20personenauto%60s%20elektronisch.jpg", title: "Diagnose elektronisch", year: "2022" },
  { src: "photos/certificaten/Technische%20Specialist%20PA%20Reparaties%20uitvoeren%20aan%20personenauto%60s.jpg", title: "Reparaties uitvoeren", year: "2021" },
  { src: "photos/certificaten/Technische%20Specialist%20PA%20Onderhoudsbeurt%20uitvoeren%20aan%20personenauto%60s.jpg", title: "Onderhoudsbeurt uitvoeren", year: "2022" },
  { src: "photos/certificaten/BREMBO%20EXPERT%20PRO.jpg",                     title: "Brembo Expert Pro", year: "2026" },
  { src: "photos/certificaten/Veilig%20werken%20aan%20e-bedrijfsvoertuigen%20basis%20%28VOP%20NEN-9140%29.jpg", title: "VOP — Veilig werken aan EV", year: "2021" },
  { src: "photos/certificaten/Toelatingstoets%20LPK%20Keurmeester.jpg",       title: "LPK Keurmeester", year: "2026" },
  { src: "photos/certificaten/Leermeester%20Basis.jpg",                       title: "Leermeester Basis", year: "2022" },
];

function CertificaatSlider() {
  const [idx, setIdx] = React.useState(0);
  const [dragOffset, setDragOffset] = React.useState(0);
  const [isDragging, setIsDragging] = React.useState(false);
  const startX = React.useRef(0);
  const itemWidthPx = React.useRef(0);
  const containerRef = React.useRef(null);
  const dragMovedRef = React.useRef(false);

  const items = CERTIFICATEN.length > 0 ? CERTIFICATEN : Array.from({ length: 6 }).map((_, i) => ({
    placeholder: true,
    title: ["NEN 9140", "F-gassen", "EV-adviseur", "Waterstof", "Diagnose elektronisch", "BVE 1"][i],
    year: ["2024", "2023", "2024", "2025", "2022", "2022"][i],
  }));

  const visible = 3;
  const max = Math.max(0, items.length - visible);
  const go = (delta) => setIdx(i => Math.max(0, Math.min(max, i + delta)));

  const measureItemWidth = () => {
    if (!containerRef.current) return 0;
    const cw = containerRef.current.clientWidth;
    return (cw - (visible - 1) * 16) / visible + 16; // breedte + gap
  };

  const startDrag = (clientX) => {
    setIsDragging(true);
    startX.current = clientX;
    itemWidthPx.current = measureItemWidth();
    dragMovedRef.current = false;
  };
  const moveDrag = (clientX) => {
    if (!isDragging) return;
    const dx = clientX - startX.current;
    if (Math.abs(dx) > 4) dragMovedRef.current = true;
    // resistance op begin/eind
    let bounded = dx;
    if (idx === 0 && dx > 0) bounded = dx * 0.35;
    if (idx >= max && dx < 0) bounded = dx * 0.35;
    setDragOffset(bounded);
  };
  const endDrag = () => {
    if (!isDragging) return;
    const w = itemWidthPx.current || measureItemWidth();
    const threshold = w * 0.25;
    let next = idx;
    if (dragOffset < -threshold) next = Math.min(max, idx + Math.max(1, Math.round(-dragOffset / w)));
    else if (dragOffset > threshold) next = Math.max(0, idx - Math.max(1, Math.round(dragOffset / w)));
    setIdx(next);
    setDragOffset(0);
    setIsDragging(false);
  };

  // Keyboard support
  const onKeyDown = (e) => {
    if (e.key === "ArrowLeft") go(-1);
    if (e.key === "ArrowRight") go(1);
  };

  const baseTranslate = `calc(-${idx} * (100% / ${visible} + ${16 / visible}px))`;
  const transform = `translateX(calc(${baseTranslate} + ${dragOffset}px))`;

  return (
    <div style={{ marginTop: 16 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 20 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 10, display: "inline-flex", alignItems: "center", gap: 8 }}>
            <I.ShieldCheck size={13}/> Certificaten in beeld
          </div>
          <h3 style={{ fontSize: 28, fontWeight: 700, letterSpacing: "-0.02em" }}>
            Bewijs is welkom om te bekijken.
          </h3>
          <div className="text-muted" style={{ fontSize: 13, marginTop: 6 }}>
            Sleep met je muis of gebruik de pijlen.
          </div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn btn-ghost btn-sm" onClick={() => go(-1)} disabled={idx === 0}
                  style={{ opacity: idx === 0 ? 0.4 : 1 }} aria-label="Vorige"><I.ArrowLeft size={16}/></button>
          <button className="btn btn-ghost btn-sm" onClick={() => go(1)} disabled={idx >= max}
                  style={{ opacity: idx >= max ? 0.4 : 1 }} aria-label="Volgende"><I.ArrowRight size={16}/></button>
        </div>
      </div>

      <div
        ref={containerRef}
        tabIndex={0}
        onKeyDown={onKeyDown}
        onMouseDown={(e) => { e.preventDefault(); startDrag(e.clientX); }}
        onMouseMove={(e) => moveDrag(e.clientX)}
        onMouseUp={endDrag}
        onMouseLeave={endDrag}
        onTouchStart={(e) => startDrag(e.touches[0].clientX)}
        onTouchMove={(e) => moveDrag(e.touches[0].clientX)}
        onTouchEnd={endDrag}
        style={{
          overflow: "hidden",
          borderRadius: 14,
          cursor: isDragging ? "grabbing" : "grab",
          userSelect: "none",
          WebkitUserSelect: "none",
          outline: "none",
        }}
      >
        <div style={{
          display: "grid",
          gridAutoFlow: "column",
          gridAutoColumns: `calc((100% - ${(visible - 1) * 16}px) / ${visible})`,
          gap: 16,
          transform,
          transition: isDragging ? "none" : "transform .4s cubic-bezier(.2,.7,.2,1)",
          willChange: "transform",
        }}>
          {items.map((c, i) => (
            <div key={i} style={{
              aspectRatio: "3 / 4",
              borderRadius: 14,
              border: "1px solid var(--border)",
              overflow: "hidden",
              position: "relative",
              background: c.placeholder
                ? "repeating-linear-gradient(-45deg, color-mix(in oklab, var(--text-muted) 8%, transparent) 0 1px, transparent 1px 14px), var(--surface-2)"
                : `url('${c.src}') center/cover var(--surface-2)`,
              pointerEvents: "none", // zo blijven mouseup events naar de container gaan
            }}>
              {c.placeholder && (
                <div style={{
                  position: "absolute", inset: 0,
                  display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
                  color: "var(--text-muted)", padding: 24, textAlign: "center",
                }}>
                  <div style={{ fontSize: 11, letterSpacing: "0.16em", marginBottom: 8, fontFamily: "var(--font-mono)" }}>
                    PLAATS HIER
                  </div>
                  <div style={{ fontSize: 18, fontWeight: 700, color: "var(--text)" }}>{c.title}</div>
                  <div style={{ fontSize: 12, marginTop: 6 }}>{c.year}</div>
                </div>
              )}
              {!c.placeholder && (
                <div style={{
                  position: "absolute", left: 12, right: 12, bottom: 12,
                  padding: "10px 14px", borderRadius: 10,
                  background: "rgba(11,11,12,0.78)", backdropFilter: "blur(8px)",
                  color: "var(--crème)", border: "1px solid rgba(255,255,255,0.08)",
                }}>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>{c.title}</div>
                  {c.year && <div style={{ fontSize: 12, opacity: 0.75 }}>{c.year}</div>}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Pagination dots */}
      <div style={{ display: "flex", justifyContent: "center", gap: 6, marginTop: 18 }}>
        {Array.from({ length: max + 1 }).map((_, i) => (
          <button
            key={i}
            onClick={() => setIdx(i)}
            aria-label={`Pagina ${i + 1}`}
            style={{
              width: i === idx ? 22 : 6, height: 6, borderRadius: 999,
              background: i === idx ? "var(--accent)" : "var(--border)",
              border: 0, padding: 0, transition: "all .25s ease", cursor: "pointer",
            }}
          />
        ))}
      </div>
    </div>
  );
}

function PhotoTile({ src, h, caption }) {
  return (
    <div style={{
      position: "relative",
      borderRadius: 14, overflow: "hidden",
      border: "1px solid var(--border)",
      height: h,
      backgroundImage: `url('${src}')`,
      backgroundSize: "cover",
      backgroundPosition: "center",
    }}>
      {caption && (
        <div style={{
          position: "absolute", left: 14, bottom: 14,
          padding: "6px 12px", borderRadius: 999,
          background: "rgba(11,11,12,0.7)", backdropFilter: "blur(8px)",
          color: "var(--crème)", fontSize: 12, fontWeight: 600, letterSpacing: "0.04em",
          border: "1px solid rgba(255,255,255,0.1)",
        }}>{caption}</div>
      )}
    </div>
  );
}

function CertBlock({ Icon, title, items, note, extra }) {
  return (
    <div className="card" style={{ padding: 28, background: "var(--surface)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
        <div style={{
          width: 44, height: 44, borderRadius: 11,
          background: "color-mix(in oklab, var(--accent) 12%, var(--surface-2))",
          border: "1px solid color-mix(in oklab, var(--accent) 28%, var(--border))",
          display: "flex", alignItems: "center", justifyContent: "center",
          color: "var(--accent)", flexShrink: 0,
        }}>
          {Icon && <Icon size={22}/>}
        </div>
        <h3 style={{ fontSize: 18, fontWeight: 700, letterSpacing: "-0.01em" }}>{title}</h3>
      </div>
      <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
        {items.map((it, i) => (
          <li key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14, lineHeight: 1.5 }}>
            <I.Check size={14} style={{ color: "var(--accent)", marginTop: 4, flexShrink: 0 }}/>
            <span>{it}</span>
          </li>
        ))}
      </ul>
      {note && <p className="text-muted" style={{ fontSize: 13, marginTop: 16, marginBottom: 0, lineHeight: 1.5,
                                                   paddingTop: 14, borderTop: "1px dashed var(--border)" }}>
        {note}
      </p>}
      {extra && extra.map((e, i) => (
        <div key={i} style={{ marginTop: 20, paddingTop: 20, borderTop: "1px dashed var(--border)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
            <div style={{
              width: 32, height: 32, borderRadius: 8,
              background: "color-mix(in oklab, var(--accent) 12%, var(--surface-2))",
              border: "1px solid color-mix(in oklab, var(--accent) 28%, var(--border))",
              display: "flex", alignItems: "center", justifyContent: "center",
              color: "var(--accent)", flexShrink: 0,
            }}>
              {e.Icon && <e.Icon size={16}/>}
            </div>
            <h4 style={{ fontSize: 15, fontWeight: 700 }}>{e.title}</h4>
          </div>
          <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
            {e.items.map((x, j) => (
              <li key={j} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14 }}>
                <I.Check size={14} style={{ color: "var(--accent)", marginTop: 3, flexShrink: 0 }}/>
                <span>{x}</span>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

function LocCard({ name, address, hours, tel, mobile, email }) {
  return (
    <div className="card lift" style={{ padding: 24 }}>
      <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: "-0.01em", marginBottom: 12 }}>{name}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 14 }}>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <I.Pin size={14} style={{ color: "var(--text-muted)" }}/> {address}
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <I.Clock size={14} style={{ color: "var(--text-muted)" }}/> {hours}
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <I.Phone size={14} style={{ color: "var(--text-muted)" }}/> {tel}
        </div>
        {mobile && (
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <I.Phone size={14} style={{ color: "var(--text-muted)" }}/> {mobile}
          </div>
        )}
        {email && (
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <I.Mail size={14} style={{ color: "var(--text-muted)" }}/> {email}
          </div>
        )}
      </div>
    </div>
  );
}

window.Over = Over;