/* ---------- Testimonial ----------
   Editorial pull-quote, used inline under the demo paragraph as a
   final credibility nudge before the form.
   - default: standalone section with its own padding
   - compact: tighter spacing for inline placement (no section padding,
     left-aligned, smaller portrait + rule) */
function Testimonial({ compact = false }) {
  const inner = (
    <figure className={`testimonial-pull reveal ${compact ? 'testimonial-pull-compact' : ''}`}>
      <div className="testimonial-rule testimonial-rule-top" aria-hidden="true" />

      <blockquote className="testimonial-pull-quote">
        <span className="testimonial-pull-mark" aria-hidden="true">&ldquo;</span>
        &ldquo;Krew is solving a pain point I see daily running studio ops.{' '}
        <span className="testimonial-pull-break">The need is massive, and the timing is right.&rdquo;</span>
      </blockquote>

      <figcaption className="testimonial-pull-attrib">
        <div className="testimonial-pull-portrait" aria-hidden="true">
          <img src="/assets/testimonial-adam.png" alt="" loading="lazy" />
        </div>
        <div className="testimonial-pull-byline">
          <span className="testimonial-pull-name">Adam Swerdlow</span>
          <span className="testimonial-pull-role">Partner, Wyldwood Studios</span>
          <span className="testimonial-pull-role">Former COO, 5&amp;2 Studios</span>
        </div>
      </figcaption>

      <div className="testimonial-rule testimonial-rule-bot" aria-hidden="true" />
    </figure>
  );

  if (compact) return inner;

  return (
    <section className="section testimonial-section" id="testimonial" style={{ padding: '24px 0 80px' }}>
      <div className="container">{inner}</div>
    </section>
  );
}

window.Testimonial = Testimonial;