/* AutoVault — Why a Vault, Services, Facility. */

function SectionHead({ num, label, title, sub, action }) {
  return (
    <div className="svc__head">
      <div>
        <Reveal className="eyebrow" as="div"><span className="num">{num}</span> / {label}</Reveal>
        <Reveal as="h2" className="h2" delay={80}>{title}</Reveal>
      </div>
      {(sub || action) && (
        <Reveal delay={140} style={{ maxWidth: "38ch" }}>
          {sub && <p className="lede" style={{ marginBottom: action ? 22 : 0 }}>{sub}</p>}
          {action}
        </Reveal>
      )}
    </div>
  );
}

function WhyVault() {
  return (
    <section className="section why" id="why">
      <div className="wrap">
        <div className="why__grid">
          <div className="why__lead">
            <Reveal className="eyebrow" as="div"><span className="num">01</span> / Why a vault</Reveal>
            <Reveal as="h2" className="h2" delay={80}>The case<br/>against<br/><em className="serif-accent">parking.</em></Reveal>
            <Reveal delay={160}><Shot id="why-1" label="A car left to the elements" ratio="4 / 5" style={{ marginTop: "36px" }} /></Reveal>
          </div>
          <div>
            <Reveal as="p" className="why__statement">
              A collector car isn't transport. It's an appreciating asset, a piece of engineering,
              an obsession — and the moment you switch it off, <b>the climate, the chemistry and the city
              start working against it.</b>
            </Reveal>
            <div className="why__threats">
              {THREATS.map((t, i) => (
                <Reveal className="threat" key={t.n} delay={i * 70}>
                  <div className="threat__n">{t.n}</div>
                  <div className="threat__t">{t.t}</div>
                  <div className="threat__d">{t.d}</div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Services() {
  return (
    <section className="section" id="services">
      <div className="wrap">
        <SectionHead
          num="02" label="Services"
          title={<>White-glove care,<br/>end to end.</>}
          sub="Every car in our care is preserved, maintained and returned in concours condition. Seven services, one obsession."
        />
        <div className="svc__grid">
          {SERVICES.map((s) => (
            <Reveal className="svc" key={s.n}>
              <div className="svc__ico"><Ico name={s.ico} /></div>
              <span className="svc__n">{s.n}</span>
              <h3 className="svc__t">{s.t}</h3>
              <p className="svc__d">{s.d}</p>
            </Reveal>
          ))}
          <Reveal className="svc" style={{ display: "flex", justifyContent: "center" }}>
            <div style={{ margin: "auto 0" }}>
              <div className="label label--crimson" style={{ marginBottom: 16 }}><span className="tick"></span>Bespoke</div>
              <h3 className="svc__t" style={{ margin: "0 0 18px" }}>Something specific in mind?</h3>
              <a className="link-arrow" href={WA_LINK} target="_blank" rel="noopener">Ask the concierge <Arrow className="ar" /></a>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Facility() {
  return (
    <section className="section facility" id="facility">
      <div className="wrap">
        <div className="fac__top">
          <Reveal>
            <div className="eyebrow"><span className="num">03</span> / The facility</div>
            <h2 className="h2">Built like a<br/>bank vault.<br/><em className="serif-accent">Run like a hotel.</em></h2>
            <div className="fac__feature-list">
              {FACILITY_FEATURES.map((f) => (
                <div className="fac__feature" key={f.fi}>
                  <span className="fi">{f.fi}</span>
                  <div>
                    <h4>{f.h}</h4>
                    <p>{f.p}</p>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="fac__media"><Shot id="facility-main" label="Vault interior · bays under low light" fill /></div>
          </Reveal>
        </div>

        <Reveal className="fac__gallery">
          <div className="shot-cell"><Shot id="gallery-1" label="Ferrari under spotlight" fill /></div>
          <div className="shot-cell"><Shot id="gallery-2" label="Carbon detail" fill /></div>
          <div className="shot-cell"><Shot id="gallery-3" label="Security desk" fill /></div>
          <div className="shot-cell"><Shot id="gallery-4" label="Lamborghini rear" fill /></div>
          <div className="shot-cell"><Shot id="gallery-5" label="Vault door" fill /></div>
        </Reveal>

        <Reveal as="div" className="specs">
          {SPECS.map((s) => (
            <div className="spec" key={s.l}>
              <div className="spec__v">
                <CountUp to={s.v} />{s.u && <span className="u">{s.u}</span>}
              </div>
              <div className="spec__l">{s.l}</div>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { SectionHead, WhyVault, Services, Facility });