/* Klipzy.lv — Marketing / info pages:
   Cenas, Klipotājiem, Zīmoliem, Par mums, Blogs, Kontakti, Palīdzība.
   All bilingual (LV/EN) via useLang(). */

/* ---- shared building blocks ---- */
function InfoHeader({ go, lang, eyebrow, title, accent, subtitle, noBack }) {
  return (
    <div style={{ borderBottom: '1px solid var(--border)', background: 'linear-gradient(180deg, var(--accent-tint) 0%, #fff 100%)' }}>
      <div className="container" style={{ padding: '46px 28px 40px' }}>
        {!noBack && (
        <button className="btn btn-ghost btn-sm" style={{ paddingLeft: 6, color: 'var(--muted)', marginBottom: 16 }} onClick={() => go('landing')}>
          <Icon d={I.arrowL} size={16} /> {lang === 'en' ? 'Home' : 'Sākums'}
        </button>
        )}
        <h1 style={{ fontSize: 42, letterSpacing: '-0.035em', lineHeight: 1.05, marginTop: 12 }}>
          {title} {accent && <span style={{ color: 'var(--accent)' }}>{accent}</span>}
        </h1>
        {subtitle && <p className="muted" style={{ fontSize: 17, marginTop: 14, maxWidth: 640, lineHeight: 1.55 }}>{subtitle}</p>}
      </div>
    </div>
  );
}

function InfoCTA({ go, lang, title, text, primary, onPrimary, secondary, onSecondary }) {
  return (
    <div className="container" style={{ padding: '10px 28px 80px' }}>
      <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--r-xl)', background: 'linear-gradient(120deg,#1E3A8A,#2563EB)', color: '#fff', padding: '46px 44px', textAlign: 'center' }}>
        <div aria-hidden="true" style={{ position: 'absolute', right: -60, top: -60, width: 260, height: 260, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,.14), transparent 70%)' }} />
        <h2 style={{ fontSize: 30, letterSpacing: '-0.03em', position: 'relative' }}>{title}</h2>
        <p style={{ fontSize: 16, opacity: .9, marginTop: 12, maxWidth: 520, margin: '12px auto 0', lineHeight: 1.55, position: 'relative' }}>{text}</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 26, flexWrap: 'wrap', position: 'relative' }}>
          <button className="btn btn-lg" style={{ background: '#fff', color: 'var(--accent-700)' }} onClick={onPrimary}>{primary}</button>
          {secondary && <button className="btn btn-lg" style={{ background: 'rgba(255,255,255,.14)', color: '#fff', border: '1px solid rgba(255,255,255,.3)' }} onClick={onSecondary}>{secondary}</button>}
        </div>
      </div>
    </div>
  );
}

function InfoSteps({ steps }) {
  return (
    <div className="r-grid3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
      {steps.map((s, i) => (
        <div key={i} className="card" style={{ padding: 26 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
            <span style={{ width: 40, height: 40, borderRadius: 11, background: 'var(--accent)', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 17, fontWeight: 600, flex: 'none' }}>{i + 1}</span>
            <span style={{ color: 'var(--accent-700)' }}><Icon d={I[s.icon]} size={22} /></span>
          </div>
          <h3 style={{ fontSize: 17.5 }}>{s.title}</h3>
          <p className="muted" style={{ fontSize: 14.5, marginTop: 8, lineHeight: 1.6 }}>{s.text}</p>
        </div>
      ))}
    </div>
  );
}

function InfoFeatures({ items }) {
  return (
    <div className="r-grid3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
      {items.map((f, i) => (
        <div key={i} className="card" style={{ padding: 24 }}>
          <span style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--accent-tint)', color: 'var(--accent-700)', display: 'grid', placeItems: 'center' }}><Icon d={I[f.icon]} size={21} /></span>
          <h3 style={{ fontSize: 16.5, marginTop: 14 }}>{f.title}</h3>
          <p className="muted" style={{ fontSize: 14, marginTop: 7, lineHeight: 1.6 }}>{f.text}</p>
        </div>
      ))}
    </div>
  );
}

function InfoSectionHead({ eyebrow, title, sub, center }) {
  return (
    <div style={{ maxWidth: 620, marginBottom: 30, ...(center ? { marginLeft: 'auto', marginRight: 'auto', textAlign: 'center' } : {}) }}>
      {eyebrow && <span className="eyebrow">{eyebrow}</span>}
      <h2 style={{ fontSize: 30, letterSpacing: '-0.025em', marginTop: 10 }}>{title}</h2>
      {sub && <p className="muted" style={{ fontSize: 16, marginTop: 10, lineHeight: 1.55 }}>{sub}</p>}
    </div>
  );
}

/* ============================== CENAS ============================== */
function PricingPage({ go }) {
  const lang = useLang();
  const L = (lv, en) => (lang === 'en' ? en : lv);
  const plans = [
    {
      icon: 'megaphone', tag: L('Zīmoliem', 'For brands'),
      title: L('Maksā par skatījumiem', 'Pay per views'),
      price: L('1%', '1%'), priceSub: L('kampaņas izveides komisija', 'campaign creation fee'),
      desc: L('Nav abonēšanas. Tu nosaki cenu par 1 000 skatījumiem un kopējo budžetu — maksā tikai par reāliem rezultātiem.', 'No subscription. You set the price per 1,000 views and total budget — pay only for real results.'),
      bullets: [
        L('Cenu par 1 000 skatījumiem nosaki pats (soļi pa 0,05 €)', 'You set the price per 1,000 views (in €0.05 steps)'),
        L('1% izveides komisija par katru kampaņu', '1% creation fee per campaign'),
        L('Budžets tiek droši rezervēts kampaņas laikā', 'Budget is securely reserved during the campaign'),
        L('Neizmantoto budžetu saņem atpakaļ', 'Unused budget is refunded to you'),
        L('Maksimālais izmaksas limits par vienu klipu', 'Maximum payout cap per single clip'),
      ],
      cta: L('Reģistrēt zīmolu', 'Register a brand'), onCta: () => go('auth', { mode: 'register', role: 'brand' }),
    },
    {
      icon: 'film', tag: L('Klipotājiem', 'For clippers'),
      title: L('Pelni par klipiem', 'Earn from clips'),
      price: L('Bezmaksas', 'Free'), priceSub: L('pievienošanās un lietošana', 'to join and use'),
      desc: L('Pievienojies bez maksas un pelni par katriem 1 000 skatījumiem, ko tavi klipi sasniedz.', 'Join for free and earn for every 1,000 views your clips reach.'),
      bullets: [
        L('Bezmaksas pievienošanās un pieteikšanās kampaņām', 'Free to join and apply to campaigns'),
        L('Izmaksa par katriem 1 000 skatījumiem', 'Payout for every 1,000 views'),
        L('2% komisija, izņemot līdzekļus', '2% fee when cashing out'),
        L('+1% par tūlītēju izmaksu (citādi līdz 7 dienām)', '+1% for instant payout (otherwise up to 7 days)'),
        L('Skatījumi tiek verificēti automātiski', 'Views are verified automatically'),
      ],
      cta: L('Kļūt par klipotāju', 'Become a clipper'), onCta: () => go('auth', { mode: 'register', role: 'clipper' }), accent: true,
    },
  ];
  const fees = [
    [L('Kampaņas izveide (zīmols)', 'Campaign creation (brand)'), '1%'],
    [L('Budžeta papildināšana (zīmols)', 'Adding budget (brand)'), '1%'],
    [L('Līdzekļu izņemšana (klipotājs)', 'Cash-out (clipper)'), '2%'],
    [L('Tūlītēja izmaksa (klipotājs)', 'Instant payout (clipper)'), L('+1% papildus', '+1% extra')],
    [L('Pievienošanās un pieteikšanās', 'Joining and applying'), '€0'],
  ];
  return (
    <div className="app-scroll fade-in" style={{ height: '100%' }}>
      <PublicNav go={go} route="pricing" lang={lang} />
      <InfoHeader go={go} lang={lang} eyebrow={L('Cenas', 'Pricing')}
        title={L('Maksā tikai par', 'Pay only for')} accent={L('rezultātu', 'results')}
        subtitle={L('Nekādu slēptu maksu. Zīmoli maksā par skatījumiem, klipotāji pelna par skatījumiem — vienkārši un caurspīdīgi.', 'No hidden fees. Brands pay for views, clippers earn from views — simple and transparent.')} />

      <div className="container" style={{ padding: '44px 28px 20px' }}>
        <div className="r-grid2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {plans.map((p) => (
            <div key={p.tag} className="card" style={{ padding: 32, border: p.accent ? '1.5px solid var(--accent)' : '1px solid var(--border)', display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ width: 46, height: 46, borderRadius: 12, background: 'var(--accent-tint)', color: 'var(--accent-700)', display: 'grid', placeItems: 'center' }}><Icon d={I[p.icon]} size={22} /></span>
                <span className="pill pill-accent">{p.tag}</span>
              </div>
              <h2 style={{ fontSize: 22, marginTop: 18 }}>{p.title}</h2>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 10 }}>
                <span className="tnum" style={{ fontSize: 38, fontWeight: 600, letterSpacing: '-0.03em', color: 'var(--accent-700)' }}>{p.price}</span>
                <span className="muted" style={{ fontSize: 13.5 }}>{p.priceSub}</span>
              </div>
              <p className="muted" style={{ fontSize: 14.5, marginTop: 12, lineHeight: 1.6 }}>{p.desc}</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11, margin: '20px 0 24px' }}>
                {p.bullets.map((b) => (
                  <div key={b} style={{ display: 'flex', gap: 10, fontSize: 14.5, color: 'var(--text-2)', lineHeight: 1.45 }}>
                    <span style={{ color: 'var(--accent)', flex: 'none', marginTop: 1 }}><Icon d={I.check} size={17} sw={2.4} /></span>{b}
                  </div>
                ))}
              </div>
              <button className={'btn btn-lg btn-block ' + (p.accent ? 'btn-primary' : 'btn-secondary')} style={{ marginTop: 'auto' }} onClick={p.onCta}>{p.cta}</button>
            </div>
          ))}
        </div>
      </div>

      <div className="container" style={{ padding: '30px 28px 40px' }}>
        <InfoSectionHead eyebrow={L('Komisiju pārskats', 'Fee overview')} title={L('Visas komisijas vienā vietā', 'All fees in one place')} />
        <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
          {fees.map(([k, v], i) => (
            <div key={k} className="spread" style={{ padding: '16px 22px', borderTop: i ? '1px solid var(--border)' : 'none' }}>
              <span style={{ fontSize: 14.5, color: 'var(--text-2)' }}>{k}</span>
              <span className="tnum" style={{ fontSize: 15, fontWeight: 600, color: 'var(--accent-700)' }}>{v}</span>
            </div>
          ))}
        </div>
        <div className="legal-note" style={{ marginTop: 18 }}>
          <Icon d={I.info} size={16} />
          <div>{L('Izmaksu komisijas tiek ieturētas no izmaksājamās summas — piemēram, izņemot 1 000 €, 2% komisija ir 20 € un tu saņem 980 €.', 'Cash-out fees are deducted from the withdrawn amount — e.g. withdrawing €1,000, the 2% fee is €20 and you receive €980.')}</div>
        </div>
      </div>

      <InfoCTA go={go} lang={lang}
        title={L('Gatavs sākt?', 'Ready to start?')}
        text={L('Pievienojies Latvijas pirmajai klipu kampaņu platformai jau šodien.', "Join Latvia's first clip campaign platform today.")}
        primary={L('Reģistrēties', 'Sign up')} onPrimary={() => go('auth', { mode: 'register' })}
        secondary={L('Skatīt kampaņas', 'View campaigns')} onSecondary={() => go('marketplace')} />
      <Footer go={go} lang={lang} />
    </div>
  );
}

/* ============================ KLIPOTĀJIEM ========================== */
function ClippersPage({ go }) {
  const lang = useLang();
  const L = (lv, en) => (lang === 'en' ? en : lv);
  const steps = [
    { icon: 'search', title: L('Atrodi kampaņu', 'Find a campaign'), text: L('Pārlūko aktīvās zīmolu kampaņas, salīdzini cenas par 1 000 skatījumiem un izvēlies sev piemērotāko nišu.', 'Browse active brand campaigns, compare prices per 1,000 views and choose the niche that fits you.') },
    { icon: 'film', title: L('Izveido klipu', 'Create a clip'), text: L('Uzņem un samontē īsformāta klipu pēc zīmola vadlīnijām un publicē to TikTok, Instagram vai YouTube.', 'Film and edit a short-form clip following the brand’s guidelines and post it on TikTok, Instagram or YouTube.') },
    { icon: 'wallet', title: L('Saņem samaksu', 'Get paid'), text: L('Iesniedz klipa saiti — skatījumi tiek izsekoti automātiski, un samaksa par katriem 1 000 skatījumiem nonāk tavā kontā.', 'Submit the clip link — views are tracked automatically and payment for every 1,000 views lands in your account.') },
  ];
  const feats = [
    { icon: 'wallet', title: L('Maksā par rezultātu', 'Paid for results'), text: L('Jo vairāk skatījumu, jo vairāk pelni. Nav fiksētu maksu vai griestu ienākumiem.', 'The more views, the more you earn. No fixed fees or income caps.') },
    { icon: 'refresh', title: L('Automātiska izsekošana', 'Automatic tracking'), text: L('Skatījumi tiek iegūti tieši no platformām un verificēti — bez manuālas ziņošanas.', 'Views are pulled directly from platforms and verified — no manual reporting.') },
    { icon: 'shield', title: L('Droši maksājumi', 'Secure payouts'), text: L('Budžets tiek rezervēts jau kampaņas sākumā, tāpēc tavi ieņēmumi ir garantēti.', 'Budget is reserved when the campaign starts, so your earnings are guaranteed.') },
    { icon: 'book', title: L('Mācības un padomi', 'Learning & tips'), text: L('Bezmaksas nodarbības, kas palīdz veidot klipus, kuri pelna vairāk skatījumu.', 'Free lessons that help you create clips that earn more views.') },
    { icon: 'spark', title: L('Vairākas platformas', 'Multiple platforms'), text: L('Publicē TikTok, Instagram un YouTube — jo plašāk, jo labāk.', 'Post on TikTok, Instagram and YouTube — the wider the better.') },
    { icon: 'clock', title: L('Ātras izmaksas', 'Fast payouts'), text: L('Izņem līdzekļus 7 dienu laikā vai izvēlies tūlītēju izmaksu par nelielu maksu.', 'Withdraw within 7 days or choose an instant payout for a small fee.') },
  ];
  return (
    <div className="app-scroll fade-in" style={{ height: '100%' }}>
      <PublicNav go={go} route="for-clippers" lang={lang} />
      <InfoHeader go={go} lang={lang} eyebrow={L('Klipotājiem', 'For clippers')}
        title={L('Pelni, veidojot klipus', 'Earn by creating clips for')} accent={L('zīmoliem', 'brands')}
        subtitle={L('Publicē klipus un pelni par sasniegtajiem skatījumiem. Bez ieguldījumiem, bez riska — tikai tavs talants.', 'Post clips and earn for the views you reach. No investment, no risk — just your talent.')} />

      <div className="container" style={{ padding: '44px 28px 40px' }}>
        <InfoSectionHead eyebrow={L('Kā tas darbojas', 'How it works')} title={L('Trīs soļi līdz pirmajai izmaksai', 'Three steps to your first payout')} />
        <InfoSteps steps={steps} />
      </div>

      <div className="container" style={{ padding: '10px 28px 46px' }}>
        <InfoSectionHead eyebrow={L('Priekšrocības', 'Benefits')} title={L('Kāpēc klipot ar Klipzy', 'Why clip with Klipzy')} />
        <InfoFeatures items={feats} />
      </div>

      <InfoCTA go={go} lang={lang}
        title={L('Sāc pelnīt jau šodien', 'Start earning today')}
        text={L('Izveido bezmaksas klipotāja kontu un pievienojies pirmajai kampaņai dažu minūšu laikā.', 'Create a free clipper account and join your first campaign in minutes.')}
        primary={L('Sākt klipot', 'Start clipping')} onPrimary={() => go('auth', { mode: 'register', role: 'clipper' })}
        secondary={L('Skatīt kampaņas', 'View campaigns')} onSecondary={() => go('marketplace')} />
      <Footer go={go} lang={lang} />
    </div>
  );
}

/* ============================= ZĪMOLIEM ============================ */
function BrandsPage({ go }) {
  const lang = useLang();
  const L = (lv, en) => (lang === 'en' ? en : lv);
  const steps = [
    { icon: 'megaphone', title: L('Izveido kampaņu', 'Create a campaign'), text: L('Nosaki cenu par 1 000 skatījumiem, budžetu, platformas un satura vadlīnijas. Kampaņa parādās klipotāju tirgū.', 'Set the price per 1,000 views, budget, platforms and content guidelines. Your campaign appears in the clipper marketplace.') },
    { icon: 'users', title: L('Klipotāji veido saturu', 'Clippers create content'), text: L('Desmitiem klipotāju veido un publicē klipus par tavu zīmolu dažādās platformās.', 'Dozens of clippers create and publish clips about your brand across platforms.') },
    { icon: 'wallet', title: L('Maksā tikai par rezultātu', 'Pay only for results'), text: L('Tu maksā tikai par reāliem, verificētiem skatījumiem — nevis par cerībām vai fiksētām likmēm.', 'You pay only for real, verified views — not for hopes or fixed rates.') },
  ];
  const feats = [
    { icon: 'chart', title: L('Garantēti skatījumi', 'Guaranteed views'), text: L('Budžets tiek tērēts tikai par sasniegtiem skatījumiem. Neizmantotais tiek atgriezts.', 'Budget is spent only on views achieved. Anything unused is refunded.') },
    { icon: 'shield', title: L('Pārbaudīts saturs', 'Verified content'), text: L('Katru klipu vispirms apstiprini tu — tikai atbilstošs saturs sāk pelnīt.', 'You approve every clip first — only compliant content starts earning.') },
    { icon: 'refresh', title: L('Reāllaika dati', 'Real-time data'), text: L('Seko skatījumiem, tēriņiem un klipotājiem savā panelī reāllaikā.', 'Track views, spend and clippers in your dashboard in real time.') },
    { icon: 'lock', title: L('Droša budžeta pārvaldība', 'Safe budget control'), text: L('Rezervētais budžets nekad nevar tikt pārtērēts — stingra kontrole serverī.', 'Reserved budget can never be overspent — strict server-side control.') },
    { icon: 'spark', title: L('Vairākas platformas', 'Multiple platforms'), text: L('Sasniedz auditoriju TikTok, Instagram un YouTube vienlaikus.', 'Reach audiences on TikTok, Instagram and YouTube at once.') },
    { icon: 'trophy', title: L('Bez fiksētām maksām', 'No fixed fees'), text: L('Tikai 1% izveides maksa. Nekādu abonēšanu vai slēptu izmaksu.', 'Just a 1% creation fee. No subscriptions or hidden costs.') },
  ];
  return (
    <div className="app-scroll fade-in" style={{ height: '100%' }}>
      <PublicNav go={go} route="for-brands" lang={lang} />
      <InfoHeader go={go} lang={lang} eyebrow={L('Zīmoliem', 'For brands')}
        title={L('Pārbaudīts saturs un', 'Proven content and')} accent={L('garantēti rezultāti', 'guaranteed results')}
        subtitle={L('Sasniedz auditoriju ar klipiem un maksā tikai par rezultātiem. Desmitiem klipotāju strādā tava zīmola labā.', 'Reach audiences with clips and pay only for results. Dozens of clippers work for your brand.')} />

      <div className="container" style={{ padding: '44px 28px 40px' }}>
        <InfoSectionHead eyebrow={L('Kā tas darbojas', 'How it works')} title={L('No kampaņas līdz rezultātiem', 'From campaign to results')} />
        <InfoSteps steps={steps} />
      </div>

      <div className="container" style={{ padding: '10px 28px 46px' }}>
        <InfoSectionHead eyebrow={L('Priekšrocības', 'Benefits')} title={L('Kāpēc zīmoli izvēlas Klipzy', 'Why brands choose Klipzy')} />
        <InfoFeatures items={feats} />
      </div>

      <InfoCTA go={go} lang={lang}
        title={L('Gatavs redzēt rezultātus?', 'Ready to see results?')}
        text={L('Izveido kampaņu un ļauj klipotājiem izplatīt tavu zīmolu ar garantētiem skatījumiem.', 'Create a campaign and let clippers spread your brand with guaranteed views.')}
        primary={L('Pievienot zīmolu', 'Add a brand')} onPrimary={() => go('auth', { mode: 'register', role: 'brand' })} />
      <Footer go={go} lang={lang} />
    </div>
  );
}

/* ============================= PAR MUMS =========================== */
function AboutPage({ go }) {
  const lang = useLang();
  const L = (lv, en) => (lang === 'en' ? en : lv);
  const ps = usePlatformStats();
  const { campaigns } = useCampaigns();
  const activeCount = campaigns.filter((c) => (c.status || 'active') === 'active').length;
  // Match the homepage stat band exactly: derive from public campaign aggregates
  // with platform-stats as the richer source when available.
  const campViews = campaigns.reduce((s, c) => s + (Number(c.views) || 0), 0);
  const campSpent = campaigns.reduce((s, c) => s + (Number(c.spent) || 0), 0);
  const totalViews = (ps && ps.totalViews) || campViews;
  const paidOut = (ps && ps.paidOut) || campSpent;
  const fmtPaid = (n) => { const s = (Math.round(Number(n) || 0)).toLocaleString('lv-LV').replace(/\u00a0/g, ' '); return lang === 'en' ? '€' + s : s + ' €'; };
  const fmtBig = (n) => {
    n = Number(n) || 0;
    if (n >= 1e6) return (n / 1e6).toFixed(n % 1e6 === 0 ? 0 : 1).replace('.', ',') + 'M';
    if (n >= 1000) return (n / 1000).toFixed(n % 1000 === 0 ? 0 : 1).replace('.', ',') + 'K';
    return String(n);
  };
  const clipperSet = new Set();
  campaigns.forEach((c) => (Array.isArray(c.clipperUids) ? c.clipperUids : []).forEach((u) => clipperSet.add(u)));
  const clipperCount = (ps && ps.clipperCount) || clipperSet.size;
  const stats = [
    [fmtPaid(paidOut), L('Izmaksāts klipotājiem', 'Paid to clippers')],
    [fmtBig(totalViews), L('Kopējie skatījumi', 'Total views')],
    [String(activeCount), L('Aktīvās kampaņas', 'Active campaigns')],
    [String(clipperCount), L('Klipotāji', 'Clippers')],
  ];
  const values = [
    { icon: 'wallet', title: L('Maksā par rezultātu', 'Pay for results'), text: L('Nekādu tukšu solījumu — tikai reāli, izsekojami skatījumi.', 'No empty promises — only real, trackable views.') },
    { icon: 'shield', title: L('Caurspīdīgums', 'Transparency'), text: L('Skaidras maksas, atklāta uzskaite un godīga izmaksa abām pusēm.', 'Clear fees, open accounting and fair payouts for both sides.') },
    { icon: 'users', title: L('Klipotāji pirmajā vietā', 'Clippers first'), text: L('Mēs veidojam rīkus, kas ļauj klipotājiem pelnīt no sava talanta.', 'We build tools that let clippers earn from their talent.') },
  ];
  return (
    <div className="app-scroll fade-in" style={{ height: '100%' }}>
      <PublicNav go={go} route="about" lang={lang} />
      <InfoHeader go={go} lang={lang} eyebrow=""
        title={L('Mēs savienojam', 'We connect')} accent={L('klipotājus un zīmolus', 'clippers and brands')}
        subtitle={L('Klipzy ir Latvijas klipu kampaņu platforma, kas ļauj zīmoliem maksāt par reāliem skatījumiem un klipotājiem pelnīt no sava satura.', "Klipzy is Latvia's clip campaign platform that lets brands pay for real views and clippers earn from their content.")} />

      <div className="container" style={{ padding: '44px 28px 20px' }}>
        <div className="r-rail" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 44, alignItems: 'start' }}>
          <div>
            <InfoSectionHead eyebrow={L('Mūsu stāsts', 'Our story')} title={L('Kāpēc mēs izveidojām Klipzy', 'Why we built Klipzy')} />
            <p className="legal-p">{L('Zīmoli gadiem maksā par reklāmām, kuras rezultātus grūti izmērīt, savukārt talantīgi klipotāji nespēja monetizēt savu saturu. Mēs redzējām vienkāršu risinājumu - savienot abus tā, lai maksātu tikai par reāliem skatījumiem.', 'Brands spent years paying for advertising with results that were hard to measure, while talented creators struggled to monetize their content. We saw a simple fix — connect the two so payment happens only for real views.')}</p>
            <p className="legal-p">{L('Šodien Klipzy automātiski izseko un verificē skatījumus TikTok, Instagram un YouTube, aprēķina izmaksas un aizsargā abu pušu līdzekļus - viss vienā platformā.', 'Today Klipzy automatically tracks and verifies views on TikTok, Instagram Reels and YouTube Shorts, calculates payouts and protects both sides\u2019 funds — all in one platform.')}</p>
          </div>
          <div className="card" style={{ padding: 30 }}>
            <div className="r-grid2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              {stats.map(([a, b]) => (
                <div key={b}>
                  <div className="tnum" style={{ fontSize: 34, fontWeight: 600, letterSpacing: '-0.03em', color: 'var(--accent-700)' }}>{a}</div>
                  <div className="muted" style={{ fontSize: 13.5, marginTop: 4 }}>{b}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="container" style={{ padding: '34px 28px 50px' }}>
        <InfoSectionHead eyebrow={L('Vērtības', 'Values')} title={L('Kas mūs vada', 'What drives us')} />
        <InfoFeatures items={values} />
      </div>

      <InfoCTA go={go} lang={lang}
        title={L('Pievienojies Klipzy', 'Join Klipzy')}
        text={L('Neatkarīgi no tā, vai esi klipotājs vai zīmols — mēs palīdzēsim tev augt.', 'Whether you are a clipper or a brand — we will help you grow.')}
        primary={L('Sākt tagad', 'Get started')} onPrimary={() => go('auth', { mode: 'register' })}
        secondary={L('Sazināties', 'Contact us')} onSecondary={() => go('contact')} />
      <Footer go={go} lang={lang} />
    </div>
  );
}

/* ============================== BLOGS ============================= */
function BlogPage({ go }) {
  const lang = useLang();
  const L = (lv, en) => (lang === 'en' ? en : lv);
  const K = window.KLIPZY;
  const posts = K.articles;
  const featured = posts[0];
  return (
    <div className="app-scroll fade-in" style={{ height: '100%' }}>
      <PublicNav go={go} route="blog" lang={lang} />
      <InfoHeader go={go} lang={lang} eyebrow={L('Blogs', 'Blog')} noBack
        title={L('Idejas, padomi un', 'Ideas, tips and')} accent={L('jaunumi', 'news')}
        subtitle={L('Raksti par klipu veidošanu, algoritmiem un to, kā gūt vairāk no īsformāta satura.', 'Articles about clip creation, algorithms and getting more from short-form content.')} />

      <div className="container" style={{ padding: '40px 28px 70px' }}>
        {/* featured */}
        <div className="card r-rail" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', overflow: 'hidden', cursor: 'pointer', marginBottom: 34, boxShadow: 'var(--sh-md)' }} onClick={() => go('article', { id: featured.id, from: 'blog' })}>
          <GradTile grad={featured.grad} radius={0} style={{ minHeight: 240, display: 'grid', placeItems: 'center' }}>
            <span style={{ width: 56, height: 56, borderRadius: 999, background: 'rgba(255,255,255,.25)', backdropFilter: 'blur(4px)', display: 'grid', placeItems: 'center', color: '#fff' }}><Icon d={I.play} size={24} fill="#fff" stroke="none" /></span>
          </GradTile>
          <div style={{ padding: '30px 32px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <span className="pill pill-accent" style={{ alignSelf: 'flex-start' }}>{lang === 'en' ? (featured.catEn || featured.cat) : featured.cat}</span>
            <h2 style={{ fontSize: 25, marginTop: 14, letterSpacing: '-0.02em', lineHeight: 1.2 }}>{lang === 'en' ? (featured.titleEn || featured.title) : featured.title}</h2>
            <p className="muted" style={{ fontSize: 15, marginTop: 12, lineHeight: 1.55 }}>{lang === 'en' ? (featured.excerptEn || featured.excerpt) : featured.excerpt}</p>
            <div className="muted" style={{ fontSize: 13, marginTop: 16, display: 'flex', alignItems: 'center', gap: 6 }}><Icon d={I.clock} size={14} /> {featured.read}</div>
          </div>
        </div>

        <div className="r-grid3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
          {posts.slice(1, 1).map((a) => (
            <div key={a.id} className="card" style={{ overflow: 'hidden', cursor: 'pointer', display: 'flex', flexDirection: 'column', transition: 'box-shadow .16s, transform .16s' }}
              onClick={() => go('article', { id: a.id, from: 'blog' })}
              onMouseEnter={(e) => { e.currentTarget.style.boxShadow = 'var(--sh-md)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.boxShadow = 'var(--sh-sm)'; e.currentTarget.style.transform = 'none'; }}>
              <GradTile grad={a.grad} radius={0} style={{ aspectRatio: '16/9' }} />
              <div style={{ padding: 18, flex: 1, display: 'flex', flexDirection: 'column' }}>
                <span className="pill pill-niche" style={{ alignSelf: 'flex-start' }}>{lang === 'en' ? (a.catEn || a.cat) : a.cat}</span>
                <h3 style={{ fontSize: 16.5, marginTop: 11, lineHeight: 1.25 }}>{lang === 'en' ? (a.titleEn || a.title) : a.title}</h3>
                <p className="muted" style={{ fontSize: 13.5, marginTop: 8, lineHeight: 1.5, flex: 1 }}>{lang === 'en' ? (a.excerptEn || a.excerpt) : a.excerpt}</p>
                <div className="muted" style={{ fontSize: 12.5, marginTop: 14, display: 'flex', alignItems: 'center', gap: 6 }}><Icon d={I.clock} size={13} /> {a.read}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <Footer go={go} lang={lang} />
    </div>
  );
}

/* ============================= KONTAKTI =========================== */
function ContactPage({ go }) {
  const lang = useLang();
  const L = (lv, en) => (lang === 'en' ? en : lv);
  const [f, setF] = useState({ name: '', email: '', subject: '', message: '' });
  const [sent, setSent] = useState(false);
  const set = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    if (!f.name || !f.email || !f.message) return;
    try { if (window.KlipzyFirebase && window.KlipzyFirebase.submitContactMessage) await window.KlipzyFirebase.submitContactMessage({ ...f, source: 'contact' }); } catch (_) {}
    setSent(true);
  };
  const channels = [
    { icon: 'inbox', title: L('Vispārīgi jautājumi', 'General enquiries'), value: 'info@klipzy.lv', href: 'mailto:info@klipzy.lv' },
    { icon: 'shield', title: L('Privātums', 'Privacy'), value: 'privatums@klipzy.lv', href: 'mailto:privatums@klipzy.lv' },
    { icon: 'lock', title: L('Drošība', 'Security'), value: 'drosiba@klipzy.lv', href: 'mailto:drosiba@klipzy.lv' },
    { icon: 'building', title: L('Atrašanās vieta', 'Location'), value: L('Rīga, Latvija', 'Riga, Latvia') },
  ];
  return (
    <div className="app-scroll fade-in" style={{ height: '100%' }}>
      <PublicNav go={go} route="contact" lang={lang} />
      <InfoHeader go={go} lang={lang} eyebrow={L('Kontakti', 'Contact')}
        title={L('Sazinies ar', 'Get in touch with')} accent={L('mums', 'us')}
        subtitle={L('Ir jautājums vai priekšlikums? Uzraksti mums — atbildam 2 darba dienu laikā.', 'Have a question or an idea? Write to us — we reply within 2 business days.')} />

      <div className="container" style={{ padding: '44px 28px 70px' }}>
        <div className="r-rail" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 40, alignItems: 'start' }}>
          {/* form */}
          <div className="card" style={{ padding: 30 }}>
            {sent ? (
              <div style={{ textAlign: 'center', padding: '30px 10px' }}>
                <div style={{ width: 56, height: 56, borderRadius: 999, background: 'var(--green-tint)', color: 'var(--green)', display: 'grid', placeItems: 'center', margin: '0 auto 16px' }}><Icon d={I.check} size={28} sw={2.4} /></div>
                <h3 style={{ fontSize: 20 }}>{L('Paldies! Ziņa nosūtīta.', 'Thanks! Message sent.')}</h3>
                <p className="muted" style={{ fontSize: 14.5, marginTop: 8, lineHeight: 1.55 }}>{L('Mēs sazināsimies ar tevi pēc iespējas ātrāk.', 'We will get back to you as soon as possible.')}</p>
                <button className="btn btn-secondary" style={{ marginTop: 20 }} onClick={() => { setSent(false); setF({ name: '', email: '', subject: '', message: '' }); }}>{L('Nosūtīt vēl vienu', 'Send another')}</button>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div className="r-grid2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <div className="field required"><label>{L('Vārds', 'Name')}</label><input className="input" required value={f.name} onChange={set('name')} placeholder={L('Tavs vārds', 'Your name')} /></div>
                  <div className="field required"><label>{L('E-pasts', 'Email')}</label><input className="input" required type="email" value={f.email} onChange={set('email')} placeholder="tu@example.lv" /></div>
                </div>
                <div className="field"><label>{L('Tēma', 'Subject')}</label><input className="input" value={f.subject} onChange={set('subject')} placeholder={L('Par ko ir jautājums?', 'What is it about?')} /></div>
                <div className="field required"><label>{L('Ziņa', 'Message')}</label><textarea className="textarea" required rows="6" value={f.message} onChange={set('message')} placeholder={L('Pastāsti mums vairāk…', 'Tell us more…')} /></div>
                <button className="btn btn-primary btn-lg" type="submit" style={{ alignSelf: 'flex-start' }}><Icon d={I.send} size={17} /> {L('Nosūtīt ziņu', 'Send message')}</button>
              </form>
            )}
          </div>

          {/* channels */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {channels.map((c) => {
              const inner = (
                <>
                  <span style={{ width: 42, height: 42, borderRadius: 11, background: 'var(--accent-tint)', color: 'var(--accent-700)', display: 'grid', placeItems: 'center', flex: 'none' }}><Icon d={I[c.icon]} size={20} /></span>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13, color: 'var(--muted)' }}>{c.title}</div>
                    <div style={{ fontSize: 15, fontWeight: 540, color: c.href ? 'var(--accent-700)' : 'var(--text)' }}>{c.value}</div>
                  </div>
                </>
              );
              return c.href
                ? <a key={c.title} href={c.href} className="card" style={{ padding: 18, display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none', boxShadow: 'none' }}>{inner}</a>
                : <div key={c.title} className="card" style={{ padding: 18, display: 'flex', alignItems: 'center', gap: 14, boxShadow: 'none' }}>{inner}</div>;
            })}
            <div className="pill" style={{ alignSelf: 'flex-start', marginTop: 4 }}>🇱🇻 {L('Pieejams Latvijā', 'Available in Latvia')}</div>
          </div>
        </div>
      </div>
      <Footer go={go} lang={lang} />
    </div>
  );
}

/* ============================= PALĪDZĪBA ========================== */
function HelpPage({ go }) {
  const lang = useLang();
  const L = (lv, en) => (lang === 'en' ? en : lv);
  const [open, setOpen] = useState(0);
  const faqs = [
    { q: L('Kā sākt pelnīt kā klipotājs?', 'How do I start earning as a clipper?'), a: L('Izveido kontu Klipzy, izvēlies aktīvu kampaņu, izveido klipu balstoties uz vadlīnijām un iesniedz izveidoto klipu (līdz 60 minūtēm pēc publikācijas). Skatījumiem tiks sekots līdzi automātiski, un Tu pelnīsi balstoties un iegūtajiem skatījumiem.', 'Create a Klipzy account, choose an active campaign and make a clip following the campaign guidelines. Publish it, submit it to Klipzy within 60 minutes, and you’re done. We’ll track your views automatically and calculate your earnings from them.') },
    { q: L('Kā tiek verificēti skatījumi?', 'How are views verified?'), a: L('Skatījumi tiek iegūti tieši no TikTok, Instagram un YouTube publiskajiem datiem ik pēc 24 stundām (vai pēc zīmola pieprasījuma). Mākslīgi skatījumi netiek pieņemti un tiks anulēti.', 'Views are pulled directly from TikTok, Instagram and YouTube public data every 24 hours (or at the brand’s request). Artificial views are not accepted and will be voided.') },
    { q: L('Cik ātri es saņemu izmaksu?', 'How fast do I get paid?'), a: L('Standarta izmaksa nonāk tevis izvēlētā kontā līdz 7 dienu laikā. Par papildus 1% komisiju vari izvēlēties tūlītēju izmaksu.', 'Standard payouts arrive within 7 days. If you don’t want to wait, you can choose an instant payout for an extra 1% fee.') },
    { q: L('Kā zīmols izveido kampaņu?', 'How does a brand create a campaign?'), a: L('Reģistrējies Klipzy kā zīmols, papildini konta bilanci, sāc veidot kampaņu norādot cenu par 1,000 skatījumiem, budžetu, platformas un vadlīnijas. Kampaņa pēc publicēšanas uzreiz būs pieejama klipotājiem.', 'Register on Klipzy as a brand and top up your balance. Then create a campaign by choosing your price per 1,000 views, budget, platforms and guidelines. Once you publish it, clippers can start participating right away.') },
    { q: L('Kas notiek ar neizmantoto budžetu?', 'What happens to unused budget?'), a: L('Ja kampaņa tiek pauzēta vai dzēsta pirms budžets ir iztērēts, neizmantotā summa tiks atgriezta jūsu Klipzy kontā un redzama maksājumu vēsturē kā atmaksa.', 'If a campaign is paused or deleted before the budget is spent, the unused amount is returned to your Klipzy account and shown in payment history as a refund.') },
    { q: L('Vai pievienošanās maksā?', 'Is joining free?'), a: L('Klipotājiem — Pievienošanās un pieteikšanās kampaņām ir bezmaksas. Zīmoliem — 1% komisijas maksa tiek piemērota kampaņas izveidei.', 'For clippers, yes. Joining Klipzy and applying to campaigns is completely free. Brands pay a 1% fee when creating a campaign.') },
    { q: L('Kā verificēt savu sociālo tīklu kontu?', 'How do I verify my social account?'), a: L('Iestatījumos ģenerē unikālu kodu, pievieno to sava TikTok vai Instagram profila aprakstā un nospied "Verificēt". Ja pārbaudot viss sakrīt, konts tiek apstiprināts.', 'Go to Settings and generate your unique verification code. Add the code to your TikTok or Instagram bio, then come back to Klipzy and press “Verify.” Once we find the code on your profile, your account will be verified.') },
    { q: L('Kur var apgūt klipu veidošanu?', 'Where can I learn to make clips?'), a: (<span>{L('Sadaļā ', 'In the ')}<a onClick={() => go('academy')} style={{ color: 'var(--accent-700)', cursor: 'pointer', fontWeight: 540 }}>{L('Mācības', 'Learning')}</a>{L(' atradīsi bezmaksas video sērijas, kas palīdzēs izprast, kas ir klipošana, kā pareizi klipot, kļūdas no kurām izvairīties un mākslīgā intelekta iekļaušana klipošanā.', ' section you’ll find free video series that help you understand what clipping is, how to clip properly, mistakes to avoid, and using artificial intelligence in clipping.', ' section for free video series on how clipping works, how to make better clips, common mistakes to avoid, and how to use AI in your workflow.')}</span>) },
  ];
  const quick = [
    { icon: 'film', title: L('Klipotājiem', 'For clippers'), text: L('Kā pelnīt un iesniegt klipus', 'How to earn and submit clips'), go: () => go('for-clippers') },
    { icon: 'megaphone', title: L('Zīmoliem', 'For brands'), text: L('Kā izveidot kampaņas', 'How to create campaigns'), go: () => go('for-brands') },
    { icon: 'wallet', title: L('Cenas', 'Pricing'), text: L('Maksas un izmaksas', 'Fees and payouts'), go: () => go('pricing') },
    { icon: 'book', title: L('Mācības', 'Learning'), text: L('Nodarbības un padomi', 'Lessons and tips'), go: () => go('academy') },
  ];
  return (
    <div className="app-scroll fade-in" style={{ height: '100%' }}>
      <PublicNav go={go} route="help" lang={lang} />
      <InfoHeader go={go} lang={lang} eyebrow={L('Palīdzība', 'Help')}
        title={L('Kā mēs varam', 'How can we')} accent={L('palīdzēt?', 'help?')}
        subtitle={L('Atbildes uz biežāk uzdotajiem jautājumiem par klipošanu, kampaņām un maksājumiem.', 'Answers to the most common questions about clipping, campaigns and payments.')} />

      <div className="container" style={{ padding: '40px 28px 20px' }}>
        <div className="r-grid4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginBottom: 44 }}>
          {quick.map((q) => (
            <button key={q.title} className="card" style={{ padding: 20, textAlign: 'left', cursor: 'pointer', transition: 'all .14s' }} onClick={q.go}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.boxShadow = 'var(--sh-md)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.boxShadow = 'var(--sh-sm)'; }}>
              <span style={{ width: 40, height: 40, borderRadius: 11, background: 'var(--accent-tint)', color: 'var(--accent-700)', display: 'grid', placeItems: 'center', marginBottom: 12 }}><Icon d={I[q.icon]} size={20} /></span>
              <div style={{ fontSize: 15, fontWeight: 560 }}>{q.title}</div>
              <div className="muted" style={{ fontSize: 13, marginTop: 4, lineHeight: 1.4 }}>{q.text}</div>
            </button>
          ))}
        </div>

        <InfoSectionHead center eyebrow={L('BUJ', 'FAQ')} title={L('Biežāk uzdotie jautājumi', 'Frequently asked questions')} />
        <div style={{ maxWidth: 800, margin: '0 auto' }}>
          {faqs.map((f, i) => {
            const on = open === i;
            return (
              <div key={i} className="card" style={{ padding: 0, marginBottom: 12, overflow: 'hidden' }}>
                <button className="faq-q" onClick={() => setOpen(on ? -1 : i)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '18px 22px', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', fontSize: 16, fontWeight: 540, color: 'var(--text)' }}>
                  {f.q}
                  <span style={{ color: 'var(--accent)', flex: 'none', transition: 'transform .18s', transform: on ? 'rotate(45deg)' : 'none' }}><Icon d={I.plus} size={20} /></span>
                </button>
                {on && <div style={{ padding: '0 22px 20px', fontSize: 14.5, color: 'var(--text-2)', lineHeight: 1.65 }}>{f.a}</div>}
              </div>
            );
          })}
        </div>
      </div>

      <InfoCTA go={go} lang={lang}
        title={L('Neatradi atbildi?', "Didn't find an answer?")}
        text={L('Mūsu komanda labprāt palīdzēs. Uzraksti mums ar savu jautājumu vai problēmu un atbildēsim pēc iespējas ātrāk.', 'Our team is happy to help. Write to us with your question or issue and we will reply as soon as possible.')}
        primary={L('Sazināties', 'Contact us')} onPrimary={() => go('contact')} />
      <Footer go={go} lang={lang} />
    </div>
  );
}

Object.assign(window, { PricingPage, ClippersPage, BrandsPage, AboutPage, BlogPage, ContactPage, HelpPage, NotFound });

function NotFound({ go, lang, setLang, aud, setAud }) {
  const L = (lv, en) => (lang === 'en' ? en : lv);
  return (
    <div className="app-scroll fade-in" style={{ height: '100%' }}>
      <PublicNav go={go} route="" aud={aud} setAud={setAud} lang={lang} setLang={setLang} />
      <div className="container" style={{ padding: '120px 28px', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <div style={{ fontSize: 96, fontWeight: 700, letterSpacing: '-0.05em', lineHeight: 1, color: 'var(--accent)' }}>404</div>
        <h1 style={{ fontSize: 30, letterSpacing: '-0.03em', marginTop: 18 }}>{L('Lapa nav atrasta', 'Page not found')}</h1>
        <p className="muted" style={{ fontSize: 16.5, marginTop: 12, maxWidth: 460, lineHeight: 1.55 }}>{L('Šī lapa neeksistē vai ir pārvietota. Pārbaudi saiti vai atgriezies sākumā.', 'This page doesn\u2019t exist or has moved. Check the link or head back home.')}</p>
        <div style={{ display: 'flex', gap: 12, marginTop: 30 }}>
          <button className="btn btn-primary btn-lg" onClick={() => go('landing')}>{L('Uz sākumu', 'Back home')}</button>
          <button className="btn btn-secondary btn-lg" onClick={() => go('marketplace')}>{L('Kampaņas', 'Campaigns')}</button>
        </div>
      </div>
      <Footer go={go} lang={lang} />
    </div>
  );
}