/* 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="How to store"
          title={<>Three ways<br/>to store.</>}
          sub="From a single weekend to a full year, every car gets the same care. Rates are shared privately — message us for a tailored quote."
        />
        <div className="tiers">
          {TIERS.map((t) => (
            <Reveal className={`tier ${t.pop ? "tier--pop" : ""}`} key={t.name}>
              {t.pop && <span className="tier__badge">Recommended</span>}
              <div className="tier__name">{t.name}</div>
              <div className="tier__for">{t.for}</div>
              <div className="tier__price">
                <div className="pr">Request a quote</div>
                <div className="by">Rates shared privately via WhatsApp</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 a Quote
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function SocialProof() {
  return (
    <section className="section proof" id="proof">
      <div className="wrap">
        <div className="marque">
          <Reveal className="marque__label label" as="div" style={{ justifyContent: "center" }}>Built for the marques worth protecting</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="@auto_vault.id" ratio="1" />)}
        </Reveal>
      </div>
    </section>
  );
}

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