/* global React, Wordmark, AppIcon, Arrow, EightCratesSvg, CheckGlyph */

/* -------------------------------------------------------------------------- */
/*  Final CTA                                                                  */
/* -------------------------------------------------------------------------- */

function FinalCta() {
  return (
    <section id="cta" className="section" style={{ background: "var(--creme)", paddingBottom: 64 }}>
      <div className="container">
        <div
          style={{
            background: "var(--bordeaux)",
            color: "var(--creme)",
            borderRadius: 32,
            padding: "72px 64px",
            position: "relative",
            overflow: "hidden",
            display: "grid",
            gridTemplateColumns: "1.2fr 1fr",
            gap: 48,
            alignItems: "center",
          }}
          className="cta-card"
        >
          {/* watermark 8 */}
          <div
            aria-hidden="true"
            style={{
              position: "absolute",
              right: "-6%",
              bottom: "-30%",
              width: "55%",
              maxWidth: 540,
              color: "rgba(212,160,75,0.18)",
              pointerEvents: "none",
            }}
          >
            <EightCratesSvg />
          </div>

          <div style={{ position: "relative" }}>
            <div className="mono" style={{ fontSize: 12, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--or-clair)", fontWeight: 500 }}>
              Essayer cr8up
            </div>
            <h2
              className="serif text-balance"
              style={{
                fontFamily: "var(--serif)",
                fontWeight: 400,
                fontSize: "clamp(36px, 5vw, 60px)",
                lineHeight: 1.04,
                letterSpacing: "-0.015em",
                color: "var(--creme)",
                margin: "16px 0 0",
              }}
            >
              Votre prochain envoi mérite un chiffre exact, pas une estimation.
            </h2>
            <p className="text-pretty" style={{ fontSize: 17, lineHeight: 1.55, marginTop: 18, color: "rgba(244,236,215,0.78)", maxWidth: 480 }}>
              14 jours d'essai gratuit. Pas de carte. Importez votre catalogue actuel en cinq minutes — on vous aide si besoin.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
              <a href="/app/" className="btn btn-or">Commencer l'essai <Arrow /></a>
              <a href="mailto:hello@cr8up.com" className="btn btn-ghost-dark">Parler à l'équipe</a>
            </div>
            <div style={{ display: "flex", gap: 22, marginTop: 28, flexWrap: "wrap" }}>
              <span className="mono" style={{ fontSize: 11.5, letterSpacing: "0.15em", textTransform: "uppercase", color: "rgba(244,236,215,0.65)" }}>
                <CheckGlyph color="var(--or-clair)" /> iOS · Android
              </span>
              <span className="mono" style={{ fontSize: 11.5, letterSpacing: "0.15em", textTransform: "uppercase", color: "rgba(244,236,215,0.65)" }}>
                <CheckGlyph color="var(--or-clair)" /> Français & anglais
              </span>
              <span className="mono" style={{ fontSize: 11.5, letterSpacing: "0.15em", textTransform: "uppercase", color: "rgba(244,236,215,0.65)" }}>
                <CheckGlyph color="var(--or-clair)" /> Données au Canada
              </span>
            </div>
          </div>

          <div style={{ position: "relative", display: "flex", justifyContent: "center", alignItems: "center" }}>
            <PricePanel />
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 960px) {
          .cta-card { grid-template-columns: 1fr !important; padding: 48px 32px !important; }
        }
      `}</style>
    </section>
  );
}

function PricePanel() {
  const plans = [
    { name: "Solo", price: "29", caveat: "/ mois", body: "Un utilisateur, 1 entreprise, fiches illimitées." },
    { name: "Équipe", price: "79", caveat: "/ mois", body: "Jusqu'à 5 utilisateurs, partage de catalogue, support prioritaire.", featured: true },
  ];
  return (
    <div style={{
      background: "var(--vin-fonce)",
      border: "1px solid rgba(244,236,215,0.12)",
      borderRadius: 22,
      padding: 22,
      width: "100%",
      maxWidth: 420,
      display: "flex",
      flexDirection: "column",
      gap: 14,
    }}>
      <div className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(244,236,215,0.55)", fontWeight: 500 }}>
        Tarifs · CAD
      </div>
      {plans.map((p) => (
        <div key={p.name} style={{
          padding: "18px 18px",
          borderRadius: 14,
          background: p.featured ? "rgba(212,160,75,0.16)" : "rgba(244,236,215,0.04)",
          border: p.featured ? "1px solid rgba(212,160,75,0.4)" : "1px solid rgba(244,236,215,0.08)",
          display: "flex",
          flexDirection: "column",
          gap: 8,
          position: "relative",
        }}>
          {p.featured && (
            <span className="mono" style={{ position: "absolute", top: 12, right: 12, fontSize: 9.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--or-clair)", fontWeight: 500 }}>
              Populaire
            </span>
          )}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
            <div className="display" style={{ fontSize: 18, color: "var(--creme)" }}>{p.name}</div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
              <div className="serif" style={{ fontSize: 30, color: p.featured ? "var(--or-clair)" : "var(--creme)" }}>{p.price} $</div>
              <div style={{ fontSize: 12, color: "rgba(244,236,215,0.55)" }}>{p.caveat}</div>
            </div>
          </div>
          <div style={{ fontSize: 13, color: "rgba(244,236,215,0.65)", lineHeight: 1.45 }}>{p.body}</div>
        </div>
      ))}
      <div className="mono" style={{ fontSize: 10.5, color: "rgba(244,236,215,0.45)", letterSpacing: "0.1em", marginTop: 4 }}>
        Annulez à tout moment. Données exportables en CSV.
      </div>
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/*  Footer                                                                     */
/* -------------------------------------------------------------------------- */

function Footer({ withDot = false }) {
  const cols = [
    {
      h: "Produit",
      links: ["Comment ça marche", "Codes SH & douane", "Multi-devises", "Historique des fiches", "iOS & Android"],
    },
    {
      h: "Entreprise",
      links: ["À propos", "Conçu au Québec", "Carrières", "Presse"],
    },
    {
      h: "Ressources",
      links: ["Guide d'importation", "Tarif douanier CA", "Banque du Canada — taux", "Centre d'aide"],
    },
    {
      h: "Légal",
      links: ["Conditions d'utilisation", "Confidentialité", "Sécurité des données"],
    },
  ];
  return (
    <footer style={{ background: "var(--vin-fonce)", color: "var(--creme)", paddingTop: 72, paddingBottom: 28, position: "relative", overflow: "hidden" }}>
      <div aria-hidden="true" style={{ position: "absolute", left: 0, right: 0, top: 0, height: 3, background: "var(--or)" }} />
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr repeat(4, 1fr)", gap: 40, alignItems: "flex-start" }} className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <AppIcon size={48} variant="dark" style={{ background: "var(--bordeaux)" }} />
              <Wordmark size={32} onDark withDot={withDot} />
            </div>
            <p className="text-pretty" style={{ fontSize: 14.5, color: "rgba(244,236,215,0.65)", lineHeight: 1.55, marginTop: 18, maxWidth: 320 }}>
              Le calculateur de coût de revient et de prix de revente pour les petits et moyens importateurs au Canada.
            </p>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase", color: "rgba(244,236,215,0.45)", marginTop: 22 }}>
              Montréal · QC · CA
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--or-clair)", fontWeight: 500, marginBottom: 16 }}>{c.h}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {c.links.map((l) => (
                  <li key={l}>
                    <a href="#" style={{ color: "rgba(244,236,215,0.78)", fontSize: 14, textDecoration: "none" }} className="foot-link">{l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 72,
          paddingTop: 24,
          borderTop: "1px solid rgba(244,236,215,0.12)",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          flexWrap: "wrap",
          gap: 16,
        }}>
          <div className="mono" style={{ fontSize: 11.5, color: "rgba(244,236,215,0.5)", letterSpacing: "0.08em" }}>
            © 2026 cr8up inc. · Tous droits réservés.
          </div>
          <div style={{ display: "flex", gap: 18 }}>
            {["FR", "EN"].map((lang) => (
              <a key={lang} href="#" className="mono" style={{ fontSize: 11.5, letterSpacing: "0.18em", color: "rgba(244,236,215,0.55)", textDecoration: "none" }}>{lang}</a>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        .foot-link:hover { color: var(--or-clair) !important; }
        @media (max-width: 960px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 560px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { FinalCta, Footer });