// Stimmen vom Markt — Kunden-Zitate auf Notizzetteln
function Stimmen() {
  const { t } = useT();
  const reviewsData = t('stimmen.reviews') || [];
  // visuelle Eigenschaften pro Zettel — sprachneutral, an die Reihenfolge der Reviews gebunden
  const decor = [
    { rot:-2.8, color:'#FAF6EA' },
    { rot: 1.5, color:'#F5EDE0' },
    { rot:-1.2, color:'#F8EFE0' },
    { rot: 2.4, color:'#FAF6EA' },
    { rot:-2.0, color:'#F0E8D2' },
    { rot: 1.8, color:'#F8EFE0' },
  ];
  const reviews = reviewsData.map((r,i) => ({ ...r, ...decor[i % decor.length] }));

  const headline = t('stimmen.headline');
  const headlineEm = t('stimmen.headlineEm');
  const idx = headline.indexOf(headlineEm);
  const before = idx >= 0 ? headline.slice(0, idx) : headline;
  const after  = idx >= 0 ? headline.slice(idx + headlineEm.length) : '';

  return (
    <section id="stimmen" className="rev-sec" style={{ background:'var(--bg-2)' }}>
      <div className="container">
        <div className="rev-head">
          <span className="eyebrow">{t('stimmen.eyebrow')}</span>
          <h2 style={{ marginTop:8 }}>{before}<span className="hand" style={{ color:'var(--brick)', fontSize:'1.15em', display:'inline-block', transform:'rotate(-2deg)' }}>{headlineEm}</span>{after}</h2>
        </div>

        <div className="rev-grid">
          {reviews.map((r,i)=>(
            <figure key={i} style={{
              margin:0,
              background:r.color,
              border:'1px solid var(--line)',
              padding:'26px 26px 22px',
              borderRadius:6,
              transform:`rotate(${r.rot}deg)`,
              boxShadow:'0 14px 30px rgba(42,27,18,.10)',
              position:'relative'
            }}>
              <div style={{ position:'absolute', top:-12, left:'50%', transform:'translateX(-50%)', width:60, height:14, background:'rgba(212, 175, 55, .55)', borderRadius:2, boxShadow:'0 2px 6px rgba(0,0,0,.1)' }}></div>
              <div style={{ fontFamily:'var(--font-display)', fontSize:54, lineHeight:1, color:'var(--brick)', opacity:.5 }}>"</div>
              <blockquote className="hand" style={{ margin:0, fontSize:24, lineHeight:1.25, color:'var(--ink)', marginTop:-10 }}>
                {r.t}
              </blockquote>
              <figcaption style={{ marginTop:18, paddingTop:14, borderTop:'1px dashed var(--line)', display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
                <span style={{ fontFamily:'var(--font-display)', fontSize:15, fontWeight:600 }}>{r.n}</span>
                <span style={{ fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.08em', color:'var(--ink-2)', textTransform:'uppercase' }}>{r.sub}</span>
              </figcaption>
            </figure>
          ))}
        </div>

        <div style={{ marginTop:40, textAlign:'center' }}>
          <a href="https://share.google/TM0SY62LEdQnoRsln" target="_blank" rel="noopener" className="btn ghost" style={{ fontSize:13 }}>
            {t('stimmen.googleCta')}
          </a>
        </div>
      </div>
      <style>{`
        .rev-sec{ padding-block:48px; }
        .rev-head{ text-align:center; max-width:640px; margin:0 auto 28px; }
        .rev-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
        @media (min-width: 600px){
          .rev-sec{ padding-block:64px; }
          .rev-head{ margin-bottom:36px; }
          .rev-grid{ grid-template-columns:repeat(2, 1fr); gap:24px; }
        }
        @media (min-width: 900px){
          .rev-sec{ padding-block:96px; }
          .rev-head{ margin-bottom:48px; }
          .rev-grid{ grid-template-columns:repeat(3, 1fr); gap:32px; }
        }
      `}</style>
    </section>
  );
}
window.Stimmen = Stimmen;