// TESTIMONIALS + PRICING

const Avatar = ({ person, size = 48 }) => {
  const [failed, setFailed] = React.useState(false);
  const showImage = person.image && !failed;
  return (
    <div
      className="rounded-full overflow-hidden bg-gradient-to-br from-white/20 to-white/5 border border-white/15 flex items-center justify-center font-mono text-[13px] font-semibold shrink-0"
      style={{ height: size, width: size }}
    >
      {showImage ? (
        <img
          src={person.image}
          alt={person.name}
          loading="lazy"
          decoding="async"
          onError={() => setFailed(true)}
          className="h-full w-full object-cover"
        />
      ) : (
        <span>{person.initials}</span>
      )}
    </div>
  );
};

const Testimonials = () => {
  const t = window.MERCENTA.TESTIMONIALS;
  const [active, setActive] = React.useState(0);
  return (
    <section className="relative py-24 lg:py-32 border-t border-white/8">
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10">
        <div className="grid lg:grid-cols-12 gap-10 items-start">
          <div className="lg:col-span-4">
            <SectionHead
              kicker="WORD OF MOUTH"
              title={<>What they <span className="font-serif italic font-normal">say</span> after 90 days.</>}
            />
            <div className="mt-10 flex gap-3 reveal">
              {t.map((person, i) => (
                <button
                  key={i}
                  onClick={() => setActive(i)}
                  aria-label={`Read review from ${person.name}`}
                  className={"relative h-12 w-12 rounded-full transition ring-offset-2 ring-offset-[var(--bg)] " + (active===i ? "ring-2 ring-accent" : "ring-1 ring-white/15 hover:ring-white/30 opacity-70 hover:opacity-100")}
                >
                  <Avatar person={person} size={48} />
                </button>
              ))}
            </div>
          </div>
          <div className="lg:col-span-8">
            <figure key={active} className="rounded-[22px] border border-white/10 bg-white/[0.02] p-8 lg:p-12 reveal in">
              <div className="flex items-center gap-1 text-accent">
                {Array.from({length:5}).map((_,i)=>(
                  <Icon key={i} name="star" size={14} strokeWidth={2} />
                ))}
              </div>
              <blockquote className="mt-6 font-serif text-[28px] lg:text-[36px] leading-[1.18] text-white/95">
                <span className="text-accent">"</span>{t[active].quote}<span className="text-accent">"</span>
              </blockquote>
              <figcaption className="mt-8 flex items-center gap-4">
                <Avatar person={t[active]} size={56} />
                <div>
                  <div className="font-medium text-[15px]">{t[active].name}</div>
                  <div className="text-[13px] text-white/50">{t[active].role}</div>
                </div>
              </figcaption>
            </figure>
          </div>
        </div>
      </div>
    </section>
  );
};

const Pricing = () => {
  const tiers = window.MERCENTA.PRICING;
  return (
    <section className="relative py-24 lg:py-32 border-t border-white/8">
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10">
        <SectionHead
          kicker="PACKAGES · 03"
          title={<>Three ways to <span className="font-serif italic font-normal">work</span> with us.</>}
          intro="Transparent retainers. No setup fees. Three months minimum so the engine has room to compound."
        />

        <div className="mt-16 grid md:grid-cols-3 gap-5">
          {tiers.map((t, i) => (
            <article
              key={t.name}
              className={"relative rounded-[22px] border p-7 lg:p-8 reveal " + (t.accent ? "border-accent bg-gradient-to-b from-accent/10 to-transparent" : "border-white/10 bg-white/[0.02]")}
              style={{ transitionDelay: `${i*0.06}s` }}
            >
              {t.badge && (
                <div className="absolute -top-3 right-6 font-mono text-[10.5px] tracking-[0.16em] uppercase bg-accent text-black px-3 py-1 rounded-full">{t.badge}</div>
              )}
              <div className="flex items-center justify-between">
                <h3 className="display text-[28px]">{t.name}</h3>
                <span className="font-mono text-[10.5px] text-white/40">/ 0{i+1}</span>
              </div>
              <p className="mt-2 text-[14px] text-white/55 max-w-[240px]">{t.pitch}</p>
              <div className="mt-7 pb-7 border-b border-white/10 flex items-baseline gap-1.5">
                {t.price !== "—" && <span className="font-mono text-[14px] text-white/55">$</span>}
                <span className="display text-[60px] tracking-[-0.05em]">{t.price}</span>
                <span className="font-mono text-[12px] text-white/55">{t.price === "—" ? "" : "k"} {t.cadence}</span>
              </div>
              <ul className="mt-6 space-y-3 text-[14px] text-white/80">
                {t.features.map(f => (
                  <li key={f} className="flex items-start gap-3">
                    <span className={"mt-0.5 h-4 w-4 rounded-full flex items-center justify-center shrink-0 " + (t.accent ? "bg-accent text-black" : "bg-white/8 text-white/70")}>
                      <Icon name="check" size={10} strokeWidth={3} />
                    </span>
                    {f}
                  </li>
                ))}
              </ul>
              <a href="#contact" className={"mt-8 inline-flex w-full items-center justify-center gap-2 px-5 py-3 rounded-full text-[14px] font-medium " + (t.accent ? "btn-accent" : "btn-ghost")}>
                {t.cta}
                <Icon name="arrow-right" size={14} strokeWidth={2} />
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Testimonials = Testimonials;
window.Pricing = Pricing;