/* global React, Icon */

const REVIEWS = [
  { initials: "KP", name: "Karen P.", city: "Sønderborg", when: "3 uger siden", color: "#3a4a55",
    body: "Vi fik nyt tag i sommer. Drengene var her hver morgen kl. 7, og pladsen var ryddet hver aften. Helt som aftalt, helt uden overraskelser." },
  { initials: "ML", name: "Mads L.", city: "Augustenborg", when: "1 måned siden", color: "#5a3a2a",
    body: "Tre vinduestilbud. F&J var ikke billigst, men de eneste der målte selv og forklarede ordentligt. Vi valgte dem og fortryder ikke et øjeblik." },
  { initials: "AK", name: "Anne-Marie K.", city: "Gråsten", when: "2 måneder siden", color: "#3a553a",
    body: "Vores tilbygning blev afleveret på den dag de havde lovet. Thomas styrede projektet stramt, og kvaliteten er i orden." },
  { initials: "HB", name: "Henrik B.", city: "Nordborg", when: "3 måneder siden", color: "#4a3a55",
    body: "Arne kom selv og kiggede på taget. Sagde vi godt kunne vente to år endnu. Sjælden ærlighed. Så ringer man tilbage, når tiden kommer." },
  { initials: "JS", name: "Jens S.", city: "Broager", when: "4 måneder siden", color: "#553a3a",
    body: "Nye VELFAC-vinduer hele vejen rundt. Varmeregningen er faldet markant. Showroomet hjalp os virkelig med at vælge rigtigt." },
];

function Reviews() {
  const [page, setPage] = React.useState(0);
  const PER = 3;
  const max = Math.max(0, REVIEWS.length - PER);
  React.useEffect(() => {
    const t = setInterval(() => setPage(p => (p + 1) > max ? 0 : p + 1), 6000);
    return () => clearInterval(t);
  }, [max]);

  return (
    <section className="reviews section" id="reviews" data-screen-label="Reviews">
      <div className="container">
        <div className="reviews__head">
          <div>
            <span className="eyebrow">Sådan siger kunderne</span>
            <h2 className="section-title">Lokale anbefalinger.<br/>Lokale kunder.</h2>
          </div>
          <div className="reviews__meta">
            <Icon name="shield-check" size={20} stroke="#3A8F4A"/>
            <div>
              <div className="reviews__meta-h">Byg-Garanti på alt</div>
              <div className="reviews__meta-sub">Du er sikret hvis noget skulle gå galt</div>
            </div>
          </div>
        </div>
        <div className="reviews__rail-wrap">
          <div className="reviews__rail" style={{ transform: `translateX(calc(-${page} * (33.333% + 12px) ))` }}>
            {REVIEWS.map(r => (
              <article key={r.name} className="review">
                <div className="review__head">
                  <div className="review__avatar" style={{ background: `linear-gradient(135deg, ${r.color}, #1B2532)` }}>{r.initials}</div>
                  <div>
                    <div className="review__name">{r.name}</div>
                    <div className="review__meta">{r.city} · {r.when}</div>
                  </div>
                </div>
                <div className="review__stars">
                  {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={16} stroke="#F2B636" strokeWidth={1.5} />)}
                </div>
                <p className="review__body">"{r.body}"</p>
              </article>
            ))}
          </div>
        </div>
        <div className="reviews__nav">
          <button onClick={() => setPage(p => Math.max(0, p - 1))} aria-label="Forrige" className="reviews__btn"><Icon name="chevronLeft" size={18} stroke="#0B1118" /></button>
          <div className="reviews__dots">
            {Array.from({ length: max + 1 }).map((_, i) => (
              <span key={i} className={"reviews__dot" + (i === page ? " reviews__dot--on" : "")} onClick={() => setPage(i)}/>
            ))}
          </div>
          <button onClick={() => setPage(p => Math.min(max, p + 1))} aria-label="Næste" className="reviews__btn"><Icon name="chevronRight" size={18} stroke="#0B1118" /></button>
        </div>
      </div>
      <style>{`
        .reviews__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
        .reviews__meta { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--surface-panel); border: 1px solid var(--surface-divider); border-radius: var(--radius-lg); }
        .reviews__meta-h { font-family: var(--font-display); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em; }
        .reviews__meta-sub { font-family: var(--font-body); font-size: 13px; color: var(--paper-dim); }
        .reviews__rail-wrap { overflow: hidden; }
        .reviews__rail { display: flex; gap: 18px; transition: transform 400ms var(--ease-snappy); will-change: transform; }
        .review {
          flex: 0 0 calc(33.333% - 12px);
          background: var(--surface-panel); border: 1px solid var(--surface-divider);
          border-radius: var(--radius-lg); padding: 22px;
          box-shadow: var(--shadow-card);
        }
        .review__head { display: flex; align-items: center; gap: 12px; }
        .review__avatar { width: 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #F4F1EC; }
        .review__name { font-family: var(--font-display); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em; }
        .review__meta { font-family: var(--font-body); font-size: 12px; color: var(--paper-faint); margin-top: 2px; }
        .review__stars { display: flex; gap: 2px; margin: 12px 0 10px; }
        .review__body { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--paper-dim); margin: 0; }
        .reviews__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
        .reviews__btn { width: 40px; height: 40px; border-radius: 999px; background: var(--surface-panel); border: 1px solid var(--surface-divider); color: var(--paper); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
        .reviews__btn:hover { background: var(--surface-panel-hi); border-color: var(--accent); }
        .reviews__dots { display: flex; gap: 8px; }
        .reviews__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--surface-divider); cursor: pointer; transition: background 80ms; }
        .reviews__dot--on { background: var(--accent); }
        @media (max-width: 960px) { .review { flex: 0 0 calc(50% - 9px); } }
        @media (max-width: 640px) { .review { flex: 0 0 100%; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Reviews });
