/* ---- SVG ICONS ---- */ const Icon = ({ n, s = 20 }) => { const d = { doc: <>, pos: <>, chart: <>, ai: <>, warehouse: <>, calc: <>, shield: <>, truck: <>, check: , mail: <>, pin: <>, clock: <>, globe: <>, close: <>, arrow: <> }; return ( ); }; /* ---- NAV ---- */ const Nav = ({ lang, setLang, t, scrolled }) => { const links = [ { label: t.nav.home, href: '#inicio' }, { label: t.nav.about, href: '#nosotros' }, { label: t.nav.services, href: '#servicios' }, { label: t.nav.plans, href: '#planes' }, { label: t.nav.contact, href: '#contacto' }]; return ( ); }; /* ---- HERO ---- */ const Hero = ({ t }) =>
TXS
{t.hero.badge}

{t.hero.t1}
{t.hero.t2}

{t.hero.sub}

{[ { n: t.hero.s1n, l: t.hero.s1l }, { n: t.hero.s2n, l: t.hero.s2l }, { n: t.hero.s3n, l: t.hero.s3l }, { n: t.hero.s4n, l: t.hero.s4l }]. map((s, i) =>
{s.n}
{s.l}
)}
; /* ---- ABOUT ---- */ const About = ({ t }) =>
{t.about.tag}

{t.about.title}

{t.about.p1}

{t.about.p2}

{t.about.p3}

{[ { icon: 'chart', title: t.about.f1t, desc: t.about.f1d }, { icon: 'ai', title: t.about.f2t, desc: t.about.f2d }, { icon: 'clock', title: t.about.f3t, desc: t.about.f3d }]. map((f, i) =>

{f.title}

{f.desc}

)}
; /* ---- SERVICES ---- */ const Services = ({ t }) =>
{t.services.tag}

{t.services.title}

{t.services.sub}

{t.services.items.map((item, i) =>

{item.t}

{item.d}

)}
; /* ---- SCREENSHOTS ---- */ const Screenshots = ({ t }) => { const [active, setActive] = React.useState(0); const imgs = [ 'uploads/Captura Dashboard TXS.jpg', 'uploads/Captura Pedido TXS.jpg', 'uploads/Captura Calculadora TXS.jpg', 'uploads/Captura Gest usuarios TXS.jpg']; return (
{t.screenshots.tag}

{t.screenshots.title}

{t.screenshots.sub}

{t.screenshots.tabs.map((tab, i) => )}
app.tilexpertsoftware.com
{t.screenshots.tabs[active]}
); }; /* ---- TESTIMONIALS ---- */ const Testimonials = ({ t }) =>
{t.testimonials.tag}

{t.testimonials.title}

{t.testimonials.items.map((item, i) =>
{'★★★★★'.split('').map((s, j) => {s})}

{item.text}

{item.avatar}
{item.name}
{item.role} · {item.company}
)}
; /* ---- PLANS ---- */ const Plans = ({ t }) => { const badgeClass = { rec: 'badge-rec', lim: 'badge-lim', cus: 'badge-cus' }; return (
{t.plans.tag}

{t.plans.title}

{t.plans.sub}

{t.plans.items.map((plan, i) =>
{plan.badge ?
{plan.badge}
: }
{plan.name}
{plan.users}

{plan.desc}

{plan.high.map((h, j) =>
{h}
)}
{plan.feats.map((f, j) =>
{f}
)}
{t.plans.cta}
)}
); }; /* ---- CONTACT ---- */ const Contact = ({ t }) => { const [form, setForm] = React.useState({ name: '', company: '', email: '', phone: '', plan: '', message: '' }); const [sent, setSent] = React.useState(false); const set = (k, v) => setForm((p) => ({ ...p, [k]: v })); const submit = (e) => { e.preventDefault(); setSent(true); }; return (
{t.contact.tag}

{t.contact.title}

{t.contact.sub}

{sent ?

{t.contact.ok_title}

{t.contact.ok_text}

:
set('name', e.target.value)} placeholder={t.contact.f_name} />
set('company', e.target.value)} placeholder={t.contact.f_company} />
set('email', e.target.value)} placeholder="hola@empresa.com" />
set('phone', e.target.value)} placeholder="+34 600 000 000" />
}
{t.contact.ci_title}
{[ { icon: 'mail', label: t.contact.ci_emailL, val: t.contact.ci_email }, { icon: 'pin', label: t.contact.ci_locL, val: t.contact.ci_loc }, { icon: 'clock', label: t.contact.ci_schL, val: t.contact.ci_sch }]. map((item, i) =>
{item.label} {item.val}
)}
); }; /* ---- FOOTER ---- */ const Footer = ({ t, onLegal }) =>
TXS

{t.footer.tagline}

{t.footer.navTitle}
{t.footer.navLinks.map((lnk, i) => {lnk} )}
{t.footer.legalTitle}
{['aviso', 'privacidad', 'cookies', 'terminos'].map((key, i) => onLegal(key)}>{t.footer.legalLinks[i]} )}
{t.footer.copy}
{['aviso', 'privacidad', 'cookies', 'terminos'].map((key, i) => onLegal(key)}>{t.footer.legalLinks[i]} )}
; /* ---- LEGAL MODAL ---- */ const LegalModal = ({ type, t, onClose }) => { const content = t.legal[type]; if (!content) return null; return (
{if (e.target === e.currentTarget) onClose();}}>

{content.title}

{content.body.map((sec, i) =>

{sec.h}

{sec.p}

)}
); }; /* ---- APP ---- */ const App = () => { const [lang, setLang] = React.useState('es'); const [scrolled, setScrolled] = React.useState(false); const [modal, setModal] = React.useState(null); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 50); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const t = window.T[lang]; return (
); }; ReactDOM.createRoot(document.getElementById('root')).render();