/* global React */ const { useState, useEffect, useRef } = React; // ==================== i18n HOOK ==================== // Subscribes to SMi18n language changes and re-renders the component. function useLang() { const [lang, setLang] = useState(() => window.SMi18n?.lang || 'es'); useEffect(() => { if (!window.SMi18n) return; return window.SMi18n.onChange(setLang); }, []); return { lang, t: (key) => window.SMi18n?.t(key) ?? key, }; } // ==================== Cuba flag (SVG) ==================== const CubaFlag = (p) => ( ); // Cleaner star shape const CubaFlagSimple = (p) => ( ); // ==================== ICONS ==================== const Icon = { Bolt: (p) => , Shield: (p) => , Globe: (p) => , Check: (p) => , Arrow: (p) => , Phone: (p) => , Wifi: (p) => , Lock: (p) => , Clock: (p) => , Plus: (p) => , Star: (p) => , Send: (p) => , Mail: (p) => , Msg: (p) => , Target: (p) => , Heart: (p) => , Zap: (p) => , FB: (p) => , IG: (p) => , WA: (p) => , Crown: (p) => , }; // ==================== NAV ==================== function Logo() { return ( SMCUBA ); } // Smart in-page scroll; falls through to href if element not found (different page). function navScroll(id, type) { return (e) => { const el = document.getElementById(id); if (el) { e.preventDefault(); el.scrollIntoView({ behavior: 'smooth' }); if (type) window.dispatchEvent(new CustomEvent('sm:setType', { detail: type })); } }; } function Nav({ mobile = false }) { const [hasSession, setHasSession] = useState(false); const [open, setOpen] = useState(false); const { t, lang } = useLang(); useEffect(() => { let cancelled = false; if (window.SMAuth && window.SMAuth.session) { window.SMAuth.session().then(s => { if (!cancelled) setHasSession(!!s); }); } const { data: sub } = (window.supabaseClient?.auth?.onAuthStateChange( (_e, sess) => { if (!cancelled) setHasSession(!!sess); } )) || { data: null }; return () => { cancelled = true; sub?.subscription?.unsubscribe?.(); }; }, []); const close = () => setOpen(false); const toggleLang = () => window.SMi18n?.setLang(lang === 'es' ? 'en' : 'es'); const links = <> {t('nav.home')} {navScroll('recargas','movil')(e); close();}}>{t('nav.movil')} {navScroll('recargas','nauta')(e); close();}}>{t('nav.nauta')} {navScroll('promociones')(e); close();}}>{t('nav.promos')} {navScroll('faq')(e); close();}}>{t('nav.ayuda')} ; const cta = hasSession ? {t('nav.mi_cuenta')} : {t('nav.iniciar')} ; return ( <> {open && (
{links}
{cta}
)} ); } // ==================== DB OFFERS HOOKS ==================== // Simple module-level cache to avoid redundant DB calls. let _dbOffersCache = null; let _dbPromoCache = null; function useDbOffers() { const [offers, setOffers] = useState(null); // null = loading/fallback useEffect(() => { if (_dbOffersCache) { setOffers(_dbOffersCache); return; } if (!window.supabaseClient) return; window.supabaseClient .from('offers').select('*').eq('active', true).order('type').order('sort_order') .then(({ data }) => { if (!data || !data.length) return; const g = { movil: [], nauta: [] }; data.forEach(o => { g[o.type]?.push({ id: o.id, amount: o.name, desc: (o.features || []).map(f => f.join(': ')).join(' · '), price: parseFloat(o.price), was: o.was_price ? parseFloat(o.was_price) : undefined, badge: o.badge, cup: o.cup_value ? parseFloat(o.cup_value) : 0, bonus: o.bonus_cup ? parseFloat(o.bonus_cup) : 0, service: o.type, }); }); if (g.movil.length + g.nauta.length > 0) { _dbOffersCache = g; setOffers(g); } }); }, []); return offers; // null = use fallback OFFERS constant } function useDbPromos() { const [promos, setPromos] = useState(null); useEffect(() => { if (_dbPromoCache) { setPromos(_dbPromoCache); return; } if (!window.supabaseClient) return; window.supabaseClient .from('offers').select('*').eq('active', true).eq('featured', true).order('sort_order') .then(({ data }) => { if (!data || !data.length) return; const list = data.map(o => ({ type: o.type === 'movil' ? 'Móvil' : 'Nauta', name: o.name, features: (o.features || []).map(([k, v]) => [k, v]), now: parseFloat(o.price), was: o.was_price ? parseFloat(o.was_price) : null, tag: o.badge, featured: o.featured, })); _dbPromoCache = list; setPromos(list); }); }, []); return promos; } // ==================== HERO (with integrated Recarga Flash) ==================== const OFFERS = { movil: [ { id: 'm1', amount: '80 minutos', desc: 'Duración 35 días · Llamadas nacionales', price: 5.99, was: 7.99, badge: 'Oferta' }, { id: 'm2', amount: '40 minutos', desc: 'Duración 35 días · Llamadas nacionales', price: 3.99 }, { id: 'm3', amount: '250 CUP', desc: 'Saldo principal · 30 días', price: 4.50 }, { id: 'm4', amount: '500 CUP', desc: 'Saldo principal · 30 días', price: 8.99, badge: 'Popular' }, ], nauta: [ { id: 'n1', amount: 'Nauta Plus 15 días', desc: 'Internet ilimitado', price: 8.50, was: 14.00, badge: 'Oferta' }, { id: 'n2', amount: 'Nauta 1 GB', desc: '30 días', price: 4.00 }, { id: 'n3', amount: 'Nauta 5 GB', desc: '30 días', price: 12.00, badge: 'Mejor valor' }, { id: 'n4', amount: 'Nauta 10 USD', desc: 'Saldo cuenta Nauta', price: 10.00 }, ], }; function FlashCard({ variant }) { const [type, setType] = useState('movil'); const [selected, setSelected] = useState('m1'); const [phone, setPhone] = useState(''); const [flashErr, setFlashErr] = useState(''); const dbOffers = useDbOffers(); const activeOffers = dbOffers || OFFERS; const { t } = useLang(); useEffect(() => { const first = activeOffers[type]?.[0]?.id || (type==='movil'?'m1':'n1'); setSelected(first); }, [type, dbOffers]); // Listen for nav "Recargas Nauta / Móvil" click events useEffect(() => { const h = (e) => setType(e.detail); window.addEventListener('sm:setType', h); return () => window.removeEventListener('sm:setType', h); }, []); const list = (activeOffers[type] || []).slice(0, 4); return (

{t('flash.title')}

{t('flash.live')}
{type === 'nauta' ? (
setPhone(e.target.value.replace(/\s/g,'').toLowerCase())} autoComplete="off" /> @nauta.com.cu
) : (
+53 setPhone(e.target.value.replace(/\D/g,'').slice(0,8))} />
)}
{list.map(o => ( ))}
{flashErr && (
{flashErr}
)}
{t('flash.ssl')} {t('flash.fast')}
); } function HeroPhoto() { return (
FOTO · PERSONA CUBANA CON MÓVIL
M
María, La Habana Recibió $5.99 hace 2 min
Entrega garantizada En menos de 60 segundos
); } function Hero({ variant, mobile = false }) { const { t } = useLang(); return (
{t('hero.eyebrow')}

{t('hero.sub')}

{t('hero.chip1')} {t('hero.chip2')} {t('hero.chip3')}

{variant === 'photo' ? : }
); } // ==================== TRUST BAR ==================== function Counter({ to, suffix = '', prefix = '' }) { const [n, setN] = useState(0); const ref = useRef(null); useEffect(() => { let raf; const duration = 1400; const start = performance.now(); const step = (t) => { const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setN(Math.floor(to * eased)); if (p < 1) raf = requestAnimationFrame(step); else setN(to); }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, [to]); return {prefix}{n.toLocaleString()}{suffix}; } function TrustBar() { const { t } = useLang(); return (
{t('trust.recargas')}
< 1 min {t('trust.entrega')}
24/7 {t('trust.soporte')}
4.9 / 5.0 de +3,200 {t('trust.resenas')}
); } // ==================== HOW IT WORKS ==================== function HowItWorks() { const { t } = useLang(); const steps = [ { n: '01', title: t('how.s1.title'), desc: t('how.s1.desc'), icon: }, { n: '02', title: t('how.s2.title'), desc: t('how.s2.desc'), icon: }, { n: '03', title: t('how.s3.title'), desc: t('how.s3.desc'), icon: }, ]; return (
{t('how.eyebrow')}

{t('how.sub')}

{steps.map(s => (
{s.icon}
{s.n}

{s.title}

{s.desc}

))}
); } // ==================== PROMOS ==================== const FALLBACK_PROMOS = [ { type: 'Móvil', name: 'Recarga 80 minutos', features: [['Duración', '35 días'], ['Incluye', '80 min nacionales'], ['Activación', 'Inmediata']], now: 5.99, was: 7.99, tag: 'Oferta', featured: false }, { type: 'Nauta', name: 'Nauta Plus 15 días', features: [['Internet', 'Ilimitado'], ['Válido por', '15 días'], ['Tipo', 'Nauta Hogar']], now: 8.50, was: 14.00, tag: '-40%', featured: true }, { type: 'Móvil', name: 'Recarga 500 CUP', features: [['Saldo', '500 CUP'], ['Duración', '30 días'], ['Bono', '+50 SMS']], now: 8.99, was: null, tag: 'Popular', featured: false }, ]; function Promos() { const dbPromos = useDbPromos(); const promos = dbPromos || FALLBACK_PROMOS; const { t } = useLang(); return (
{t('promos.eyebrow')}

{t('promos.sub')}

{promos.map((p, i) => (
{p.tag && {p.tag}}
{p.type}

{p.name}

    {p.features.map(([k,v], j) => (
  • {k}: {v}
    • ))}
${p.now.toFixed(2)} {p.was && ${p.was.toFixed(2)}}
))}
); } // ==================== FAQ ==================== function FAQ() { const [open, setOpen] = useState(0); const { t } = useLang(); const items = [ { q: t('faq.q1'), a: t('faq.a1') }, { q: t('faq.q2'), a: t('faq.a2') }, { q: t('faq.q3'), a: t('faq.a3') }, { q: t('faq.q4'), a: t('faq.a4') }, { q: t('faq.q5'), a: t('faq.a5') }, ]; return (
{t('faq.eyebrow')}

{items.map((it, i) => (
{it.a}
))}
); } // ==================== CONTACT ==================== function Contact() { return ( ); } function ContactSection() { const [form, setForm] = useState({ first:'', last:'', email:'', phone:'', message:'' }); const [fieldErrs, setFieldErrs] = useState({}); const [token, setToken] = useState(''); const [msg, setMsg] = useState(''); const [sending, setSending] = useState(false); const turnstileRef = useRef(null); const { t } = useLang(); useEffect(() => { let cancelled = false; const ensureScript = () => new Promise(resolve => { if (window.turnstile) return resolve(); if (document.getElementById('cf-turnstile-script')) { const i = setInterval(()=>{ if (window.turnstile){ clearInterval(i); resolve(); } }, 100); return; } const s = document.createElement('script'); s.id = 'cf-turnstile-script'; s.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit'; s.async = true; s.defer = true; s.onload = () => resolve(); document.head.appendChild(s); }); ensureScript().then(() => { if (cancelled || !turnstileRef.current) return; const SITEKEY = window.SM_TURNSTILE_SITEKEY || '1x00000000000000000000AA'; window.turnstile.render(turnstileRef.current, { sitekey: SITEKEY, callback: (tk) => setToken(tk), 'expired-callback': () => setToken(''), 'error-callback': () => setToken(''), }); }); return () => { cancelled = true; }; }, []); const validate = () => { const e = {}; if (!form.first.trim()) e.first = t('contact.val.first_req'); else if (/\d/.test(form.first)) e.first = t('contact.val.first_num'); else if (form.first.trim().length < 2) e.first = t('contact.val.first_min'); if (!form.last.trim()) e.last = t('contact.val.last_req'); else if (/\d/.test(form.last)) e.last = t('contact.val.last_num'); else if (form.last.trim().length < 2) e.last = t('contact.val.last_min'); if (!form.email.trim()) e.email = t('contact.val.email_req'); else if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(form.email.trim())) e.email = t('contact.val.email_inv'); if (form.phone && !/^\+?[0-9 ()-]{6,20}$/.test(form.phone.trim())) e.phone = t('contact.val.phone_inv'); if (!form.message.trim()) e.message = t('contact.val.msg_req'); else if (form.message.trim().length < 10) e.message = `${t('contact.val.msg_min')} (${form.message.trim().length} ${t('contact.val.msg_written')}).`; return e; }; const setField = (f) => (ev) => { const val = f === 'phone' ? ev.target.value.replace(/[^0-9+ ()-]/g,'') : ev.target.value; setForm(prev => ({...prev, [f]: val})); if (fieldErrs[f]) setFieldErrs(prev => ({...prev, [f]: ''})); }; const onSubmit = async (e) => { e.preventDefault(); setMsg(''); const errs = validate(); setFieldErrs(errs); if (Object.keys(errs).length > 0) return; if (!token) { setFieldErrs({_: t('contact.err_robot')}); return; } setSending(true); try { const { error } = await window.supabaseClient.from('support_tickets').insert({ first_name: form.first.trim(), last_name: form.last.trim(), email: form.email.trim(), phone: form.phone.trim() || null, message: form.message.trim(), turnstile_token: token, }); if (error) throw error; setMsg(t('contact.success_pre') + form.email.trim() + '.'); setForm({ first:'', last:'', email:'', phone:'', message:'' }); setFieldErrs({}); if (window.turnstile) window.turnstile.reset(); setToken(''); } catch (ex) { setFieldErrs({_: t('contact.err_send')}); } finally { setSending(false); } }; const inp = (f, full) => `sm-contact__input${full?' sm-contact__input--full':''} sm-cfield__inp${fieldErrs[f]?' sm-cfield__inp--err':''}`; return (

{t('contact.desc')}

WhatsApp · +1 (305) 555-0123
{t('contact.support')}

{fieldErrs.first && {fieldErrs.first}}
{fieldErrs.last && {fieldErrs.last}}
{fieldErrs.email && {fieldErrs.email}}
{fieldErrs.phone && {fieldErrs.phone}}