/* TELAK — Process, Pricing, Testimonials, FAQ, CTA, Footer */

/* ---------- Process ---------- */

const STEPS = [
  {
    n: "01",
    title: "Konzultácia",
    time: "30 minút · zdarma",
    desc: "Spoznáme sa, vypočujeme si váš biznis a poradíme, čo má najväčší zmysel. Bez záväzku, bez tlaku.",
    deliver: "Návrh riešenia + cenová ponuka"
  },
  {
    n: "02",
    title: "Návrh",
    time: "5–7 dní",
    desc: "Pripravíme dizajn webu alebo aplikácie. Spolu si ho prejdeme a doladíme detaily, kým nie ste úplne spokojní.",
    deliver: "Hotový dizajn + štruktúra"
  },
  {
    n: "03",
    title: "Vývoj",
    time: "7–14 dní",
    desc: "Postavíme web alebo appku podľa schváleného návrhu. Priebežne vám posielame ukážky, takže ste vždy v obraze.",
    deliver: "Funkčná verzia na testovanie"
  },
  {
    n: "04",
    title: "Odovzdanie",
    time: "1 deň",
    desc: "Spustíme web naživo, naučíme vás obsluhovať CMS a zostávame k dispozícii. Mesiac podpory máte v cene.",
    deliver: "Spustený projekt + školenie"
  }
];

const Process = () => (
  <section id="proces">
    <div className="container">
      <div className="reveal" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 56px" }}>
        <span className="eyebrow" style={{ marginBottom: 16 }}>Proces</span>
        <h2 className="h1" style={{ marginTop: 14 }}>Štyri kroky od nápadu k spustenému projektu.</h2>
        <p className="lead" style={{ marginTop: 18 }}>
          Žiadne preťahovanie ani vágne sľuby. Vidíte presne, čo sa deje, kedy a koľko to bude stáť.
        </p>
      </div>

      <div className="process-track">
        <div className="process-line"></div>
        {STEPS.map((s, i) => (
          <div key={i} className="process-step reveal" style={{ transitionDelay: `${i * 0.1}s` }}>
            <div className="process-node">
              <span>{s.n}</span>
            </div>
            <div className="process-card card">
              <div className="muted-2" style={{ fontSize: 12, fontFamily: "var(--font-mono)", marginBottom: 4 }}>{s.time}</div>
              <h3 className="h3" style={{ marginBottom: 10, fontSize: 20 }}>{s.title}</h3>
              <p className="muted" style={{ fontSize: 14, marginBottom: 16 }}>{s.desc}</p>
              <div className="process-deliver">
                <IconCheck size={14} />
                <span>{s.deliver}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>

    <style>{`
      .process-track {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }
      @media (max-width: 920px) { .process-track { grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 540px) { .process-track { grid-template-columns: 1fr; } }
      .process-line {
        position: absolute;
        top: 24px;
        left: 8%;
        right: 8%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
        z-index: 0;
      }
      @media (max-width: 920px) { .process-line { display: none; } }
      .process-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        position: relative;
      }
      .process-node {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--bg);
        border: 1px solid var(--border-strong);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-mono);
        font-size: 13px;
        font-weight: 500;
        color: var(--accent);
        z-index: 1;
        box-shadow: 0 0 0 6px var(--bg);
      }
      .process-card {
        width: 100%;
        padding: 22px;
        text-align: left;
      }
      .process-deliver {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: var(--accent);
        background: var(--accent-soft);
        padding: 6px 12px;
        border-radius: var(--r-full);
      }
    `}</style>
  </section>
);

/* ---------- Pricing ---------- */

const PLANS = [
  {
    name: "Štart",
    desc: "Pre živnostníkov, ktorí potrebujú jednoduchý web.",
    price: "890 €",
    unit: "jednorazovo",
    features: [
      "5 stránok na mieru",
      "Mobilná verzia",
      "Kontaktný formulár",
      "Google Maps + SEO základ",
      "Hosting a SSL na rok",
      "1 mesiac podpory"
    ],
    cta: "Vybrať Štart",
    highlight: false
  },
  {
    name: "Biznis",
    desc: "Najobľúbenejšia voľba pre menšie firmy.",
    price: "2 400 €",
    unit: "jednorazovo",
    features: [
      "Web na mieru bez limitu stránok",
      "Online rezervácie alebo objednávky",
      "Editovateľný obsah cez CMS",
      "Napojenie na Facebook a Google",
      "AI chatbot na bežné otázky",
      "3 mesiace podpory"
    ],
    cta: "Vybrať Biznis",
    highlight: true
  },
  {
    name: "AI prevádzka",
    desc: "Mesačná služba pre firmy s objednávkovou prevádzkou.",
    price: "490 €",
    unit: "/ mesiac",
    features: [
      "Spravovanie všetkého obsahu",
      "AI odpovede zákazníkom 24/7",
      "Automatické príspevky na soc. siete",
      "Spracovanie e-mailov a faktúr",
      "Mesačný report výkonu",
      "Neobmedzená podpora"
    ],
    cta: "Mám záujem",
    highlight: false
  }
];

const Pricing = () => (
  <section id="cennik" style={{ background: "var(--bg-elev)" }}>
    <div className="container">
      <div className="reveal" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 56px" }}>
        <span className="eyebrow" style={{ marginBottom: 16 }}>Cenník</span>
        <h2 className="h1" style={{ marginTop: 14 }}>Orientačné ceny, žiadne prekvapenia.</h2>
        <p className="lead" style={{ marginTop: 18 }}>
          Konečnú sumu si dohodneme po konzultácii — vidíte v nej všetko vopred a platíte v dvoch alebo troch splátkach.
        </p>
      </div>

      <div className="plans-grid">
        {PLANS.map((p, i) => (
          <div key={i} className={`plan-card reveal ${p.highlight ? "is-highlight" : ""}`} style={{ transitionDelay: `${i * 0.08}s` }}>
            {p.highlight && <div className="plan-badge">Najobľúbenejšie</div>}
            <h3 className="h2" style={{ fontSize: 22, marginBottom: 6 }}>{p.name}</h3>
            <p className="muted" style={{ fontSize: 14, marginBottom: 22, minHeight: 40 }}>{p.desc}</p>
            <div className="plan-price">
              <span className="plan-price-num">{p.price}</span>
              <span className="muted-2" style={{ fontSize: 13 }}>{p.unit}</span>
            </div>
            <a href="#kontakt" className={`btn ${p.highlight ? "btn-primary" : "btn-ghost"}`} style={{ width: "100%", justifyContent: "center", marginBottom: 22 }}>
              {p.cta} <IconArrowRight size={14} />
            </a>
            <ul className="plan-list">
              {p.features.map((f, j) => (
                <li key={j}>
                  <IconCheck size={14} />
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <p className="muted-2 reveal" style={{ textAlign: "center", marginTop: 32, fontSize: 13 }}>
        Ceny sú uvedené bez DPH. Pre neziskovky a remeselné cechy ponúkame 15% zľavu.
      </p>
    </div>

    <style>{`
      .plans-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        align-items: stretch;
      }
      @media (max-width: 920px) { .plans-grid { grid-template-columns: 1fr; } }
      .plan-card {
        position: relative;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 32px 28px;
        display: flex;
        flex-direction: column;
        transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
      }
      .plan-card:hover {
        transform: translateY(-3px);
        border-color: var(--border-strong);
      }
      .plan-card.is-highlight {
        border-color: var(--accent);
        box-shadow: 0 24px 60px var(--accent-glow), 0 0 0 1px var(--accent);
        background: var(--surface);
      }
      .plan-badge {
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--accent);
        color: #001014;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.06em;
        padding: 5px 14px;
        border-radius: var(--r-full);
        text-transform: uppercase;
      }
      .plan-price {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 22px;
        padding-bottom: 22px;
        border-bottom: 1px solid var(--border);
      }
      .plan-price-num {
        font-family: var(--font-display);
        font-size: 38px;
        font-weight: 600;
        letter-spacing: -0.025em;
      }
      .plan-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .plan-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 14px;
        color: var(--text-2);
      }
      .plan-list li svg {
        color: var(--accent);
        flex-shrink: 0;
        margin-top: 3px;
      }
    `}</style>
  </section>
);

/* ---------- Testimonials ---------- */

const TESTIMONIALS = [
  {
    quote: "Mali sme starý web, ktorý nikto nečítal. Chalani z TELAKu nám urobili nový a zrazu nám volajú ľudia, čo nás predtým ani nenašli.",
    name: "Marek Novák",
    role: "majiteľ, Stolárstvo Novák",
    init: "MN",
    color: "#06B6D4"
  },
  {
    quote: "Najviac si cením, že nehovoria po anglicky a v tabuľkách. Vysvetlili všetko po slovensky, dohodli sme sa za týždeň a o mesiac sme mali web.",
    name: "Jana Tóthová",
    role: "majiteľka, Kaderníctvo Estela",
    init: "JT",
    color: "#7C3AED"
  },
  {
    quote: "AI nám teraz odpovedá na rezervácie aj v noci. Predtým sme stíhali odpísať možno polovicu — teraz neujde žiadny stôl.",
    name: "Ján Kováč",
    role: "majiteľ, Reštaurácia U Janka",
    init: "JK",
    color: "#10B981"
  }
];

const Testimonials = () => (
  <section id="referencie">
    <div className="container">
      <div className="reveal" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 56px" }}>
        <span className="eyebrow" style={{ marginBottom: 16 }}>Referencie</span>
        <h2 className="h1" style={{ marginTop: 14 }}>Čo o nás hovoria klienti.</h2>
      </div>

      <div className="testimonial-grid">
        {TESTIMONIALS.map((t, i) => (
          <figure key={i} className="testimonial card is-hoverable reveal" style={{ transitionDelay: `${i * 0.08}s` }}>
            <div className="quote-mark">"</div>
            <blockquote>
              <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6 }}>{t.quote}</p>
            </blockquote>
            <figcaption className="testimonial-foot">
              <div className="testimonial-avatar" style={{ background: `linear-gradient(135deg, ${t.color}, var(--accent))` }}>
                {t.init}
              </div>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 15 }}>{t.name}</div>
                <div className="muted-2" style={{ fontSize: 13 }}>{t.role}</div>
              </div>
              <div className="testimonial-stars" aria-label="5 hviezdičiek">
                {[...Array(5)].map((_, j) => <span key={j}>★</span>)}
              </div>
            </figcaption>
          </figure>
        ))}
      </div>
    </div>

    <style>{`
      .testimonial-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
      }
      @media (max-width: 920px) { .testimonial-grid { grid-template-columns: 1fr; } }
      .testimonial {
        position: relative;
        padding: 32px 28px;
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      .quote-mark {
        font-family: var(--font-display);
        font-size: 64px;
        line-height: 0.5;
        color: var(--accent);
        opacity: 0.4;
      }
      .testimonial blockquote { margin: 0; flex: 1; }
      .testimonial-foot {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 12px;
        padding-top: 18px;
        border-top: 1px solid var(--border);
      }
      .testimonial-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 600;
        color: white;
      }
      .testimonial-stars {
        font-size: 13px;
        color: var(--accent);
        letter-spacing: 1px;
      }
    `}</style>
  </section>
);

/* ---------- FAQ ---------- */

const FAQS = [
  {
    q: "Ako dlho trvá, kým máme web hotový?",
    a: "Jednoduchý web stihneme za 10–14 dní od zaplatenia zálohy. Komplexnejšie projekty s rezerváciami alebo AI trvajú 4–6 týždňov. Presný termín máte čierne na bielom v zmluve."
  },
  {
    q: "Čo ak na tom chcem niečo neskôr meniť?",
    a: "Bežný obsah (texty, fotky, novinky) si meníte sami cez jednoduchý CMS — naučíme vás to za hodinu. Väčšie zmeny rovno spravíme my, drobné úpravy do dvoch hodín mesačne sú v cene podpory."
  },
  {
    q: "Potrebujem rozumieť technológiám, aby som s vami spolupracoval?",
    a: "Vôbec nie. Hovoríme bez anglických skratiek, vysvetľujeme všetko bežným jazykom. Stačí, že rozumiete svojmu biznisu — zvyšok je naša práca."
  },
  {
    q: "Čo ak nebudem s výsledkom spokojný?",
    a: "Pred spustením vám ukazujeme tri kontrolné body — návrh, polohotová verzia, finál. Ak by sa stalo, že ste úplne nespokojní, vrátime vám 100% zálohy. Zatiaľ sa to nestalo."
  },
  {
    q: "Prečo by som mal ísť do AI? Mojej babke fungovalo všetko aj bez toho.",
    a: "Pretože vám to ušetrí čas a nestratíte zákazníka, ktorý napíše o desiatej večer. AI nenahrádza vás, nahrádza len rutinu — ostatné robíte stále vy."
  },
  {
    q: "Funguje to aj pre úplne malú firmu?",
    a: "Áno — väčšina našich klientov sú jednoosobové živnosti alebo rodinné firmy. Vieme prispôsobiť rozsah aj cenu, aby to dávalo zmysel."
  }
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" style={{ background: "var(--bg-elev)" }}>
      <div className="container faq-wrap">
        <div className="reveal">
          <span className="eyebrow" style={{ marginBottom: 16 }}>FAQ</span>
          <h2 className="h1" style={{ marginTop: 14, marginBottom: 24 }}>Časté otázky.</h2>
          <p className="lead">
            Niečo nie je jasné? Napíšte nám alebo zavolajte — ozveme sa do 24 hodín.
          </p>
          <a href="#kontakt" className="btn btn-ghost" style={{ marginTop: 24 }}>
            Spýtať sa osobne <IconArrowRight />
          </a>
        </div>

        <div className="faq-list">
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`faq-item reveal ${isOpen ? "is-open" : ""}`} style={{ transitionDelay: `${i * 0.04}s` }}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span>{f.q}</span>
                  <span className="faq-icon">
                    <IconPlus size={18} />
                  </span>
                </button>
                <div className="faq-a">
                  <p>{f.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <style>{`
        .faq-wrap {
          display: grid;
          grid-template-columns: 0.85fr 1.15fr;
          gap: 60px;
          align-items: start;
        }
        @media (max-width: 920px) { .faq-wrap { grid-template-columns: 1fr; gap: 40px; } }
        .faq-list { display: flex; flex-direction: column; gap: 8px; }
        .faq-item {
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: var(--r-md);
          overflow: hidden;
          transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
        }
        .faq-item.is-open { border-color: var(--border-strong); }
        .faq-q {
          width: 100%;
          background: transparent;
          border: 0;
          padding: 22px 24px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 16px;
          color: var(--text);
          font-family: var(--font-display);
          font-size: 16px;
          font-weight: 500;
          text-align: left;
        }
        .faq-icon {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background: var(--surface-2);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--text-2);
          flex-shrink: 0;
          transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
        }
        .is-open .faq-icon {
          transform: rotate(45deg);
          background: var(--accent);
          color: #001014;
        }
        .faq-a {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.4s var(--ease);
        }
        .is-open .faq-a { max-height: 240px; }
        .faq-a p {
          padding: 0 24px 22px;
          margin: 0;
          color: var(--text-2);
          font-size: 15px;
          line-height: 1.6;
        }
      `}</style>
    </section>
  );
};

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

const CTA = () => (
  <section id="kontakt">
    <div className="container">
      <div className="cta-banner reveal">
        <div className="cta-bg-grid"></div>
        <div className="cta-glow"></div>
        <div className="cta-content">
          <span className="eyebrow" style={{ color: "var(--accent)", marginBottom: 18 }}>Začnime spolupracovať</span>
          <h2 className="h-display" style={{ fontSize: "clamp(34px, 5vw, 64px)", marginTop: 16, marginBottom: 18 }}>
            Bezplatná konzultácia.<br />
            Bez záväzku.
          </h2>
          <p className="lead" style={{ maxWidth: "48ch", marginBottom: 32, color: "var(--text-2)" }}>
            30 minút telefonátom alebo osobne v Bratislave. Vypočujeme si váš biznis, povieme, čo má najväčší zmysel a pošleme cenovú ponuku do 48 hodín.
          </p>
          <div className="cta-buttons">
            <a href="mailto:ahoj@telak.sk" className="btn btn-primary">
              Získaj bezplatnú konzultáciu
              <IconArrowRight />
            </a>
            <a href="tel:+421900000000" className="btn btn-ghost">
              <IconPhone /> +421 900 000 000
            </a>
          </div>
          <div className="cta-meta">
            <span><IconCheck size={14} /> Odpoveď do 24 hodín</span>
            <span><IconCheck size={14} /> Žiadne skryté poplatky</span>
            <span><IconCheck size={14} /> Hovoríme po slovensky</span>
          </div>
        </div>
      </div>
    </div>

    <style>{`
      .cta-banner {
        position: relative;
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--r-xl);
        padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 80px);
        overflow: hidden;
      }
      [data-theme="dark"] .cta-banner {
        background: linear-gradient(180deg, var(--surface) 0%, var(--bg-elev-2) 100%);
      }
      .cta-bg-grid {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(var(--grid-color) 1px, transparent 1px),
          linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
        background-size: 40px 40px;
        mask-image: radial-gradient(ellipse at right, black 0%, transparent 70%);
        -webkit-mask-image: radial-gradient(ellipse at right, black 0%, transparent 70%);
        opacity: 0.6;
      }
      .cta-glow {
        position: absolute;
        top: -50%;
        right: -10%;
        width: 50%;
        height: 200%;
        background: radial-gradient(circle, var(--accent-glow), transparent 60%);
        opacity: 0.5;
        pointer-events: none;
      }
      .cta-content { position: relative; z-index: 1; }
      .cta-buttons {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 28px;
      }
      .cta-meta {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        font-size: 13px;
        color: var(--text-2);
      }
      .cta-meta span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .cta-meta svg { color: var(--accent); }
    `}</style>
  </section>
);

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

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <div className="nav-brand" style={{ fontSize: 22, marginBottom: 16 }}>
            <span className="dot"></span>
            <span>TELAK</span>
          </div>
          <p className="muted" style={{ fontSize: 14, maxWidth: "32ch", marginBottom: 24 }}>
            Digitálna agentúra pre slovenské lokálne firmy. Weby, aplikácie a AI automatizácie bez zbytočných komplikácií.
          </p>
          <div className="footer-socials">
            <a href="#" aria-label="Facebook">f</a>
            <a href="#" aria-label="Instagram">ig</a>
            <a href="#" aria-label="LinkedIn">in</a>
            <a href="#" aria-label="GitHub">gh</a>
          </div>
        </div>

        <div>
          <div className="footer-h">Služby</div>
          <ul className="footer-list">
            <li><a href="#sluzby">Weby na mieru</a></li>
            <li><a href="#sluzby">Webové aplikácie</a></li>
            <li><a href="#sluzby">AI automatizácie</a></li>
            <li><a href="#cennik">Cenník</a></li>
          </ul>
        </div>

        <div>
          <div className="footer-h">Firma</div>
          <ul className="footer-list">
            <li><a href="#preco">O nás</a></li>
            <li><a href="#portfolio">Portfólio</a></li>
            <li><a href="#proces">Proces</a></li>
            <li><a href="#faq">FAQ</a></li>
          </ul>
        </div>

        <div>
          <div className="footer-h">Kontakt</div>
          <ul className="footer-list footer-contact">
            <li><a href="mailto:ahoj@telak.sk"><IconMail /> ahoj@telak.sk</a></li>
            <li><a href="tel:+421900000000"><IconPhone /> +421 900 000 000</a></li>
            <li><span><IconPin /> Bratislava, Slovensko</span></li>
          </ul>
        </div>
      </div>

      <div className="footer-bottom">
        <div className="muted-2" style={{ fontSize: 13 }}>
          © 2026 TELAK s.r.o. · IČO 00 000 000 · Všetky práva vyhradené.
        </div>
        <div className="footer-legal">
          <a href="#" className="muted-2">Ochrana súkromia</a>
          <a href="#" className="muted-2">Cookies</a>
          <a href="#" className="muted-2">Obchodné podmienky</a>
        </div>
      </div>
    </div>

    <style>{`
      .footer-grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
        gap: 40px;
        margin-bottom: 48px;
      }
      @media (max-width: 820px) {
        .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
      }
      @media (max-width: 480px) {
        .footer-grid { grid-template-columns: 1fr; }
      }
      .footer-h {
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-3);
        margin-bottom: 18px;
      }
      .footer-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .footer-list a, .footer-list span {
        font-size: 14px;
        color: var(--text-2);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: color 0.2s var(--ease);
      }
      .footer-list a:hover { color: var(--accent); }
      .footer-contact svg { color: var(--accent); }
      .footer-socials {
        display: flex;
        gap: 8px;
      }
      .footer-socials a {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--surface);
        border: 1px solid var(--border);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--text-2);
        transition: all 0.2s var(--ease);
      }
      .footer-socials a:hover {
        background: var(--accent);
        color: #001014;
        border-color: var(--accent);
        transform: translateY(-2px);
      }
      .footer-bottom {
        padding-top: 24px;
        border-top: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
      }
      .footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
      .footer-legal a { font-size: 13px; transition: color 0.2s var(--ease); }
      .footer-legal a:hover { color: var(--accent); }
    `}</style>
  </footer>
);

Object.assign(window, { Process, Pricing, Testimonials, FAQ, CTA, Footer });