/* AutoVault — How it works, Membership, Social proof. */

function HowItWorks() {
  return (
    <section className="section" id="how">
      <div className="wrap">
        <Reveal className="eyebrow" as="div"><span className="num">04</span> / How it works</Reveal>
        <Reveal as="h2" className="h2" delay={80}>From your driveway<br/>to the vault — handled.</Reveal>
        <div className="steps">
          {STEPS.map((s, i) => (
            <Reveal className="step" key={s.k} delay={i * 90}>
              <span className="step__n"></span>
              <div className="step__k">{s.k}</div>
              <h3 className="step__t">{s.t}</h3>
              <p className="step__d">{s.d}</p>
              <Shot id={`step-${i + 1}`} label={s.ph} ratio="4 / 3" style={{ marginTop: "28px" }} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Membership() {
  return (
    <section className="section" id="membership">
      <div className="wrap">
        <SectionHead
          num="05" label="Membership"
          title={<>Three ways<br/>to belong.</>}
          sub="Membership is by application — places in the vault are limited by design. Pricing is shared privately on tour."
        />
        <div className="tiers">
          {TIERS.map((t) => (
            <Reveal className={`tier ${t.pop ? "tier--pop" : ""}`} key={t.name}>
              {t.pop && <span className="tier__badge">Most chosen</span>}
              <div className="tier__name">{t.name}</div>
              <div className="tier__for">{t.for}</div>
              <div className="tier__price">
                <div className="pr">By application</div>
                <div className="by">Pricing shared on private tour</div>
              </div>
              <ul className="tier__feats">
                {t.feats.map((f) => (
                  <li className={f.on ? "" : "off"} key={f.t}>
                    <span className="ck">{f.on ? <Arrow className="" style={{ width: 15, height: 15 }} /> : "—"}</span>
                    {f.t}
                  </li>
                ))}
              </ul>
              <a className={`btn ${t.pop ? "btn--primary" : "btn--ghost"}`} href={WA_LINK} target="_blank" rel="noopener">
                Request Pricing
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function SocialProof() {
  const [i, setI] = React.useState(0);
  const n = TESTIMONIALS.length;
  const go = (d) => setI((p) => (p + d + n) % n);
  React.useEffect(() => {
    const id = setInterval(() => setI((p) => (p + 1) % n), 7000);
    return () => clearInterval(id);
  }, [n]);
  const t = TESTIMONIALS[i];

  return (
    <section className="section proof" id="proof">
      <div className="wrap">
        <Reveal className="quote" key={i}>
          <span className="quote__mark">&ldquo;</span>
          <p className="quote__text">{t.q}</p>
          <div className="quote__by"><b>{t.by}</b> &nbsp;·&nbsp; {t.role}</div>
        </Reveal>
        <div style={{ textAlign: "center" }}>
          <div className="quote__nav">
            <button className="qbtn" onClick={() => go(-1)} aria-label="Previous"><Arrow style={{ width: 18, transform: "rotate(180deg)" }} /></button>
            <span className="qdots">
              {TESTIMONIALS.map((_, k) => <span key={k} className={`qdot ${k === i ? "on" : ""}`} onClick={() => setI(k)}></span>)}
            </span>
            <button className="qbtn" onClick={() => go(1)} aria-label="Next"><Arrow style={{ width: 18 }} /></button>
          </div>
        </div>

        <div className="marque">
          <Reveal className="marque__label label" as="div" style={{ justifyContent: "center" }}>Trusted with the marques our members collect</Reveal>
          <div className="marque__track">
            {[...STORED_BRANDS, ...STORED_BRANDS].map((b, k) => <span className="marque__item" key={k}>{b}</span>)}
          </div>
        </div>

        <Reveal className="ig-strip">
          {[1,2,3,4,5].map((k) => <Shot key={k} id={`ig-${k}`} label="@autovault.id" ratio="1" />)}
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks, Membership, SocialProof });