/* Testimonials — quote-led editorial layout. Supports photos, scales as you add more.

   ──────────────────────────────────────────────────────────────────────────
   HOW TO ADD A TESTIMONIAL (just edit the `quotes` array below):

     {
       quote:       "What they said. Keep it punchy — one strong paragraph.",
       attribution: "Sarah K.",          // any combo: anonymous / first name / full name
       role:        "VP Engineering · Tech",
       tag:         "1:1 Coaching",      // or "Women Leaders Club", etc.
       photo:       "img/sarah.jpg",     // optional — omit/null if no photo
     }

   The grid below auto-scales: 2 columns on desktop, 1 on mobile. Add as many
   as you like — the layout flows. The first quote in `quotes` becomes the
   featured large pull-quote at the top; the rest fill the grid.
   ──────────────────────────────────────────────────────────────────────────
*/

const Testimonials = () => {
  const quotes = [
    {
      quote: "FEATURED QUOTE — drop your strongest, most specific client quote here. The one that captures the whole transformation in two sentences. This one renders large at the top.",
      attribution: "Featured client placeholder",
      role: "Senior leader · Tech",
      tag: "1:1 Coaching · 6-month engagement",
      photo: null,
    },
    {
      quote: "Add a real client quote here — the one moment that captured the shift. Hojeong's questions cut through the noise faster than I thought possible.",
      attribution: "Client placeholder",
      role: "VP Engineering · Tech",
      tag: "1:1 Coaching",
      photo: null,
    },
    {
      quote: "Add a quote about a tangible outcome — a role landed, a hard conversation had, a boundary held. Specifics earn trust.",
      attribution: "Anonymous",
      role: "Director of Product · Tech",
      tag: "1:1 Coaching",
      photo: null,
    },
    {
      quote: "Add a Women Leaders Club quote here — the moment a member realized they weren't navigating it alone.",
      attribution: "Member placeholder",
      role: "Senior Leader · Non-profit",
      tag: "Women Leaders Club",
      photo: null,
    },
    {
      quote: "Add a quote about Hojeong's style — calm, direct, asks the question you were avoiding. Why this approach worked when others didn't.",
      attribution: "Client placeholder",
      role: "Founder · Early-stage",
      tag: "1:1 Coaching",
      photo: null,
    },
  ];

  const [featured, ...rest] = quotes;

  return (
    <section id="testimonials" style={{ background: "var(--paper)" }}>
      <div className="wrap">
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-end",
          marginBottom: 64,
          gap: 32,
          flexWrap: "wrap",
        }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              <span className="num">E</span>In their words
            </div>
            <h2 className="h2" style={{ margin: 0, maxWidth: "18ch" }}>
              What clients say <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>after</em> the work.
            </h2>
          </div>
          <p className="body" style={{ maxWidth: "34ch", margin: 0 }}>
            Senior leaders across tech, non-profit, and academia. Shared anonymously, by first name, or in full — always with permission.
          </p>
        </div>

        {/* Featured pull-quote */}
        <FeaturedQuote q={featured} />

        {/* Grid of supporting quotes — scales as you add more */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, 1fr)",
          gap: 0,
          borderTop: "1px solid var(--rule)",
        }} className="two-col">
          {rest.map((q, i) => (
            <QuoteCard key={i} q={q} idx={i} />
          ))}
        </div>

        <p className="mono" style={{
          marginTop: 32,
          fontSize: 11,
          color: "var(--ink-dim)",
          textTransform: "uppercase",
          letterSpacing: "0.14em",
          textAlign: "center",
        }}>
          ↑ Placeholder quotes — replace with real testimonials in src/Testimonials.jsx
        </p>
      </div>
    </section>
  );
};

const FeaturedQuote = ({ q }) => (
  <figure style={{
    margin: 0,
    borderTop: "1px solid var(--rule)",
    borderBottom: "1px solid var(--rule)",
    padding: "56px 0",
    marginBottom: 0,
    display: "grid",
    gridTemplateColumns: q.photo ? "auto 1fr" : "1fr",
    gap: 56,
    alignItems: "start",
  }} className="featured-q">
    {q.photo && <Avatar src={q.photo} alt={q.attribution} size={140} />}
    <div>
      <div className="mono" style={{
        fontSize: 11,
        color: "var(--accent-deep)",
        letterSpacing: "0.16em",
        textTransform: "uppercase",
        marginBottom: 28,
      }}>
        ✦ Featured
      </div>
      <blockquote style={{
        margin: 0,
        fontFamily: "var(--serif)",
        fontWeight: 300,
        fontSize: "clamp(26px, 3.6vw, 48px)",
        lineHeight: 1.18,
        letterSpacing: "-0.02em",
        color: "var(--ink)",
        maxWidth: "26ch",
        marginBottom: 40,
      }}>
        <span style={{ color: "var(--accent-deep)" }}>“</span>
        {q.quote}
        <span style={{ color: "var(--accent-deep)" }}>”</span>
      </blockquote>
      <figcaption style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "baseline",
        gap: 24,
        flexWrap: "wrap",
      }}>
        <div>
          <div style={{ fontFamily: "var(--serif)", fontSize: 20, lineHeight: 1.2 }}>
            {q.attribution}
          </div>
          <div className="mono" style={{
            fontSize: 11,
            color: "var(--ink-soft)",
            textTransform: "uppercase",
            letterSpacing: "0.14em",
            marginTop: 4,
          }}>
            {q.role}
          </div>
        </div>
        <div className="mono" style={{
          fontSize: 11,
          color: "var(--ink-dim)",
          textTransform: "uppercase",
          letterSpacing: "0.14em",
        }}>
          {q.tag}
        </div>
      </figcaption>
    </div>
    <style>{`
      @media (max-width: 760px) {
        .featured-q { grid-template-columns: 1fr !important; gap: 28px !important; }
      }
    `}</style>
  </figure>
);

const QuoteCard = ({ q, idx }) => (
  <figure style={{
    margin: 0,
    padding: "40px 32px",
    borderLeft: idx % 2 === 1 ? "1px solid var(--rule)" : "none",
    borderBottom: "1px solid var(--rule)",
    display: "flex",
    flexDirection: "column",
    gap: 28,
    minHeight: 280,
  }}>
    <div className="mono" style={{
      fontSize: 11,
      color: "var(--accent-deep)",
      letterSpacing: "0.14em",
      textTransform: "uppercase",
    }}>
      {String(idx + 1).padStart(2, "0")} / {q.tag}
    </div>
    <blockquote style={{
      margin: 0,
      fontFamily: "var(--serif)",
      fontSize: 21,
      lineHeight: 1.4,
      letterSpacing: "-0.005em",
      color: "var(--ink)",
      fontWeight: 400,
      flex: 1,
    }}>
      {q.quote}
    </blockquote>
    <figcaption style={{
      display: "flex",
      gap: 16,
      alignItems: "center",
    }}>
      {q.photo && <Avatar src={q.photo} alt={q.attribution} size={48} />}
      <div>
        <div style={{ fontFamily: "var(--serif)", fontSize: 17, lineHeight: 1.2 }}>
          {q.attribution}
        </div>
        <div className="mono" style={{
          fontSize: 11,
          color: "var(--ink-soft)",
          textTransform: "uppercase",
          letterSpacing: "0.14em",
          marginTop: 4,
        }}>
          {q.role}
        </div>
      </div>
    </figcaption>
  </figure>
);

const Avatar = ({ src, alt, size = 48 }) => (
  <div style={{
    width: size, height: size,
    borderRadius: "50%",
    overflow: "hidden",
    flexShrink: 0,
    background: "var(--bone-warm)",
    border: "1px solid var(--rule)",
  }}>
    <img src={src} alt={alt} style={{
      width: "100%", height: "100%",
      objectFit: "cover",
      display: "block",
    }} onError={(e) => { e.target.style.display = "none"; }} />
  </div>
);

window.Testimonials = Testimonials;