// Testimonials.jsx — Felipe Fin Fanfa

function Testimonials() {
  const { lang } = React.useContext(window.LangContext);
  const t = window.ffT[lang].testimonials;

  return (
    <section id="testimonials" style={{
      background: 'rgba(2,5,12,0.82)', padding: '120px 24px',
      position: 'relative', overflow: 'hidden', zIndex: 1,
      borderTop: '1px solid rgba(206,212,242,0.05)',
    }}>
      <div style={{
        position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)',
        width: 700, height: 360,
        background: 'radial-gradient(ellipse 55% 55% at 50% 0%, rgba(28,96,218,0.06) 0%, transparent 70%)',
        pointerEvents: 'none',
      }} />

      <div style={{ maxWidth: 1080, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div className="ff-reveal" style={{
          fontFamily: 'Geist Mono, monospace', fontSize: 11.5, fontWeight: 500,
          color: '#1C60DA', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 28,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <span style={{ width: 24, height: 1, background: '#1C60DA' }} />
          {t.section}
        </div>

        <h2 data-build="words" data-stagger="55" style={{
          fontFamily: 'Geist, sans-serif', fontWeight: 700, fontSize: 'clamp(32px, 4.6vw, 56px)',
          color: '#CED4F2', letterSpacing: '-0.035em', lineHeight: 1.05,
          margin: '0 0 64px', maxWidth: 720, textWrap: 'balance',
        }}>
          {t.heading}
        </h2>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 440px), 1fr))',
          gap: 24,
        }}>
          {t.items.map((item, i) => (
            <TestimonialCard key={i} item={item} linkedinLabel={t.linkedinLabel} index={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function TestimonialCard({ item, linkedinLabel, index }) {
  const [hovered, setHovered] = React.useState(false);

  const paragraphs = item.quote.split('\n\n');

  return (
    <a
      href={item.linkedin}
      target="_blank"
      rel="noreferrer"
      data-build="fade"
      data-y="40"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        position: 'relative',
        background: hovered
          ? 'linear-gradient(160deg, #0B1122 0%, #070C18 100%)'
          : 'linear-gradient(160deg, #090F1E 0%, #060B16 100%)',
        border: `1px solid ${hovered ? 'rgba(28,96,218,0.35)' : 'rgba(206,212,242,0.08)'}`,
        borderRadius: 20,
        padding: 'clamp(28px, 4vw, 40px)',
        transition: 'all 360ms cubic-bezier(0.4,0,0.2,1)',
        transform: hovered ? 'translateY(-3px)' : 'none',
        boxShadow: hovered
          ? '0 20px 56px rgba(1,4,10,0.7), 0 0 0 1px rgba(28,96,218,0.15), 0 0 48px rgba(28,96,218,0.12)'
          : '0 8px 28px rgba(1,4,10,0.45), inset 0 1px 0 rgba(206,212,242,0.04)',
        display: 'flex', flexDirection: 'column',
        textDecoration: 'none', cursor: 'pointer',
      }}>

      {/* Quote mark */}
      <div style={{
        fontFamily: 'Georgia, serif',
        fontSize: 72, lineHeight: 1,
        color: hovered ? 'rgba(28,96,218,0.35)' : 'rgba(28,96,218,0.2)',
        marginBottom: 4, marginTop: -12,
        transition: 'color 360ms',
        userSelect: 'none',
      }}>
        "
      </div>

      {/* Quote text */}
      <div style={{ flex: 1, marginBottom: 32 }}>
        {paragraphs.map((p, i) => (
          <p key={i} style={{
            fontFamily: 'Geist, sans-serif',
            fontSize: 'clamp(14px, 1.5vw, 15.5px)',
            color: '#A5ACCD',
            lineHeight: 1.72,
            margin: i > 0 ? '14px 0 0' : '0',
          }}>
            {p}
          </p>
        ))}
      </div>

      {/* Divider */}
      <div style={{
        height: 1,
        background: hovered ? 'rgba(28,96,218,0.25)' : 'rgba(206,212,242,0.07)',
        marginBottom: 24,
        transition: 'background 360ms',
      }} />

      {/* Author row */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{
            width: 44, height: 44, borderRadius: '50%',
            overflow: 'hidden', flexShrink: 0,
            boxShadow: '0 0 0 2px rgba(28,96,218,0.3)',
            position: 'relative',
          }}>
            <img
              src={item.photo}
              alt={item.name}
              style={{
                position: 'absolute',
                width: '118%', height: '118%',
                top: '-9%', left: '-9%',
                objectFit: 'cover',
              }}
            />
          </div>
          <div>
            <div style={{
              fontFamily: 'Geist, sans-serif', fontWeight: 600,
              fontSize: 14, color: '#CED4F2', letterSpacing: '-0.01em',
            }}>
              {item.name}
            </div>
            <div style={{
              fontFamily: 'Geist, sans-serif', fontSize: 12.5,
              color: '#455084', marginTop: 2,
            }}>
              {item.title} · {item.company}
            </div>
          </div>
        </div>

        {/* LinkedIn badge */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          background: 'rgba(10,102,194,0.1)',
          border: '1px solid rgba(10,102,194,0.22)',
          borderRadius: 8, padding: '5px 10px',
          flexShrink: 0,
        }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="#0A66C2" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
          </svg>
          <span style={{
            fontFamily: 'Geist Mono, monospace', fontSize: 10,
            color: '#0A66C2', fontWeight: 500, letterSpacing: '0.04em',
          }}>
            {linkedinLabel}
          </span>
        </div>
      </div>
    </a>
  );
}

Object.assign(window, { Testimonials });