// sections.jsx — Civify landing page sections
// Depends on: logo.jsx, app-icons.jsx, i18n.js, frames/ios-frame.jsx, app-screens.jsx, app-lesson.jsx
(function () {
  const { useState, useEffect, useRef } = React;
  const Icon = window.Icon;

  // ── live phone preview (reuses the real app) ────────────────
  function PhoneHero({ scale = 0.58 }) {
    // Static, non-interactive preview — the live app lives on the demo page.
    return (
      <div className="hero-phone" style={{ width: 402 * scale, height: 874 * scale, position: 'relative' }} aria-hidden="true">
        <div
          ref={(el) => { if (el) el.setAttribute('inert', ''); }}
          style={{ position: 'absolute', top: 0, left: 0, width: 402, height: 874, transform: `scale(${scale})`, transformOrigin: 'top left', pointerEvents: 'none', userSelect: 'none' }}
        >
          <window.IOSDevice width={402} height={874}>
            <window.CivifyApp />
          </window.IOSDevice>
        </div>
      </div>
    );
  }

  // ── NAV ─────────────────────────────────────────────────────
  function Nav({ t, lang, setLang }) {
    const [open, setOpen] = useState(false);
    const langs = ['sv', 'en'];
    return (
      <header className="nav">
        <div className="nav-inner">
          <window.CivifyLogo size={30} color="var(--ink)" />
          <nav className="nav-links">
            <a href="#problem">{t.nav.problem}</a>
            <a href="#features">{t.nav.features}</a>
            <a href="#partners">{t.nav.partners}</a>
          </nav>
          <div className="nav-right">
            <div className="lang">
              <button className="lang-btn" onClick={() => setOpen((o) => !o)}>
                <Icon name="globe" size={16} color="currentColor" stroke={2} />
                {lang.toUpperCase()}
              </button>
              {open && (
                <div className="lang-menu">
                  {langs.map((l) => (
                    <button key={l} className={l === lang ? 'on' : ''} onClick={() => { setLang(l); setOpen(false); }}>
                      {window.CIVIFY_I18N[l].langName}
                    </button>
                  ))}
                </div>
              )}
            </div>
            <a className="btn btn-sm" href="demo.html">{t.nav.demo}</a>
          </div>
        </div>
      </header>
    );
  }

  // ── HERO ────────────────────────────────────────────────────
  // Clustered around the phone (upper-right), warm tones to match the hero.
  const HERO_STARS = [
    { top: '4%',  left: '60%', s: 13, d: 0,   dur: 9,    c: '#F0A91E' },
    { top: '2%',  left: '82%', s: 18, d: 0.7, dur: 10.5, c: '#F2570A' },
    { top: '14%', left: '95%', s: 11, d: 1.4, dur: 11,   c: '#F0A91E' },
    { top: '30%', left: '54%', s: 9,  d: 2.1, dur: 9.5,  c: '#F7B733' },
    { top: '46%', left: '90%', s: 14, d: 0.9, dur: 12,   c: '#F0A91E' },
    { top: '58%', left: '67%', s: 10, d: 1.7, dur: 11.5, c: '#F2570A' },
    { top: '24%', left: '74%', s: 8,  d: 2.6, dur: 10,   c: '#F7B733' },
  ];

  function HeroStars() {
    return (
      <div className="hero-stars" aria-hidden="true">
        {HERO_STARS.map((st, i) => (
          <svg key={i} className="hero-star" viewBox="0 0 24 24"
            style={{
              top: st.top, left: st.left, width: st.s, height: st.s,
              animationDelay: `${st.d}s`, animationDuration: `${st.dur}s`,
            }}>
            <polygon points="12,2 14.7,8.6 21.8,9.2 16.4,13.8 18.1,20.8 12,17 5.9,20.8 7.6,13.8 2.2,9.2 9.3,8.6"
              fill={st.c} />
          </svg>
        ))}
      </div>
    );
  }

  function Hero({ t }) {
    return (
      <section className="hero">
        <HeroStars />
        <div className="hero-grid container">
          <div className="hero-copy">
            <span className="eyebrow"><span className="dot" />{t.hero.eyebrow}</span>
            <h1 className="h1">
              {t.hero.title_a}<br />
              <span className="grad">{t.hero.title_b}</span>
            </h1>
            <p className="lead">{t.hero.subtitle}</p>
            <div className="hero-cta">
              <a className="btn" href="demo.html"><Icon name="play" size={18} color="#fff" />{t.hero.primary}</a>
              <a className="btn btn-ghost" href="#what">{t.hero.secondary}</a>
            </div>
            <div className="stats">
              <div><b>{t.hero.stat1v}</b><span>{t.hero.stat1}</span></div>
              <div className="div" />
              <div><b>{t.hero.stat2v}</b><span>{t.hero.stat2}</span></div>
              <div className="div" />
              <div><b>{t.hero.stat3v}</b><span>{t.hero.stat3}</span></div>
            </div>
          </div>
          <div className="hero-stage">
            <div className="slogan-badge">★ {t.hero.slogan}</div>
            <PhoneHero />
          </div>
        </div>
      </section>
    );
  }

  // ── PROBLEM ─────────────────────────────────────────────────
  function Problem({ t }) {
    const P = t.problem;
    const cards = [
      { ic: 'globe', t: P.p1t, b: P.p1b },
      { ic: 'layers', t: P.p2t, b: P.p2b },
      { ic: 'ballot', t: P.p3t, b: P.p3b },
    ];
    return (
      <section className="section" id="problem">
        <div className="container">
          <span className="kicker">{P.kicker}</span>
          <h2 className="h2">{P.title}</h2>
          <p className="section-lead">{P.body}</p>
          <div className="prob-grid">
            {cards.map((c, i) => (
              <div className="prob-card" key={i}>
                <span className="ic-badge"><Icon name={c.ic} size={22} color="var(--accent)" /></span>
                <h3>{c.t}</h3>
                <p>{c.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // ── WHAT / SOLUTION ─────────────────────────────────────────
  function What({ t }) {
    const W = t.what;
    const pillars = [
      { ic: 'grid', t: W.c1t, b: W.c1b },
      { ic: 'trophy', t: W.c2t, b: W.c2b },
      { ic: 'globe', t: W.c3t, b: W.c3b },
    ];
    return (
      <section className="section section-alt" id="what">
        <div className="container">
          <span className="kicker">{W.kicker}</span>
          <h2 className="h2">{W.title}</h2>
          <p className="section-lead">{W.body}</p>
          <div className="pillars">
            {pillars.map((p, i) => (
              <div className="pillar" key={i}>
                <span className="pillar-ic"><Icon name={p.ic} size={26} color="#fff" /></span>
                <h3>{p.t}</h3>
                <p>{p.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // ── FEATURES ────────────────────────────────────────────────
  function Features({ t }) {
    const F = t.features;
    const icons = ['grid', 'flame', 'trophy', 'bolt', 'chart', 'globe'];
    return (
      <section className="section" id="features">
        <div className="container">
          <span className="kicker">{F.kicker}</span>
          <h2 className="h2">{F.title}</h2>
          <div className="feat-grid">
            {F.items.map((it, i) => (
              <div className="feat-card" key={i}>
                <span className="feat-ic"><Icon name={icons[i]} size={24} color="var(--accent)" stroke={2.1} /></span>
                <div>
                  <h3>{it.t}</h3>
                  <p>{it.b}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // ── COURSE CARD (used by Courses) ───────────────────────────
  function CourseCard({ course, color, tint }) {
    const [hovState, setHov] = useState(false);
    const isTouch = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(hover: none)').matches;
    const hov = hovState; // visual lift only on real hover
    const showDesc = hovState || isTouch; // description always visible on touch
    return (
      <div
        onMouseEnter={() => setHov(true)}
        onMouseLeave={() => setHov(false)}
        style={{
          width: 192, flexShrink: 0, scrollSnapAlign: 'start',
          background: hov ? tint : 'var(--card)',
          border: `1.5px solid ${hov ? color + '44' : 'var(--line)'}`,
          borderRadius: 20, padding: '18px 16px 16px',
          transition: 'transform .2s, box-shadow .2s, background .18s, border-color .18s',
          transform: hov ? 'translateY(-5px)' : 'none',
          boxShadow: hov ? `0 22px 40px -18px ${color}44` : '0 2px 8px -4px rgba(100,60,10,.06)',
          cursor: 'default', position: 'relative',
        }}
      >
        <div style={{
          width: 44, height: 44, borderRadius: 14, marginBottom: 14,
          background: hov ? color + '22' : 'var(--bg-alt)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'background .18s',
        }}>
          <Icon name={course.icon} size={22} color={hov ? color : 'var(--soft)'} stroke={2} />
        </div>
        <div style={{ fontFamily: 'var(--font-display), Sora, sans-serif', fontWeight: 700, fontSize: 14.5, lineHeight: 1.3, color: 'var(--ink)', marginBottom: 8 }}>
          {course.title}
        </div>
        <div style={{
          fontSize: 12.5, color: 'var(--soft)', fontWeight: 500, lineHeight: 1.5,
          overflow: 'hidden', maxHeight: showDesc ? 90 : 0,
          opacity: showDesc ? 1 : 0, marginBottom: showDesc ? 10 : 0,
          transition: 'max-height .25s ease, opacity .2s, margin .2s',
        }}>
          {course.desc}
        </div>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 5,
          background: 'rgba(34,26,19,.06)', borderRadius: 999,
          padding: '4px 9px', fontSize: 10.5, fontWeight: 800,
          color: 'var(--soft)', letterSpacing: '.06em', textTransform: 'uppercase',
        }}>
          Kommer snart
        </span>
      </div>
    );
  }

  // ── COURSE RAIL (one level row: swipe + arrows + dots) ──────
  const CARD_W = 192, CARD_GAP = 14, STEP = CARD_W + CARD_GAP;
  function CourseRail({ lvl, padX }) {
    const railRef = useRef(null);
    const [active, setActive] = useState(0);
    const [pages, setPages] = useState(1);
    const [overflow, setOverflow] = useState(false);

    // page-based metrics: how many cards are visible → how many "pages" exist
    const metrics = () => {
      const el = railRef.current;
      if (!el) return null;
      const visible = Math.max(1, Math.floor(el.clientWidth / STEP));
      const step = visible * STEP;
      const total = Math.max(1, Math.ceil(lvl.courses.length / visible));
      const max = el.scrollWidth - el.clientWidth;
      return { el, step, total, max };
    };
    const measure = () => {
      const m = metrics();
      if (!m) return;
      setPages(m.total);
      setOverflow(m.max > 4);
      const a = m.max - m.el.scrollLeft <= 2 ? m.total - 1 : Math.round(m.el.scrollLeft / m.step);
      setActive(Math.min(m.total - 1, Math.max(0, a)));
    };
    useEffect(() => {
      measure();
      window.addEventListener('resize', measure);
      return () => window.removeEventListener('resize', measure);
    }, []);

    const goToPage = (p) => {
      const m = metrics();
      if (!m) return;
      const idx = Math.max(0, Math.min(m.total - 1, p));
      const to = Math.min(idx * m.step, m.max);
      const el = m.el;
      if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
        el.scrollLeft = to; return;
      }
      // manual tween — native smooth scroll gets cancelled by scroll-snap here
      const from = el.scrollLeft;
      const start = performance.now();
      const dur = 360;
      const ease = (t) => 1 - Math.pow(1 - t, 3);
      const frame = (now) => {
        const k = Math.min(1, (now - start) / dur);
        el.scrollLeft = from + (to - from) * ease(k);
        if (k < 1) requestAnimationFrame(frame);
      };
      requestAnimationFrame(frame);
    };

    const renderArrow = (dir) => {
      const disabled = dir < 0 ? active <= 0 : active >= pages - 1;
      return (
        <button
          key={dir}
          aria-label={dir < 0 ? 'Föregående' : 'Nästa'}
          disabled={disabled}
          onClick={() => goToPage(active + dir)}
          style={{
            width: 38, height: 38, borderRadius: 999, flexShrink: 0,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            background: 'var(--card)', cursor: disabled ? 'default' : 'pointer',
            border: `1.5px solid ${disabled ? 'var(--line)' : lvl.color + '55'}`,
            color: disabled ? 'var(--soft)' : lvl.color,
            opacity: disabled ? 0.4 : 1, transition: 'border-color .15s, color .15s, opacity .15s, transform .12s',
          }}
          onMouseDown={(e) => { if (!disabled) e.currentTarget.style.transform = 'scale(.92)'; }}
          onMouseUp={(e) => { e.currentTarget.style.transform = 'none'; }}
          onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; }}
        >
          <svg width="16" height="14" viewBox="0 0 16 14" fill="none" style={{ transform: dir < 0 ? 'scaleX(-1)' : 'none' }}>
            <path d="M1 7h12M9 2l5 5-5 5" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
      );
    };

    return (
      <div style={{ marginTop: 44 }}>
        <div style={{ padding: `0 ${padX}`, marginBottom: 16, display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 30, height: 30, borderRadius: 10,
            background: lvl.color + '18', flexShrink: 0,
            fontFamily: 'var(--font-display), Sora, sans-serif',
            fontWeight: 800, fontSize: 14, color: lvl.color,
          }}>{lvl.n}</span>
          <span style={{ fontFamily: 'var(--font-display), Sora, sans-serif', fontWeight: 700, fontSize: 16, color: 'var(--ink)' }}>
            Nivå {lvl.n} <span style={{ fontWeight: 500, color: 'var(--soft)' }}>· {lvl.name}</span>
          </span>
          {overflow && (
            <span className="rail-arrows" style={{ marginLeft: 'auto', display: 'none', gap: 8 }}>
              {renderArrow(-1)}
              {renderArrow(1)}
            </span>
          )}
          <span className="swipe-hint" style={{
            marginLeft: overflow ? 0 : 'auto', display: 'none', alignItems: 'center', gap: 6,
            fontSize: 12, fontWeight: 800, color: lvl.color, whiteSpace: 'nowrap',
            background: lvl.color + '14', border: `1px solid ${lvl.color}33`,
            borderRadius: 999, padding: '5px 11px',
          }}>
            Svep för fler
            <svg className="swipe-arrow" width="16" height="12" viewBox="0 0 16 12" fill="none">
              <path d="M1 6h12M9 2l4 4-4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </span>
        </div>
        <div className="cf-rail" ref={railRef} onScroll={measure} style={{
          overflowX: 'auto', scrollbarWidth: 'none', WebkitOverflowScrolling: 'touch',
          scrollSnapType: 'x proximity', overscrollBehaviorX: 'contain', scrollPaddingLeft: padX,
        }}>
          <div style={{
            display: 'flex', gap: CARD_GAP,
            padding: `4px ${padX} 12px`,
            width: 'max-content',
          }}>
            {lvl.courses.map((c, i) => (
              <CourseCard key={i} course={c} color={lvl.color} tint={lvl.tint} />
            ))}
          </div>
        </div>
        {overflow && pages > 1 && (
          <div style={{ display: 'flex', justifyContent: 'center', gap: 7, marginTop: 4, padding: `0 ${padX}` }}>
            {Array.from({ length: pages }).map((_, i) => (
              <button
                key={i}
                aria-label={`Gå till sida ${i + 1}`}
                onClick={() => goToPage(i)}
                style={{
                  height: 8, borderRadius: 999, border: 'none', padding: 0, cursor: 'pointer',
                  width: i === active ? 22 : 8,
                  background: i === active ? lvl.color : 'var(--line)',
                  transition: 'width .2s, background .2s',
                }}
              />
            ))}
          </div>
        )}
      </div>
    );
  }

  // ── COURSES ──────────────────────────────────────────────────
  function Courses() {
    const levels = [
      { n: 1, name: 'Grunderna', color: '#2563EB', tint: '#EFF6FF', courses: [
        { title: 'Europas geografi',  icon: 'globe',   desc: 'Lär dig om Europas länder, gränser och geografi – från Atlanten till Svartahavet.' },
        { title: 'Europas historia',  icon: 'layers',  desc: 'Från antiken till vår tid – de händelser som formade en kontinent.' },
        { title: 'Vad är EU?',        icon: 'ballot',  desc: 'EU:s grundläggande syfte, värderingar och hur det hela började.' },
        { title: 'EU:s institutioner',icon: 'grid',    desc: 'Parlamentet, rådet, kommissionen – vem beslutar om vad?' },
      ]},
      { n: 2, name: 'Hur EU fungerar', color: '#7C3AED', tint: '#F5F3FF', courses: [
        { title: 'Inre marknaden',    icon: 'chart',   desc: 'Fri rörlighet för varor, tjänster, kapital och personer.' },
        { title: 'Schengen',          icon: 'globe',   desc: 'Hur gränsfritt resande fungerar och vilka länder som ingår.' },
        { title: 'Eurozonen',         icon: 'bolt',    desc: 'Den gemensamma valutan euro och hur den påverkar dig.' },
        { title: 'Budget och ekonomi',icon: 'layers',  desc: 'Hur EU:s budget sätts och vad pengarna faktiskt går till.' },
      ]},
      { n: 3, name: 'Medborgaren', color: '#059669', tint: '#ECFDF5', courses: [
        { title: 'Dina rättigheter',        icon: 'shield',  desc: 'Vilka rättigheter du har som EU-medborgare – och hur du använder dem.' },
        { title: 'Studera och arbeta i EU', icon: 'trophy',  desc: 'Erasmus, arbetsrätt och hur du tar tillvara på EU:s möjligheter.' },
        { title: 'Resa i Europa',           icon: 'globe',   desc: 'Reserätt, sjukvård utomlands och praktiska tips.' },
      ]},
      { n: 4, name: 'Europas framtid', color: '#D97706', tint: '#FFFBEB', courses: [
        { title: 'Klimat och energi',             icon: 'flame',  desc: 'EU:s klimatmål, Green Deal och omställningen till ren energi.' },
        { title: 'Säkerhet och försvar',          icon: 'shield', desc: 'EU:s roll i säkerhetspolitiken och samarbetet med NATO.' },
        { title: 'Utvidgning och kandidatländer', icon: 'globe',  desc: 'Vilka länder vill gå med i EU och hur processen ser ut.' },
      ]},
      { n: 5, name: 'Mästarutmaningar', color: '#DC2626', tint: '#FEF2F2', courses: [
        { title: 'Flaggor',                   icon: 'ballot', desc: 'Testa om du kan identifiera alla EU-länders flaggor.' },
        { title: 'Huvudstäder',               icon: 'globe',  desc: 'Para ihop varje land med sin huvudstad.' },
        { title: 'EU-quiz',                   icon: 'trophy', desc: 'Det stora kunskapstestet om allt du lärt dig i Civify.' },
        { title: 'Historiska händelser',      icon: 'layers', desc: 'Viktiga datum och vändpunkter i Europas historia.' },
        { title: 'Fördrag och institutioner', icon: 'grid',   desc: 'Maastricht, Lissabon och andra avgörande fördrag.' },
      ]},
    ];

    const padX = 'max(32px, calc((100vw - 1148px) / 2))';

    return (
      <section className="section section-alt" id="courses">
        <div className="container" style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', flexWrap: 'wrap', gap: 20, marginBottom: 12 }}>
          <div>
            <span className="kicker">Kurskatalog</span>
            <h2 className="h2">Hela kursvägen</h2>
            <p className="section-lead" style={{ marginTop: 14, maxWidth: '56ch' }}>
              Civify byggs ut i fem nivåer – från grunderna till mästarutmaningar. Idag finns EU:s institutioner tillgänglig i demon. Resten av kurserna nedan <strong>planeras och kommer att läggas till</strong> framöver.
            </p>
          </div>
          <span style={{
            alignSelf: 'flex-start', marginTop: 6,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: 'var(--card)', border: '1.5px solid var(--line)',
            borderRadius: 999, padding: '9px 16px',
            fontFamily: 'var(--font-display), Sora, sans-serif',
            fontWeight: 700, fontSize: 13, color: 'var(--soft)',
          }}>
            <span style={{ width: 8, height: 8, borderRadius: 99, background: '#F0A91E', flexShrink: 0 }} />
            Under utveckling
          </span>
        </div>

        {levels.map((lvl) => (
          <CourseRail key={lvl.n} lvl={lvl} padX={padX} />
        ))}
        <style>{`.section-alt .cf-rail::-webkit-scrollbar{display:none}
          .section-alt .rail-arrows{ display:inline-flex !important; }
          @media (hover: none), (max-width: 600px){
            .section-alt .rail-arrows{ display:none !important; }
            .section-alt .swipe-hint{ display:inline-flex !important; }
          }
          @media (prefers-reduced-motion: no-preference){
            .section-alt .swipe-hint .swipe-arrow{ animation: cf-nudge 1.5s ease-in-out infinite; }
          }
          @keyframes cf-nudge{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(3px); } }`}</style>
      </section>
    );
  }

  // ── PARTNERS (dark) ─────────────────────────────────────────
  function Partners({ t }) {
    const P = t.partners;
    const cards = [
      { ic: 'person', t: P.p1t, b: P.p1b },
      { ic: 'chart', t: P.p2t, b: P.p2b },
      { ic: 'shield', t: P.p3t, b: P.p3b },
    ];
    return (
      <section className="partners" id="partners">
        <div className="container">
          <div className="part-head">
            <div>
              <span className="kicker on-dark">{P.kicker}</span>
              <h2 className="h2 on-dark">{P.title}</h2>
            </div>
            <p>{P.body}</p>
          </div>
          <div className="part-grid">
            {cards.map((c, i) => (
              <div className="part-card" key={i}>
                <span className="ic-badge dark"><Icon name={c.ic} size={22} color="var(--accent)" /></span>
                <h3>{c.t}</h3>
                <p>{c.b}</p>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap', marginTop: 8 }}>
            <a className="btn" href="mailto:Civifier@gmail.com"><Icon name="mail" size={18} color="#fff" />{P.cta}</a>
            <a href="mailto:Civifier@gmail.com" style={{ color: 'rgba(255,255,255,0.55)', fontFamily: 'var(--font-display), Sora, sans-serif', fontWeight: 600, fontSize: 14, letterSpacing: '.01em', textDecoration: 'none', transition: 'color .15s' }}
              onMouseEnter={e => e.currentTarget.style.color='rgba(255,255,255,0.9)'}
              onMouseLeave={e => e.currentTarget.style.color='rgba(255,255,255,0.55)'}
            >Civifier@gmail.com</a>
          </div>
        </div>
      </section>
    );
  }

  // ── CTA ─────────────────────────────────────────────────────
  function CTASection({ t }) {
    const C = t.cta;
    return (
      <section className="cta-band" id="contact">
        <div className="container cta-inner">
          <window.CivifyMark size={64} stars={true} style={{ marginBottom: 8 }} />
          <h2>{C.title}</h2>
          <p>{C.body}</p>
          <div className="cta-btns">
            <a className="btn btn-on-orange" href="demo.html"><Icon name="play" size={18} color="var(--accent)" />{C.primary}</a>
            <a className="btn btn-outline-light" href="mailto:Civifier@gmail.com">{C.secondary}</a>
          </div>
        </div>
      </section>
    );
  }

  // ── FOOTER ──────────────────────────────────────────────────
  function Footer({ t, lang, setLang }) {
    const F = t.footer;
    return (
      <footer className="footer">
        <div className="container foot-grid">
          <div className="foot-brand">
            <window.CivifyLogo size={28} color="#fff" />
            <p className="slogan">{F.slogan}</p>
            <p className="tag">{F.tagline}</p>
            <a href="mailto:Civifier@gmail.com" style={{ color: 'rgba(255,255,255,0.45)', fontSize: 13, fontWeight: 600, textDecoration: 'none', marginTop: 6, display: 'inline-block', transition: 'color .15s' }}
              onMouseEnter={e => e.currentTarget.style.color='rgba(255,255,255,0.85)'}
              onMouseLeave={e => e.currentTarget.style.color='rgba(255,255,255,0.45)'}
            >Civifier@gmail.com</a>
          </div>
          <div className="foot-col">
            <h4>{F.col1}</h4>
            {F.l1.map((x, i) => {
              const hrefs = ['#features', '#courses', 'demo.html'];
              return <a key={i} href={hrefs[i] || '#'}>{x}</a>;
            })}
          </div>
          <div className="foot-col">
            <h4>{F.col2}</h4>
            {F.l2.map((x, i) => {
              const hrefs = ['#problem', '#partners', '#contact'];
              return <a key={i} href={hrefs[i] || '#'}>{x}</a>;
            })}
          </div>
          <div className="foot-col">
            <h4>{F.col3}</h4>
            {['sv', 'en'].map((l) => (
              <a key={l} href="#" className={l === lang ? 'on' : ''} onClick={(e) => { e.preventDefault(); setLang(l); }}>
                {window.CIVIFY_I18N[l].langName}
              </a>
            ))}
          </div>
        </div>
        <div className="container foot-bottom">
          <span>© Civify 2026</span>
          <span>{F.note}</span>
        </div>
      </footer>
    );
  }

  Object.assign(window, { CivifyNav: Nav, CivifyHeroSec: Hero, CivifyProblem: Problem, CivifyWhat: What, CivifyFeatures: Features, CivifyCourses: Courses, CivifyPartners: Partners, CivifyCTA: CTASection, CivifyFooter: Footer });
})();