// site/sections.jsx — page-level sections. Each section is a standalone component.

const { useState, useEffect, useRef } = React;

// ─── parse helper: extract prefix(+), number, suffix(%, x, etc.) from "73%" / "+340" / "2.5x"
function parseStatValue(str) {
  if (str == null) return null;
  const m = String(str).match(/^(\+|-)?\s*([0-9]+(?:[.,][0-9]+)?)\s*(.*)$/);
  if (!m) return null;
  const prefix = m[1] || '';
  const numStr = m[2];
  const suffix = m[3] || '';
  const decimals = (numStr.split(/[.,]/)[1] || '').length;
  const useComma = numStr.indexOf(',') >= 0;
  const num = parseFloat(numStr.replace(',', '.'));
  if (isNaN(num)) return null;
  return { prefix, num, suffix, decimals, useComma };
}

// ─── useCountUp hook ──────────────────────────────────────────────────────
function useCountUp(target, active) {
  const [val, setVal] = useState(active ? target : 0);
  const rafRef = useRef(null);
  useEffect(() => {
    if (!active) return;
    const reduce = typeof window !== 'undefined'
      && window.matchMedia
      && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setVal(target); return; }
    const duration = 1200;
    const start = performance.now();
    const tick = (now) => {
      const p = Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(target * eased);
      if (p < 1) rafRef.current = requestAnimationFrame(tick);
    };
    rafRef.current = requestAnimationFrame(tick);
    return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); };
  }, [target, active]);
  return val;
}

function CountUpValue({ raw, active }) {
  const parsed = parseStatValue(raw);
  if (!parsed) return <>{raw}</>;
  const current = useCountUp(parsed.num, active);
  let formatted;
  if (parsed.decimals > 0) {
    formatted = current.toFixed(parsed.decimals);
    if (parsed.useComma) formatted = formatted.replace('.', ',');
  } else {
    formatted = String(Math.round(current));
  }
  return <>{parsed.prefix}{formatted}{parsed.suffix}</>;
}

// ─── Nav ──────────────────────────────────────────────────────────────────
function SiteNav({ tweaks }) {
  const t = useT();
  const { lang, setLang } = useLang();
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={'sw-nav ' + (scrolled ? 'is-scrolled' : '')}>
      <div className="sw-nav__inner sw-container">
        <a href="#top" className="sw-nav__brand" aria-label="Showtime!">
          <Wordmark height={22} color="var(--st-black)" />
        </a>
        <nav className="sw-nav__links" aria-label="Primary">
          <a href="#channels" onClick={() => trackEvent('nav_click', { target: 'channels' })}>{t('nav.channels')}</a>
          <a href="#pricing" onClick={() => trackEvent('nav_click', { target: 'pricing' })}>{t('nav.pricing')}</a>
          <a href="#faq" onClick={() => trackEvent('nav_click', { target: 'faq' })}>{t('nav.faq')}</a>
        </nav>
        <div className="sw-nav__right">
          <div className="sw-lang" role="tablist" aria-label="Language">
            <button role="tab" aria-selected={lang==='it'} className={lang==='it' ? 'is-on' : ''} onClick={() => { trackEvent('lang_switch', { to: 'it' }); setLang('it'); }}>IT</button>
            <span className="sw-lang__sep" />
            <button role="tab" aria-selected={lang==='en'} className={lang==='en' ? 'is-on' : ''} onClick={() => { trackEvent('lang_switch', { to: 'en' }); setLang('en'); }}>EN</button>
          </div>
          <PrimaryButton size="sm" href="https://calendly.com/claudiobuda/30min" target="_blank" rel="noopener" onClick={() => trackEvent('nav_click', { target: 'contact' })}>{t('nav.contact')}</PrimaryButton>
        </div>
      </div>
    </header>
  );
}

// ─── Hero ─────────────────────────────────────────────────────────────────
function HeroSection({ variant }) {
  const t = useT();
  return (
    <section className={'sw-hero sw-hero--' + variant} id="top" data-screen-label="Hero">
      <div className="sw-container sw-hero__inner">
        {variant === 'centered' && <HeroCentered t={t} />}
        {variant === 'split'    && <HeroSplit t={t} />}
        {variant === 'stacked'  && <HeroStacked t={t} />}
      </div>
    </section>
  );
}

function HeroChannelsPreview({ t, variant }) {
  const channels = ['email', 'whatsapp', 'telegram', 'sms', 'push'];
  return (
    <div className={'sw-hero__channels sw-hero__channels--' + variant}>
      {channels.map(id => (
        <div key={id} className="sw-hero__channel-item">
          <ChannelPin id={id} size={32} />
          <span className="sw-hero__channel-name">{t('ch.' + id + '.name').replace(/\s*\*+$/, '')}</span>
        </div>
      ))}
    </div>
  );
}

function HeroCentered({ t }) {
  return (
    <div className="sw-hero__centered">
      <Eyebrow>{t('hero.eyebrow')}</Eyebrow>
      <h1 className="sw-hero__h1 sw-hero__h1--big">{t('hero.payoff')}</h1>
      <p className="sw-hero__sub">{t('hero.subline')}</p>
      <div className="sw-hero__actions">
        <PrimaryButton href="https://calendly.com/claudiobuda/30min" target="_blank" rel="noopener" size="lg" onClick={() => trackEvent('cta_hero_primary', { section: 'hero' })}>{t('hero.cta.primary')}</PrimaryButton>
        <GhostButton href="#pricing" onClick={() => trackEvent('cta_hero_secondary', { section: 'hero' })}>{t('hero.cta.secondary')}</GhostButton>
      </div>
      <HeroChannelsPreview t={t} variant="centered" />
    </div>
  );
}

function HeroSplit({ t }) {
  return (
    <div className="sw-hero__split">
      <div className="sw-hero__split-left">
        <Eyebrow>{t('hero.eyebrow')}</Eyebrow>
        <h1 className="sw-hero__h1">{t('hero.payoff')}</h1>
        <p className="sw-hero__sub">{t('hero.subline')}</p>
        <div className="sw-hero__actions">
          <PrimaryButton href="https://calendly.com/claudiobuda/30min" target="_blank" rel="noopener" size="lg">{t('hero.cta.primary')}</PrimaryButton>
          <GhostButton href="#pricing">{t('hero.cta.secondary')}</GhostButton>
        </div>
        <HeroChannelsPreview t={t} variant="split" />
      </div>
      <div className="sw-hero__split-right">
        <ConsoleMock />
      </div>
    </div>
  );
}

function HeroStacked({ t }) {
  return (
    <div className="sw-hero__stacked">
      <Eyebrow>{t('hero.payoff')}</Eyebrow>
      <h1 className="sw-hero__h1">
        <span className="sw-hero__line1">{t('hero.c.before')}</span>
        <span className="sw-hero__line2">{t('hero.c.after')}</span>
      </h1>
      <p className="sw-hero__sub">{t('hero.subline')}</p>
      <div className="sw-hero__actions">
        <PrimaryButton href="https://calendly.com/claudiobuda/30min" target="_blank" rel="noopener" size="lg" onClick={() => trackEvent('cta_hero_primary', { section: 'hero' })}>{t('hero.cta.primary')}</PrimaryButton>
        <GhostButton href="#pricing" onClick={() => trackEvent('cta_hero_secondary', { section: 'hero' })}>{t('hero.cta.secondary')}</GhostButton>
      </div>
      <HeroChannelsPreview t={t} variant="stacked" />
    </div>
  );
}

// ─── Trusted-by strip (right under hero) ───────────────────────────────────
function MarqueeStrip() {
  const t = useT();
  return (
    <section className="sw-marquee" aria-label="Customers">
      <div className="sw-container sw-marquee__inner">
        <span className="sw-marquee__label">{t('sp.eyebrow')}</span>
        <div className="sw-marquee__viewport">
          <div className="sw-marquee__track">
            {CUSTOMERS.map((c, i) => <CustomerLogo key={'a' + i} {...c} />)}
            <span aria-hidden="true" style={{ display: 'contents' }}>
              {CUSTOMERS.map((c, i) => <CustomerLogo key={'b' + i} {...c} />)}
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Pain section ─────────────────────────────────────────────────────────
function PainSection() {
  const t = useT();
  return (
    <section className="sw-pain" id="problem" data-screen-label="Problem">
      <div className="sw-container">
        <div className="sw-pain__head">
          <Eyebrow dark accent>{t('pain.eyebrow')}</Eyebrow>
          <h2 className="sw-pain__h2">{t('pain.headline')}</h2>
          <p className="sw-pain__body">{t('pain.body')}</p>
          <p className="sw-pain__body2">{t('pain.body2')}</p>
        </div>

        <div className="sw-pain__bridge">
          <div className="sw-pain__col sw-pain__col--before">
            <div className="sw-pain__col-h">{t('pain.bridge.before')}</div>
            <ul>
              {PAIN_ROWS.map(r => <li key={r.id}>{t(r.before)}</li>)}
            </ul>
          </div>
          <div className="sw-pain__arrow">
            <BrandMark size={72} on="black" />
          </div>
          <div className="sw-pain__col sw-pain__col--after">
            <div className="sw-pain__col-h">{t('pain.bridge.after')}</div>
            <ul>
              {PAIN_ROWS.map(r => <li key={r.id}>{t(r.after)}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Solution bridge — short interstitial ──────────────────────────────────
function SolutionBridge() {
  const t = useT();
  return (
    <section className="sw-solution">
      <div className="sw-container sw-solution__inner">
        <Eyebrow>{t('sol.eyebrow')}</Eyebrow>
        <h2 className="sw-solution__h2">{t('sol.headline')}</h2>
      </div>
    </section>
  );
}

// ─── Channels ─────────────────────────────────────────────────────────────
function ChannelsSection({ layout }) {
  const t = useT();
  const channels = ['email', 'whatsapp', 'telegram', 'sms', 'push'];
  return (
    <section className="sw-channels" id="channels" data-screen-label="Channels">
      <div className="sw-container">
        <div className="sw-section__head">
          <Eyebrow>{t('ch.eyebrow')}</Eyebrow>
          <h2 className="sw-section__h2">{t('ch.headline')}</h2>
          <p className="sw-section__lead">{t('ch.subline')}</p>
        </div>

        {layout === 'grid' && (
          <div className="sw-channels__grid">
            {channels.map(id => (
              <article key={id} className="sw-channel-card">
                <ChannelPin id={id} size={72} />
                <h3 className="sw-channel-card__name">{t('ch.' + id + '.name')}</h3>
                <p className="sw-channel-card__tag">{t('ch.' + id + '.tagline')}</p>
                <p className="sw-channel-card__body">{t('ch.' + id + '.body')}</p>
              </article>
            ))}
          </div>
        )}

        {layout === 'row' && (
          <div className="sw-channels__row">
            {channels.map(id => (
              <article key={id} className="sw-channel-chip">
                <ChannelPin id={id} size={56} />
                <div className="sw-channel-chip__txt">
                  <div className="sw-channel-chip__name">{t('ch.' + id + '.name')}</div>
                  <div className="sw-channel-chip__tag">{t('ch.' + id + '.tagline')}</div>
                </div>
              </article>
            ))}
          </div>
        )}

        {layout === 'stack' && (
          <div className="sw-channels__stack">
            {channels.map((id, i) => (
              <article key={id} className={'sw-channel-strip ' + (i % 2 === 1 ? 'is-flip' : '')}>
                <div className="sw-channel-strip__pin">
                  <ChannelPin id={id} size={120} />
                </div>
                <div className="sw-channel-strip__txt">
                  <h3 className="sw-channel-strip__name">{t('ch.' + id + '.name')}</h3>
                  <p className="sw-channel-strip__tag">{t('ch.' + id + '.tagline')}</p>
                  <p className="sw-channel-strip__body">{t('ch.' + id + '.body')}</p>
                </div>
              </article>
            ))}
          </div>
        )}

        <p className="sw-channels__appnote">{t('ch.app.note')}</p>
      </div>
    </section>
  );
}

// ─── Stats / industry numbers — yellow flood ───────────────────────────────
function StatsSection() {
  const t = useT();
  const gridRef = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const el = gridRef.current;
    if (!el || inView) return;
    const obs = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) {
          setInView(true);
          obs.disconnect();
          break;
        }
      }
    }, { threshold: 0.3 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [inView]);
  return (
    <section className="sw-stats" data-screen-label="Industry stats">
      <div className="sw-container">
        <div className="sw-section__head sw-section__head--center">
          <Eyebrow>{t('stats.eyebrow')}</Eyebrow>
          <h2 className="sw-section__h2">{t('stats.headline')}</h2>
          <p className="sw-section__lead">{t('stats.subline')}</p>
        </div>
        <div className="sw-stats__grid" ref={gridRef}>
          {STATS.map(s => (
            <div key={s.id} className={'sw-stat sw-stat--' + s.accent}>
              <div className="sw-stat__value">
                <CountUpValue raw={t(s.valueKey)} active={inView} />
              </div>
              <div className="sw-stat__label">{t(s.labelKey)}</div>
              <div className="sw-stat__source">{t(s.sourceKey)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Customer logos grid ──────────────────────────────────────────────────
function CustomersSection() {
  const t = useT();
  return (
    <section className="sw-customers" id="customers">
      <div className="sw-container">
        <div className="sw-section__head sw-section__head--center">
          <Eyebrow>{t('sp.eyebrow')}</Eyebrow>
          <h2 className="sw-section__h2">{t('sp.headline')}</h2>
        </div>
        <div className="sw-customers__grid">
          {CUSTOMERS.map((c, i) => <CustomerLogo key={i} {...c} />)}
        </div>
      </div>
    </section>
  );
}

// ─── Pricing ──────────────────────────────────────────────────────────────
function PricingSection({ layout }) {
  const t = useT();
  return (
    <section className="sw-pricing" id="pricing" data-screen-label="Pricing">
      <div className="sw-container">
        <div className="sw-section__head sw-section__head--center">
          <Eyebrow>{t('pr.eyebrow')}</Eyebrow>
          <h2 className="sw-section__h2">{t('pr.headline')}</h2>
          <p className="sw-section__lead">{t('pr.subline')}</p>
        </div>

        {layout === 'cards' && <PricingCards t={t} />}
        {layout === 'table' && (
          <>
            <div className="sw-pricing__table-wrap"><PricingTable t={t} /></div>
            <div className="sw-pricing__cards-mobile"><PricingCards t={t} /></div>
          </>
        )}

        <div className="sw-pricing__notes">
          <p>{t('pr.note.1')}</p>
          <p>{t('pr.note.2')}</p>
        </div>
      </div>
    </section>
  );
}

function PricingCards({ t }) {
  return (
    <div className="sw-pricing__cards">
      {PLANS.map(plan => (
        <article key={plan.id} className={'sw-plan ' + (plan.popular ? 'is-popular' : '')}>
          {plan.popular && <div className="sw-plan__badge">{t('pr.popular')}</div>}
          <div className="sw-plan__head">
            <div className="sw-plan__name">{t(plan.nameKey)}</div>
            <div className="sw-plan__tag">{t(plan.tagKey)}</div>
          </div>
          <div className="sw-plan__price">
            <span className="sw-plan__amount">{t(plan.priceKey)}</span>
            {plan.id !== 'free' && plan.id !== 'custom' && <span className="sw-plan__per">{t('pr.month')}</span>}
          </div>
          {plan.id !== 'free' && plan.id !== 'custom' && <div className="sw-plan__billing">{t('pr.billing')}</div>}
          <div className="sw-plan__contacts">
            {plan.id === 'custom' ? t('pr.contactsRaw', { n: t(plan.contactsKey) }) : t('pr.contactsUpTo', { n: t(plan.contactsKey) })}
          </div>
          <ul className="sw-plan__features">
            {plan.features.map(f => (
              <li key={f}><CheckIcon /><span>{t(f)}</span></li>
            ))}
          </ul>
          <div className="sw-plan__cta">
            <PrimaryButton href="https://calendly.com/claudiobuda/30min" target="_blank" rel="noopener" variant={plan.popular ? 'yellow' : 'outline'} onClick={() => trackEvent('cta_plan', { plan_id: plan.id })}>
              {t(plan.ctaKey)}
            </PrimaryButton>
          </div>
        </article>
      ))}
    </div>
  );
}

function PricingTable({ t }) {
  // Compact comparison table — same content, denser layout.
  const rows = [
    { label: 'pr.contactsUpTo.label', values: ['pr.free.contacts','pr.starter.contacts','pr.pro.contacts'], isContact: true },
    { label: null, headerPrice: true },
    { label: 'pr.free.f1', values: ['pr.free.f1','pr.starter.f1','pr.pro.f1'] },
    { label: 'pr.free.f2', values: ['pr.free.f2','pr.starter.f2','pr.pro.f2'] },
    { label: 'pr.free.f3', values: ['pr.free.f3','pr.starter.f3','pr.pro.f3'] },
    { label: 'pr.free.f4', values: ['pr.free.f4','pr.starter.f4','pr.pro.f4'] },
    { label: 'pr.free.f5', values: ['pr.free.f5','pr.starter.f5','pr.pro.f5'] },
  ];
  return (
    <div className="sw-pricing-table">
      <div className="sw-pt__head">
        <div className="sw-pt__cell sw-pt__cell--first"></div>
        {PLANS.map(p => (
          <div key={p.id} className={'sw-pt__cell sw-pt__col-h ' + (p.popular ? 'is-popular' : '')}>
            {p.popular && <span className="sw-pt__badge">{t('pr.popular')}</span>}
            <div className="sw-pt__name">{t(p.nameKey)}</div>
            <div className="sw-pt__price">
              <span>{t(p.priceKey)}</span>
              {p.id !== 'free' && p.id !== 'custom' && <small>{t('pr.month')}</small>}
            </div>
            {p.id !== 'free' && p.id !== 'custom' && <div className="sw-pt__billing">{t('pr.billing')}</div>}
            <div className="sw-pt__contacts">{p.id === 'custom' ? t('pr.contactsRaw', { n: t(p.contactsKey) }) : t('pr.contactsUpTo', { n: t(p.contactsKey) })}</div>
          </div>
        ))}
      </div>
      <div className="sw-pt__body">
        {[0,1,2,3,4].map(i => (
          <div key={i} className="sw-pt__row">
            <div className="sw-pt__cell sw-pt__cell--first sw-pt__cell--lbl">
              {[i18nLabelFor(i)]}
            </div>
            {PLANS.map(p => {
              const baseKey = 'pr.' + p.id + '.f' + (i+1);
              const valKey = baseKey + '.value';
              const valRaw = t(valKey);
              const val = valRaw === valKey ? t(baseKey) : valRaw;
              const lc = val.toLowerCase();
              const notIncluded = val === '—' || lc.includes('non incluso') || lc.includes('not included');
              return (
                <div key={p.id} className={'sw-pt__cell ' + (p.popular ? 'is-popular' : '')}>
                  {notIncluded ? <NotIncludedIcon /> : <><CheckIcon /><span>{val}</span></>}
                </div>
              );
            })}
          </div>
        ))}
      </div>
      <div className="sw-pt__foot">
        <div className="sw-pt__cell sw-pt__cell--first"></div>
        {PLANS.map(p => (
          <div key={p.id} className={'sw-pt__cell ' + (p.popular ? 'is-popular' : '')}>
            <PrimaryButton href="https://calendly.com/claudiobuda/30min" target="_blank" rel="noopener" variant={p.popular ? 'yellow' : 'outline'} size="sm" onClick={() => trackEvent('cta_plan', { plan_id: p.id })}>
              {t(p.ctaKey)}
            </PrimaryButton>
          </div>
        ))}
      </div>
    </div>
  );
}

// helper for pricing-table row labels (the channel name shown on the left col)
function i18nLabelFor(i) {
  const labels = ['Email', 'Telegram', 'WhatsApp *', 'Push **', 'SMS'];
  return labels[i];
}

function NotIncludedIcon() {
  return (
    <svg className="sw-check sw-check--no" viewBox="0 0 18 18" fill="none" aria-hidden="true">
      <circle cx="9" cy="9" r="9" fill="rgba(0,0,0,0.08)" />
      <path d="M 5 9 L 13 9" stroke="rgba(0,0,0,0.5)" strokeWidth="1.8" strokeLinecap="round" />
    </svg>
  );
}

function CheckIcon() {
  return (
    <svg className="sw-check" viewBox="0 0 18 18" fill="none" aria-hidden="true">
      <circle cx="9" cy="9" r="9" fill="var(--st-yellow)" />
      <path d="M 5 9.5 L 8 12.2 L 13 6.2" stroke="#000" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    </svg>
  );
}

// ─── FAQ ──────────────────────────────────────────────────────────────────
function FaqSection() {
  const t = useT();
  const [open, setOpen] = useState(0);
  return (
    <section className="sw-faq" id="faq" data-screen-label="FAQ">
      <div className="sw-container">
        <div className="sw-section__head">
          <Eyebrow>{t('faq.eyebrow')}</Eyebrow>
          <h2 className="sw-section__h2">{t('faq.headline')}</h2>
        </div>
        <div className="sw-faq__list">
          {FAQS.map((f, i) => (
            <details key={i} open={open === i} onToggle={e => { if (e.currentTarget.open) { trackEvent('faq_open', { index: i }); setOpen(i); } }}>
              <summary>
                <span>{t(f.q)}</span>
                <span className="sw-faq__plus" aria-hidden="true">
                  <svg width="20" height="20" viewBox="0 0 20 20"><path d="M 5 10 H 15 M 10 5 V 15" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
                </span>
              </summary>
              <div className="sw-faq__a">{t(f.a)}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Final CTA ────────────────────────────────────────────────────────────
function FinalCta() {
  const t = useT();
  return (
    <section className="sw-finalcta" id="contact" data-screen-label="Final CTA">
      <div className="sw-container sw-finalcta__inner">
        <div className="sw-finalcta__left">
          <Eyebrow dark accent>{t('cta.eyebrow')}</Eyebrow>
          <h2 className="sw-finalcta__h2">{t('cta.headline')}</h2>
          <p className="sw-finalcta__sub">{t('cta.subline')}</p>
          <div className="sw-finalcta__actions">
            <PrimaryButton href="https://calendly.com/claudiobuda/30min" target="_blank" rel="noopener" size="lg" onClick={() => trackEvent('cta_final_primary', { section: 'final' })}>{t('cta.button')}</PrimaryButton>
            <a className="sw-finalcta__email" href="mailto:showtime@mangomobi.com" onClick={() => trackEvent('cta_final_email', { section: 'final' })}>{t('cta.email.note')}</a>
          </div>
        </div>
        <div className="sw-finalcta__right" aria-hidden="true">
          <BrandMark size={280} on="black" />
        </div>
      </div>
    </section>
  );
}

// ─── Footer ───────────────────────────────────────────────────────────────
function SiteFooter() {
  const t = useT();
  const { lang, setLang } = useLang();
  return (
    <footer className="sw-footer">
      <div className="sw-container sw-footer__inner">
        <div className="sw-footer__brand">
          <Wordmark height={26} color="var(--st-white)" />
          <p className="sw-footer__tagline">{t('foot.tagline')}</p>
          <div className="sw-footer__pins">
            <ChannelPin id="email"    size={28} />
            <ChannelPin id="whatsapp" size={28} />
            <ChannelPin id="telegram" size={28} />
            <ChannelPin id="sms"      size={28} />
            <ChannelPin id="push"     size={28} />
          </div>
        </div>
        <div className="sw-footer__cols">
          <div className="sw-footer__col">
            <div className="sw-footer__col-h">{t('foot.col1')}</div>
            <ul>
              <li><a href="#channels">{t('nav.channels')}</a></li>
              <li><a href="#pricing">{t('nav.pricing')}</a></li>
              <li><a href="#faq">{t('nav.faq')}</a></li>
            </ul>
          </div>
          <div className="sw-footer__col">
            <div className="sw-footer__col-h">{t('foot.col2')}</div>
            <ul>
              <li><a href="https://www.mangomobi.com" target="_blank" rel="noopener">{t('foot.col2.1')}</a></li>
              <li><a href="#customers">{t('foot.col2.2')}</a></li>
            </ul>
          </div>
          <div className="sw-footer__col">
            <div className="sw-footer__col-h">{t('foot.col4')}</div>
            <ul>
              <li><a href="/privacy-policy/">{t('foot.col4.1')}</a></li>
              <li><a href="/cookie-policy/">{t('foot.col4.2')}</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div className="sw-container sw-footer__bottom">
        <span className="sw-footer__copy">{t('foot.copyright')}</span>
        <div className="sw-lang sw-lang--dark" role="tablist" aria-label="Language">
          <button role="tab" aria-selected={lang==='it'} className={lang==='it' ? 'is-on' : ''} onClick={() => setLang('it')}>IT</button>
          <span className="sw-lang__sep" />
          <button role="tab" aria-selected={lang==='en'} className={lang==='en' ? 'is-on' : ''} onClick={() => setLang('en')}>EN</button>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  SiteNav, HeroSection, MarqueeStrip, PainSection, SolutionBridge,
  ChannelsSection, StatsSection, CustomersSection, PricingSection,
  FaqSection, FinalCta, SiteFooter,
});