/* Testimonials — clean editorial quotes */

const QUOTES = [
  {
    quote: 'Cut our manual triage from 40 hours a week to under 12 minutes. The agent has been running for nine months without a single oncall page.',
    name: 'Maya Tannenbaum',
    role: 'Head of Ops, Lattice Labs',
  },
  {
    quote: 'The kind of engineer who refuses to ship a slide and just builds the thing. Our recruiter pipeline is now our biggest competitive moat.',
    name: 'Daniel Okafor',
    role: 'Co-founder, Pulsejob.ai',
  },
  {
    quote: "He doesn't just deliver code — he delivers a clearer version of the problem. Every meeting after kickoff was sharper because of his framing.",
    name: 'Priya Shah',
    role: 'CTO, Northwind',
  },
];

const Testimonials = () => (
  <Section id="testimonials" className="border-t hairline">
    <div className="grid lg:grid-cols-12 gap-10">
      <div className="lg:col-span-4">
        <Eyebrow index="05">Words</Eyebrow>
        <SectionTitle className="mt-5">
          What teams<br />
          <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontWeight: 400 }}>say after.</span>
        </SectionTitle>
      </div>
      <div className="lg:col-span-8 grid gap-px" style={{ background: 'var(--line)' }}>
        {QUOTES.map((q, idx) => (
          <motion.figure
            key={q.name}
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true, margin: '-10% 0px' }}
            transition={{ duration: 0.7, delay: idx * 0.1, ease: [0.2, 0.7, 0.2, 1] }}
            whileHover={{ x: 4 }}
            className="relative p-7 md:p-9"
            style={{ background: 'var(--bg)' }}
          >
            <motion.div
              initial={{ scale: 0, rotate: -45 }}
              whileInView={{ scale: 1, rotate: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: idx * 0.1 + 0.2 }}
            >
              <I.Quote size={28} style={{ color: 'var(--accent)' }} className="mb-5 opacity-60" />
            </motion.div>
            <blockquote className="text-lg md:text-xl leading-relaxed font-display" style={{ textWrap: 'pretty' }}>
              "{q.quote}"
            </blockquote>
            <figcaption className="mt-6 flex items-center gap-3 font-mono text-[11px] uppercase tracking-[0.18em]" style={{ color: 'var(--fg-dim)' }}>
              <span className="w-8 h-px" style={{ background: 'var(--line-strong)' }}></span>
              <span style={{ color: 'var(--fg)' }}>{q.name}</span>
              <span>·</span>
              <span>{q.role}</span>
            </figcaption>
          </motion.figure>
        ))}
      </div>
    </div>
  </Section>
);

window.Testimonials = Testimonials;