const REVIEWS = [
  {
    q: "Wat een fijne ervaring. Professioneel, persoonlijk en inspirerend. Mijn stijl voelt nu helemaal eigen. Geen twijfel meer voor de kledingkast in de ochtend.",
    n: "Jolie",
    r: "Persoonlijk stijladvies",
  },
  {
    q: "Ik had nooit gedacht dat kleine aanpassingen zo'n groot verschil konden maken. Dankzij Sanne's adviezen voel ik me krachtiger én stijlvoller. Echt een aanrader.",
    n: "Fay",
    r: "Garderobe check",
  },
  {
    q: "Voor mijn dochter had ik een afspraak gemaakt met Sanne. Ze voelde zich meteen op haar gemak en kreeg écht vertrouwen om haar eigen stijl te ontdekken. Het was zo mooi om te zien hoe ze ging stralen.",
    n: "Isabel",
    r: "Coaching voor jongeren",
  },
  {
    q: "De persoonlijke aanpak en diepgaande inzichten hebben mijn leven echt veranderd. Absoluut een aanrader.",
    n: "Nina",
    r: "1-op-1 coaching",
  },
];

const ReviewsLarge = () => {
  const [i, setI] = React.useState(0);
  const r = REVIEWS[i];
  return (
    <>
      <div className="rev-stage" style={{gridTemplateColumns:"1fr"}}>
        <div>
          <div className="rev-quote" key={i}>{r.q}</div>
          <div className="rev-author">
            <span className="dash"></span>
            <span className="name">{r.n}</span>
            <span className="eyebrow" style={{marginLeft:16}}>{r.r}</span>
          </div>
        </div>
      </div>
      <div className="rev-controls">
        <div className="rev-dots">
          {REVIEWS.map((_, j) => (
            <div key={j} className={`rev-dot ${j===i?"active":""}`} onClick={()=>setI(j)} />
          ))}
        </div>
        <div className="rev-arrows">
          <button className="rev-arrow" onClick={()=>setI((i-1+REVIEWS.length)%REVIEWS.length)} aria-label="Vorige">
            <svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M15 6H1m0 0l5-5m-5 5l5 5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <button className="rev-arrow" onClick={()=>setI((i+1)%REVIEWS.length)} aria-label="Volgende">
            <svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M1 6h14m0 0l-5-5m5 5l-5 5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>
      </div>
    </>
  );
};

const ReviewsCards = () => (
  <div className="rev-cards">
    {REVIEWS.map((r, i) => (
      <div key={i} className="rev-card">
        <div className="stars">★ ★ ★ ★ ★</div>
        <blockquote>"{r.q}"</blockquote>
        <div className="attr">
          <div className="av">{r.n.charAt(0)}</div>
          <div>
            <div className="n">{r.n}</div>
            <div className="r">{r.r}</div>
          </div>
        </div>
      </div>
    ))}
  </div>
);

const ReviewsTicker = () => {
  const rows = [...REVIEWS, ...REVIEWS];
  return (
    <div className="rev-marquee">
      {rows.map((r, i) => (
        <div key={i} className="rev-tile">
          <blockquote>"{r.q}"</blockquote>
          <div className="n">— {r.n}, <span className="eyebrow" style={{display:"inline",marginLeft:4}}>{r.r}</span></div>
        </div>
      ))}
    </div>
  );
};

const Reviews = ({ variant = "large" }) => {
  return (
    <section id="reviews" className={`reviews v-${variant}`}>
      <div className="wrap">
        <div className="section-mark">
          <span className="num">№ 04</span>
          <span className="name">Ervaringen</span>
          <span className="spacer"></span>
          <span className="meta">— In hun eigen woorden</span>
        </div>
        <div className="reviews-header" style={{marginTop:40}}>
          <h2>
            Wat <em>vrouwen</em><br/> zeggen.
          </h2>
          <div style={{maxWidth:"40ch",color:"var(--ink-2)",fontFamily:"var(--serif)",fontSize:18,lineHeight:1.5,fontWeight:300}}>
            Elke reis is anders — maar iedereen vertrekt met iets gemeenschappelijks:
            meer grip op wie ze zijn, en hoe ze zich laten zien.
          </div>
        </div>
        {variant === "large" && <ReviewsLarge />}
        {variant === "cards" && <ReviewsCards />}
        {variant === "ticker" && <ReviewsTicker />}
      </div>
    </section>
  );
};

window.Reviews = Reviews;