/* eslint-disable */
const { useState: useStateT } = React;

/* ────────────────────────────────────────────────────────────────────────────
   Testimonials — card grid (3 + 2)
   Avatar top-left, pulled quote in the middle, signed name bottom-right.
   ──────────────────────────────────────────────────────────────────────────── */

const T_CARDS = [
  {
    id: 'noah',
    initials: 'N',
    avatarBg: '#7A8AC9',
    avatarImg: 'brand/avatar-noah.jpeg',
    name: 'Noah L.',
    role: 'business owner',
    quote:
      "The best part of working with BlueMoso is that I have an incredible team behind me. They have my back 24/7 so I can focus on my clients winning and growing my business.",
  },
  {
    id: 'michael',
    initials: 'M',
    avatarBg: '#3B6BC9',
    avatarImg: 'brand/avatar-michael.png',
    name: 'Michael K.',
    role: 'founder',
    quote:
      "They have saved me an immense amount of time, allowing me to focus on the bigger picture while knowing my social presence is in reliable hands.",
  },
  {
    id: 'joe',
    initials: 'J',
    avatarBg: '#C97A8A',
    avatarImg: 'brand/avatar-joe.jpeg',
    name: 'Joe M-C.',
    role: 'founder',
    quote:
      "We no longer have to think about the tasks that always fell to the bottom of our to-do list. After just one round of feedback, the team picked up everything incredibly quickly. 10/10 would recommend, and have already recommended to two people in our network.",
  },
  {
    id: 'mischa',
    initials: 'Mi',
    avatarBg: '#6BC97A',
    avatarImg: 'brand/avatar-mischa.jpeg',
    name: 'Mischa C.',
    role: 'business owner',
    quote:
      "The support helped me stay on track. I'd absolutely recommend them. They're so hardworking, easy to work with, have great energy, and do an amazing job. They learn super fast and are always looking to improve, which is what you want.",
  },
  {
    id: 'paul',
    initials: 'P',
    avatarBg: '#C9A86B',
    avatarImg: 'brand/avatar-paul.png',
    name: 'Paul M.',
    role: 'consultant, author, and speaker',
    quote:
      "This is exactly what I was hoping for. I just didn't think you'd deliver so quickly. So grateful for all your work, truly a rich blessing to me and my family.",
  },
];

const tmStyles = {
  wrap: {
    padding: 'var(--section-y) 32px',
    background: 'var(--paper-deep)',
    borderTop: '1px solid var(--line-soft)',
    borderBottom: '1px solid var(--line-soft)',
    color: 'var(--ink)',
    position: 'relative',
    overflow: 'hidden',
  },

  inner: { maxWidth: 1240, margin: '0 auto', position: 'relative', zIndex: 1 },

  header: { maxWidth: 760, marginBottom: 56 },
  eyebrow: {
    fontSize: 12,
    color: 'var(--ink-muted)',
    letterSpacing: '0.08em',
    textTransform: 'uppercase',
    fontWeight: 500,
    marginBottom: 20,
  },
  h2: {
    fontSize: 52,
    lineHeight: 1.05,
    letterSpacing: '-0.03em',
    fontWeight: 600,
    fontFamily: "'Outfit', system-ui, sans-serif",
    marginBottom: 24,
  },
  italic: { color: 'var(--blue)' },
  sub: {
    fontSize: 17,
    lineHeight: 1.55,
    color: 'var(--ink-muted)',
    maxWidth: 560,
  },

  rowTop: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 28,
    marginBottom: 28,
    alignItems: 'start',
  },
  rowBottom: {
    display: 'grid',
    gridTemplateColumns: 'repeat(2, 1fr)',
    gap: 28,
    maxWidth: 'calc(((100% - 56px) / 3) * 2 + 28px)',
    margin: '0 auto',
    alignItems: 'start',
  },

  card: {
    background: 'var(--paper)',
    border: '1px solid var(--line-soft)',
    borderRadius: 18,
    padding: '28px 30px 26px',
    boxShadow:
      '0 1px 2px rgba(22,27,61,0.04), 0 12px 28px -16px rgba(22,27,61,0.10)',
    display: 'flex',
    flexDirection: 'column',
    position: 'relative',
  },

  avatarRow: { marginBottom: 18 },
  avatar: (bg) => ({
    width: 56,
    height: 56,
    borderRadius: '50%',
    background: bg,
    display: 'grid',
    placeItems: 'center',
    color: '#fff',
    fontWeight: 600,
    fontSize: 20,
    fontFamily: "'Outfit', system-ui, sans-serif",
    overflow: 'hidden',
    boxShadow: '0 2px 8px rgba(22,27,61,0.10)',
    border: '2px solid #fff',
  }),
  avatarImg: { width: '100%', height: '100%', objectFit: 'cover' },

  quote: {
    fontSize: 15.5,
    lineHeight: 1.6,
    color: 'var(--ink-soft)',
    fontFamily: "'Inter', system-ui, sans-serif",
  },

  signRow: {
    marginTop: 24,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-end',
    gap: 2,
  },
  signName: {
    fontSize: 14,
    color: 'var(--ink-muted)',
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontWeight: 500,
    letterSpacing: '0.01em',
  },
  signRole: {
    fontSize: 12,
    color: 'var(--ink-muted)',
    fontFamily: "'Inter', system-ui, sans-serif",
    fontWeight: 400,
    letterSpacing: '0.01em',
    opacity: 0.8,
  },

  footerCta: {
    marginTop: 56,
    display: 'flex',
    justifyContent: 'center',
  },
  footerCtaBtn: {
    background: 'var(--ink)', color: 'var(--paper)',
    padding: '16px 24px', borderRadius: 12,
    fontSize: 15, fontWeight: 500,
    display: 'inline-flex', alignItems: 'center', gap: 8,
    transition: 'background .2s',
    textDecoration: 'none',
  },
};

function Card({ c }) {
  return (
    <div style={tmStyles.card} className="bm-tm-card">
      <div style={tmStyles.avatarRow}>
        <div style={tmStyles.avatar(c.avatarBg)} aria-hidden="true">
          {c.avatarImg ? (
            <img src={c.avatarImg} alt="" style={tmStyles.avatarImg} />
          ) : (
            c.initials
          )}
        </div>
      </div>
      <p style={tmStyles.quote}>"{c.quote}"</p>
      <div style={tmStyles.signRow}>
        <span style={tmStyles.signName}>{c.name}</span>
        {c.role ? <span style={tmStyles.signRole}>{c.role}</span> : null}
      </div>
    </div>
  );
}

function Testimonials() {
  const top = T_CARDS.slice(0, 3);
  const bottom = T_CARDS.slice(3);

  return (
    <section
      id="testimonials"
      style={tmStyles.wrap}
      className="reveal"
      data-screen-label="Testimonials"
    >
      <div style={tmStyles.inner}>
        <div style={tmStyles.header}>
          <div className="mono" style={tmStyles.eyebrow}>
            What clients say
          </div>
          <h2 style={tmStyles.h2} className="bm-tm-h2">
            The proof is in the{' '}
            <span style={tmStyles.italic}>outcomes.</span>
          </h2>
          <p style={tmStyles.sub}>
            This is what happens when you get your time back to focus on
            what matters.
          </p>
        </div>

        <div style={tmStyles.rowTop} className="bm-tm-row-top">
          {top.map((c) => (
            <Card key={c.id} c={c} />
          ))}
        </div>
        <div style={tmStyles.rowBottom} className="bm-tm-row-bottom">
          {bottom.map((c) => (
            <Card key={c.id} c={c} />
          ))}
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { Testimonials });