const TESTIMONIALS = [
  {
    specialty: "Dental",
    metric: "23 additional implant consults in 30 days",
    quote: "We used to lose those calls to voicemail after 5 pm — now Samika catches every one. Twenty-three implant consults in the first month alone. That's over $38,000 we would have just written off.",
    name: "Dr. Anita Reyes",
    role: "Owner · Magnolia Dental · Austin, TX",
    photo: "https://images.unsplash.com/photo-1594824476967-48c8b964273f?w=96&h=96&fit=crop&crop=faces&auto=format",
  },
  {
    specialty: "Dermatology",
    metric: "$31,200 in cosmetic consults recovered in Q1",
    quote: "After-hours callers used to just hang up. Now they get a full intake, I review it on my phone, and they're on the schedule before morning. We recovered $31,200 in cosmetic consults we would have lost last quarter.",
    name: "Dr. Priya Mehta",
    role: "Medical Director · Radiance Dermatology · San Francisco, CA",
    photo: "https://images.unsplash.com/photo-1651008376811-b90baee60c1f?w=96&h=96&fit=crop&crop=faces&auto=format",
  },
  {
    specialty: "Primary care",
    metric: "94 new patients onboarded in 60 days",
    quote: "Ninety-four new patients in two months without adding a single front-desk hour. The intake comes through before I've had coffee — I tap approve and they're scheduled. My MA hasn't played phone tag in weeks.",
    name: "Dr. Marcus Webb",
    role: "Founder · Lakeview Family Medicine · Chicago, IL",
    photo: "https://images.unsplash.com/photo-1622253692010-333f2da6031d?w=96&h=96&fit=crop&crop=faces&auto=format",
  },
  {
    specialty: "Aesthetics",
    metric: "Phone abandonment dropped from 31% to 4%",
    quote: "First-time Botox inquirers don't wait — they call three practices and book whoever answers first. We went from 31% abandonment to under 4% in six weeks. That's $22,000 a month we were just handing to competitors.",
    name: "Dr. Soo-Yeon Park",
    role: "Owner · Lumina Aesthetics · Los Angeles, CA",
    photo: "https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=96&h=96&fit=crop&crop=faces&auto=format",
  },
];

function Testimonial() {
  return (
    <section className="testi section section--paper">
      <div className="container">
        <div className="testi__head">
          <span className="eyebrow">From the chair</span>
          <h2 className="display h-lg">
            Clinics that switched<br/>
            <span className="serif">share what changed.</span>
          </h2>
        </div>

        <div className="testi__grid">
          {TESTIMONIALS.map((t) => (
            <div className="testi__card" key={t.name}>
              <div className="testi__specialty">{t.specialty}</div>
              <div className="testi__metric">{t.metric}</div>
              <blockquote className="testi__q">
                <span className="testi__mark">"</span>{t.quote}
              </blockquote>
              <div className="testi__attr">
                <img
                  className="testi__photo"
                  src={t.photo}
                  alt={t.name}
                  loading="lazy"
                  onError={e => {
                    e.target.style.display = "none";
                    e.target.nextSibling.style.display = "flex";
                  }}
                />
                <div className="testi__avatar" style={{display:"none"}}>
                  {t.name.split(" ").map(w => w[0]).join("").slice(0,2)}
                </div>
                <div>
                  <div className="testi__name">{t.name}</div>
                  <div className="testi__role">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .testi__head {
          display: flex; flex-direction: column; gap: 12px;
          margin-bottom: 56px;
        }
        .testi__head h2 { margin: 8px 0 0; }

        .testi__grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 24px;
        }

        .testi__card {
          background: var(--cream-100, #F7F1E4);
          border: 1px solid var(--line, rgba(31,29,26,0.1));
          border-radius: var(--radius-lg, 16px);
          padding: 32px 36px 28px;
          display: flex; flex-direction: column; gap: 16px;
        }

        .testi__specialty {
          font-family: var(--font-mono);
          font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
          color: var(--ink-500);
        }

        .testi__metric {
          font-family: var(--font-sans);
          font-size: 17px; font-weight: 600;
          letter-spacing: -0.01em; line-height: 1.25;
          color: var(--ink-900);
        }

        .testi__q {
          font-size: 15px; line-height: 1.6;
          color: var(--ink-600); margin: 0;
          flex: 1;
        }
        .testi__mark {
          font-family: var(--font-display); font-style: italic;
          font-size: 1.4em; color: var(--ink-300, rgba(31,29,26,0.25));
          margin-right: 3px; line-height: 0; vertical-align: -0.1em;
        }

        .testi__attr {
          display: flex; gap: 12px; align-items: center;
          padding-top: 20px; border-top: 1px solid var(--line, rgba(31,29,26,0.1));
          margin-top: auto;
        }

        .testi__photo {
          width: 44px; height: 44px; border-radius: 50%;
          object-fit: cover; flex-shrink: 0;
          border: 2px solid rgba(31,29,26,0.08);
        }
        .testi__avatar {
          width: 44px; height: 44px; border-radius: 50%;
          background: var(--ink-900); color: var(--cream-100);
          align-items: center; justify-content: center;
          font-family: var(--font-mono); font-size: 13px;
          letter-spacing: 0.05em; flex-shrink: 0;
        }
        .testi__name { font-size: 14px; font-weight: 500; color: var(--ink-900); }
        .testi__role { font-size: 12px; color: var(--ink-500); margin-top: 2px; line-height: 1.4; }

        @media (max-width: 860px) {
          .testi__grid { grid-template-columns: 1fr; }
          .testi__card { padding: 28px 24px; }
        }
      `}</style>
    </section>
  );
}
window.Testimonial = Testimonial;