// Erfahrungen — Google reviews block
// -----------------------------------
// Editorial 4-up grid (3 cols on desktop, 2 on tablet, 1 on mobile).
// No carousel, no auto-rotate, no external scripts. Quiet and content-first.

const ERFAHRUNGEN_ITEMS = [
  {
    tag: 'Schwangerschaft',
    quote: 'Kathrin Schmitt-Walter ist eine wunderbare Hebamme. Sowohl in der Schwangerschaftsbegleitung als auch als Kurstrainerin für den Schwangerschaftsvorbereitungskurs. Absolute Empfehlung!',
    author: 'Teresa P.',
    source: 'Google',
    date: 'April 2026',
  },
  {
    tag: 'Geburtsvorbereitung',
    quote: 'Ich habe den Geburtsvorbereitungskurs Birth in Balance bei Franziska gemacht und würde ihn sofort wieder buchen. Der Kurs geht deutlich über die klassischen Themen hinaus. Vor allem mein Mann hat sich sehr gut aufgehoben gefühlt und war danach sicherer auf die Geburt vorbereitet.',
    author: 'Magdalena S.',
    source: 'Google',
    date: '2024',
  },
  {
    tag: 'Rückbildung',
    quote: 'Dank dem Tupler-Kurs bei Dina ist meine große Lücke am Bauch wieder geschlossen. Ich bin begeistert von meiner neuen Körpermitte und dem wieder intakten Beckenboden. Es fühlt sich alles wieder an wie vor den Schwangerschaften.',
    author: 'Regine S.',
    source: 'Google',
    date: '2025',
  },
  {
    tag: 'Atmosphäre',
    quote: 'Ein wunderschön warmes, harmonisch eingerichtetes Studio. Die Atmosphäre ist entspannend und aufnehmend. So viel Liebe, die man in den Veranstaltungen und den Räumlichkeiten spüren kann.',
    author: 'Carina W.',
    source: 'Google',
    date: '2025',
  },
];

// Replace with the real Google Maps profile URL when available.
const ERFAHRUNGEN_GOOGLE_URL = 'https://www.google.com/maps/search/?api=1&query=Die+Weiberei+M%C3%BCnchen';

const Stars = ({ count = 5 }) => (
  <span
    aria-label={`${count} von 5 Sternen`}
    style={{
      display: 'inline-flex',
      gap: 2,
      color: 'var(--honey, #D4A574)',
    }}>
    {Array.from({ length: count }).map((_, i) => (
      <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M12 2.5l2.95 6 6.62.96-4.79 4.67 1.13 6.59L12 17.6l-5.91 3.11 1.13-6.59L2.43 9.46l6.62-.96L12 2.5z" />
      </svg>
    ))}
  </span>
);

const ErfahrungCard = ({ item, index }) => {
  const ref = (typeof useReveal === 'function') ? useReveal() : { current: null };
  return (
    <article
      ref={ref}
      className="reveal"
      style={{
        background: 'var(--offwhite, #FAF6F1)',
        border: '1px solid var(--sandstone, #E8D5C0)',
        borderRadius: 14,
        padding: 'clamp(24px, 2.4vw, 32px)',
        display: 'flex',
        flexDirection: 'column',
        gap: 18,
        position: 'relative',
        transitionDelay: `${index * 60}ms`,
      }}>
      {/* Tag */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <span style={{
          display: 'inline-block',
          padding: '4px 10px',
          borderRadius: 999,
          background: 'var(--heather-subtle, #EFE3E7)',
          color: 'var(--heather-plum, #8B6E7E)',
          fontSize: 11,
          fontWeight: 600,
          letterSpacing: '0.08em',
          textTransform: 'uppercase',
        }}>
          {item.tag}
        </span>
        <Stars count={5} />
      </div>

      {/* Quote */}
      <blockquote
        style={{
          margin: 0,
          fontSize: 'clamp(15px, 1.05vw, 16.5px)',
          lineHeight: 1.6,
          color: 'var(--ink, #2A221D)',
          fontWeight: 400,
          flex: 1,
          textWrap: 'pretty',
          fontStyle: 'normal',
          position: 'relative',
        }}>
        <span aria-hidden="true" style={{
          fontFamily: 'Georgia, "Times New Roman", serif',
          fontSize: 36,
          lineHeight: 0,
          color: 'var(--heather-plum, #8B6E7E)',
          opacity: 0.4,
          marginRight: 4,
          position: 'relative',
          top: 8,
        }}>
          “
        </span>
        {item.quote}
      </blockquote>

      {/* Attribution */}
      <footer style={{
        marginTop: 'auto',
        paddingTop: 14,
        borderTop: '1px solid rgba(196, 169, 143, 0.35)',
        display: 'flex',
        flexDirection: 'column',
        gap: 2,
      }}>
        <div style={{
          fontSize: 14,
          fontWeight: 600,
          color: 'var(--ink, #2A221D)',
          letterSpacing: '-0.005em',
        }}>
          {item.author}
        </div>
        <div style={{
          fontSize: 12,
          color: 'var(--ink-50, #8A7A6C)',
          letterSpacing: '0.02em',
        }}>
          {item.source} · {item.date}
        </div>
      </footer>
    </article>
  );
};

const Erfahrungen = () => {
  const headRef = (typeof useReveal === 'function') ? useReveal() : { current: null };
  return (
    <section
      id="erfahrungen"
      style={{
        padding: 'clamp(56px, 8vw, 96px) 0',
        position: 'relative',
        zIndex: 1,
      }}>
      <div className="container">
        {/* Header */}
        <div ref={headRef} className="reveal" style={{
          maxWidth: 720,
          marginBottom: 'clamp(40px, 5vw, 64px)',
        }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>ERFAHRUNGEN</div>
          <h2 style={{
            fontSize: 'clamp(32px, 4.5vw, 48px)',
            lineHeight: 1.1,
            letterSpacing: '-0.015em',
            marginBottom: 16,
          }}>
            Was Frauen über uns<br />sagen.
          </h2>
          <p className="lead" style={{ maxWidth: 560 }}>
            Stimmen aus dem Studio &mdash; offen, wörtlich, von Google.
          </p>
        </div>

        {/* Grid */}
        <div
          className="erfahrungen-grid"
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
            gap: 'clamp(20px, 2vw, 28px)',
            marginBottom: 'clamp(32px, 4vw, 48px)',
          }}>
          {ERFAHRUNGEN_ITEMS.map((item, i) => (
            <ErfahrungCard key={i} item={item} index={i} />
          ))}
        </div>

        {/* Footer link */}
        <div style={{
          textAlign: 'center',
          fontSize: 14,
          color: 'var(--ink-70, #5C4A3E)',
        }}>
          <a
            href={ERFAHRUNGEN_GOOGLE_URL}
            target="_blank"
            rel="noopener noreferrer"
            style={{
              color: 'var(--heather-plum, #8B6E7E)',
              textDecoration: 'none',
              borderBottom: '1px solid currentColor',
              paddingBottom: 1,
              transition: 'opacity 160ms var(--ease, ease)',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.opacity = '0.7'; }}
            onMouseLeave={(e) => { e.currentTarget.style.opacity = '1'; }}>
            Alle Bewertungen auf Google ansehen
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .erfahrungen-grid {
            grid-template-columns: 1fr 1fr !important;
          }
        }
        @media (max-width: 640px) {
          .erfahrungen-grid {
            grid-template-columns: 1fr !important;
          }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { Erfahrungen });