/* AutoVault — Journal, Final CTA, Footer. */

function Journal() {
  return (
    <section className="section" id="journal">
      <div className="wrap">
        <div className="journal__head">
          <div>
            <Reveal className="eyebrow" as="div"><span className="num">06</span> / Journal</Reveal>
            <Reveal as="h2" className="h2" delay={80}>The care manual.</Reveal>
          </div>
          <Reveal delay={140}><a className="link-arrow" href="/journal">All articles <Arrow className="ar" /></a></Reveal>
        </div>
        <div className="posts">
          {POSTS.map((p, i) => (
            <Reveal as="a" className="post" key={p.t} delay={i * 90} href="/journal">
              <div className="post__media"><Shot id={`journal-${i + 1}`} label={p.ph} fill /></div>
              <span className="post__cat">{p.cat}</span>
              <h3 className="post__t">{p.t}</h3>
              <span className="post__meta">{p.meta}</span>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="section cta-band" id="contact">
      <div className="cta-band__glow"></div>
      <div className="crest-watermark"><Shield className="crest-mark" /></div>
      <div className="wrap">
        <Reveal className="eyebrow" as="div" style={{ justifyContent: "center" }}><span className="num">07</span> / Reserve</Reveal>
        <Reveal as="h2" className="display" delay={80} style={{ fontSize: "clamp(40px, 6.5vw, 96px)" }}>
          Reserve your space<br/>in the <em>vault.</em>
        </Reveal>
        <Reveal as="p" className="lede cta-band__sub" delay={140} style={{ marginInline: "auto", textAlign: "center" }}>
          Places are limited and granted by application. Book a private tour, meet the team,
          and watch the door close on a car you'll stop worrying about.
        </Reveal>
        <Reveal className="cta-band__actions" delay={200}>
          <a className="btn btn--primary btn--lg" href={WA_LINK} target="_blank" rel="noopener"><WhatsAppIcon className="ico" /> WhatsApp Concierge</a>
          <a className="btn btn--ghost btn--lg" href={WA_LINK} target="_blank" rel="noopener">Reserve Your Space <Arrow className="ico" /></a>
        </Reveal>
        <Reveal className="cta-band__contact" delay={260}>
          Jakarta · +62 817-0812074 · <a href="mailto:concierge@autovault.id">concierge@autovault.id</a>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    { h: "Vault", links: ["The Vault", "Services", "The Facility", "How it works", "Membership"] },
    { h: "Company", links: ["About", "Journal", "Careers", "Contact"] },
    { h: "Visit", links: ["Jakarta Selatan", "Reserve your space", "+62 817-0812074", "concierge@autovault.id"] },
  ];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__top">
          <div className="footer__brand">
            <Brand />
            <p className="footer__tag">Indonesia's first private sanctuary for collector, exotic and luxury cars. Peace of mind, preservation, prestige.</p>
          </div>
          {cols.map((c) => (
            <div className="footer__col" key={c.h}>
              <h5>{c.h}</h5>
              {c.links.map((l) => <a key={l} href={l.startsWith("+") ? WA_LINK : l.includes("@") ? `mailto:${l}` : "#"} target={l.startsWith("+") ? "_blank" : undefined} rel="noopener">{l}</a>)}
            </div>
          ))}
        </div>
        <div className="footer__bottom">
          <span>© 2026 AutoVault.id — All rights reserved</span>
          <div className="footer__socials">
            <a href={WA_LINK} target="_blank" rel="noopener" aria-label="WhatsApp"><WhatsAppIcon style={{ width: 18, height: 18 }} /></a>
            <a href="#" aria-label="Instagram"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/></svg></a>
            <a href="#" aria-label="Facebook"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M15 8h-2a2 2 0 0 0-2 2v11M8 13h6"/><path d="M11 21V10a4 4 0 0 1 4-4h0"/></svg></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function WhatsAppFloat() {
  return (
    <a className="wa-float" href={WA_LINK} target="_blank" rel="noopener" aria-label="Chat on WhatsApp">
      <WhatsAppIcon />
    </a>
  );
}

Object.assign(window, { Journal, FinalCTA, Footer, WhatsAppFloat });