// BRITXIA — Home · KLEO protagonista + GSAP
(function () {
  const { useState, useEffect } = React;
  const BX = window.BX;
  const NAVY = BX.navy, ORANGE = BX.orange, CREAM = BX.cream;
  const H = '"Poppins", system-ui, sans-serif';
  const B = '"Inter", system-ui, sans-serif';
  const M = '"JetBrains Mono", ui-monospace, monospace';
  const LIGHT = '#F3EEE6';
  const BLUE = '#1A6DB5';
  const BORD = 'rgba(13,27,42,0.10)';

  // ── Inject keyframes once ──────────────────────────────────────
  if (!document.getElementById('bx-home-styles')) {
    const s = document.createElement('style');
    s.id = 'bx-home-styles';
    s.textContent = `
      @keyframes bxDot{0%,80%,100%{transform:scale(.6);opacity:.35}40%{transform:scale(1);opacity:1}}
      @keyframes bxFloat{0%,100%{transform:translateY(0) rotateX(2deg) rotateY(-3deg)}50%{transform:translateY(-10px) rotateX(-1deg) rotateY(2deg)}}
      .prod-visual{perspective:900px;perspective-origin:50% 50%}
      .dev-3d{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.23,1,.32,1)}
      .prod-row:hover .dev-3d{transform:rotateX(-4deg) rotateY(5deg) scale(1.03)!important}
      .prod-row.rev:hover .dev-3d{transform:rotateX(-4deg) rotateY(-5deg) scale(1.03)!important}
      @keyframes bxBar{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1)}}
      @keyframes bxProg{from{width:0!important}}
      .btn-hover{transition:transform .2s,box-shadow .2s}\n      .btn-hover:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(245,166,35,.45)}\n      .btn-ghost-hover{transition:border-color .2s,color .2s}\n      .btn-ghost-hover:hover{border-color:rgba(248,244,238,.75)!important;color:#fff!important}\n      .btn-link-hover{transition:opacity .2s,letter-spacing .2s}\n      .btn-link-hover:hover{opacity:1!important;letter-spacing:.3px}
    `;
    document.head.appendChild(s);
  }


  // ── i18n hook ──────────────────────────────────────────────────
  function useLang() {
    const [, rerender] = useState(0);
    useEffect(() => {
      const h = () => rerender(n => n + 1);
      window.addEventListener('langchange', h);
      return () => window.removeEventListener('langchange', h);
    }, []);
  }
  const T = window.t || (k => k);

  // ── Responsive + dynamic card styles ─────────────────────────
  if (!document.getElementById('bx-responsive-styles')) {
    const r = document.createElement('style');
    r.id = 'bx-responsive-styles';
    r.textContent = `
      /* global overflow guard */
      body{overflow-x:hidden}
      *{box-sizing:border-box}
      /* reset fit.js scale */
      #app{transform:none!important;width:100%!important}
      #stage{width:100%!important;height:auto!important}
      /* padding scale */
      @media(max-width:1100px){
        #hero,#about,#britxia-tech,#contacto,#quienes-somos,#kleo-section,#lo-que-sigue{padding-left:40px!important;padding-right:40px!important}
        #ecosistema>div:first-child{padding-left:40px!important;padding-right:40px!important}
      }
      @media(max-width:960px){
        #hero{grid-template-columns:1fr!important;padding-bottom:52px!important}
        .hero-showcase-wrap{display:none!important}
        .hero-title{font-size:42px!important}
        .hero-sub,.hero-close{font-size:17px!important}
      }
      @media(max-width:900px){
        .kleo-grid{grid-template-columns:1fr!important;gap:40px!important}
      }
      /* hamburger */
      @media(max-width:768px){
        .bx-nav-bar{padding:16px 20px!important}
        .bx-nav-desktop{display:none!important}
        .bx-hamburger{display:flex!important}
      }
      @media(max-width:640px){
        #hero{padding:28px 20px 44px!important}
        .hero-title{font-size:32px!important;letter-spacing:-.5px!important}
        .hero-sub,.hero-close{font-size:15px!important}
        .hero-btns{flex-direction:column!important}
        .hero-btns a{text-align:center!important;width:100%!important;box-sizing:border-box!important}
        #about,#britxia-tech,#quienes-somos,#kleo-section,#lo-que-sigue{padding-left:20px!important;padding-right:20px!important}
        #ecosistema>div:first-child{padding:48px 20px 32px!important}
        .btech-logo{max-width:260px!important}
        .btech-title{font-size:22px!important}
        .btech-desc{font-size:14px!important}
        #britxia-tech{padding-top:52px!important;padding-bottom:52px!important}
        #quienes-somos,#kleo-section,#lo-que-sigue{padding-top:52px!important;padding-bottom:52px!important}
      }
      /* info stats */
      @media(max-width:560px){
        .info-stats{flex-wrap:wrap!important}
        .info-stats>div{flex:0 0 50%!important;border-right:none!important;padding-left:0!important;padding-right:0!important;padding-top:16px!important;padding-bottom:16px!important;border-bottom:1px solid rgba(13,27,42,.1)!important}
      }
      /* product rows */
      @media(max-width:900px){
        .prod-row{grid-template-columns:1fr!important}
        .prod-row.rev .prod-content{order:1!important}
        .prod-row.rev .prod-visual{order:2!important}
        .prod-content{padding:40px 40px!important}
        .prod-visual{min-height:280px!important}
        .waitlist-grid{grid-template-columns:1fr!important;gap:36px!important;padding:40px 36px!important}
        #contacto{padding-left:20px!important;padding-right:20px!important}
      }
      @media(max-width:640px){
        .prod-content{padding:32px 20px!important}
        .prod-visual{min-height:240px!important;padding:24px 16px!important}
        #contacto{padding:16px 16px 52px!important}
        .waitlist-grid{padding:32px 20px!important;border-radius:16px!important}
      }
      /* dynamic card backgrounds */
      @keyframes bxCardGlow{0%,100%{opacity:.5}50%{opacity:1}}
      @keyframes bxCardShimmer{0%{left:-100%}100%{left:200%}}
      .prod-visual{position:relative;overflow:hidden}
      .prod-visual::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,transparent 55%,rgba(255,255,255,.02) 100%);animation:bxCardGlow 5s ease-in-out infinite;pointer-events:none;z-index:0}
      .prod-visual::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);animation:bxCardShimmer 9s linear infinite;pointer-events:none;z-index:0}
      .prod-visual>*{position:relative;z-index:1}
    `;
    document.head.appendChild(r);
  }

  // ── Platform icons ─────────────────────────────────────────────
  const PLATSVG = {
    iphone:  c=><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round"><rect x="5" y="2" width="14" height="20" rx="4"/><circle cx="12" cy="17" r="1" fill={c} stroke="none"/></svg>,
    android: c=><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round"><path d="M4 16V10a8 8 0 0 1 16 0v6"/><rect x="2" y="16" width="4" height="6" rx="2"/><rect x="18" y="16" width="4" height="6" rx="2"/><path d="M8 2 6 0M16 2l2-2"/></svg>,
    web:     c=><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10A15.3 15.3 0 0 1 8 12 15.3 15.3 0 0 1 12 2z"/></svg>,
    watch:   c=><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round"><rect x="6" y="6" width="12" height="12" rx="4"/><path d="M10 2h4M10 22h4"/></svg>,
  };
  function PlatBadge({ platforms, color }) {
    const labels = {
      iphone:  'iPhone',
      android: 'Android',
      watch:   'Apple Watch\n& Wear OS',
      web:     'Web',
    };
    return (
      <div style={{ display:'flex', gap:20, alignItems:'flex-start', marginBottom:32 }}>
        {(platforms||[]).map(p => PLATSVG[p] && (
          <div key={p} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:4 }}>
            <span style={{ opacity:.75 }}>
              {PLATSVG[p](color)}
            </span>
            <span style={{ fontFamily:B, fontSize:9, color:'rgba(248,244,238,.5)', textAlign:'center', maxWidth:64, lineHeight:1.3, whiteSpace:'pre-line' }}>
              {labels[p]}
            </span>
          </div>
        ))}
      </div>
    );
  }

  // ── iPhone frame ───────────────────────────────────────────────
  // ── Laptop frame ───────────────────────────────────────────────
  const Laptop = ({ children, w=400 }) => (
    <div style={{ width:w }}>
      <div style={{ background:'#1E1E24', borderRadius:'12px 12px 0 0', padding:10,
        boxShadow:'0 0 0 1px rgba(255,255,255,.07)' }}>
        <div style={{ borderRadius:6, overflow:'hidden', height:220 }}>{children}</div>
      </div>
      <div style={{ height:14, background:'linear-gradient(to bottom,#2A2A32,#1A1A20)', borderRadius:'0 0 4px 4px' }} />
      <div style={{ height:4, background:'#141418', borderRadius:'0 0 8px 8px', margin:'0 28px' }} />
    </div>
  );

  function clamp(min, max) { return `clamp(${min}px, 3.6vw, ${max}px)`; }

  // ── NAV ───────────────────────────────────────────────────────
  const Nav = () => <window.BXHeader home={true} />;

  // ── HERO ──────────────────────────────────────────────────────
  const Hero = () => (
    <div id="hero" style={{ position:'relative', overflow:'hidden',
      padding:'130px 72px 100px', textAlign:'center',
      display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
      minHeight:'92vh' }}>
      <div style={{ position:'absolute', inset:0,
        backgroundImage:'radial-gradient(rgba(248,244,238,.07) 1px,transparent 1px)',
        backgroundSize:'30px 30px', pointerEvents:'none' }} />
      <div style={{ position:'absolute', inset:0,
        background:'radial-gradient(ellipse 75% 80% at 50% 50%,transparent 30%,#0D1B2A 82%)',
        pointerEvents:'none' }} />
      <div style={{ position:'absolute', top:'20%', left:'50%', transform:'translateX(-50%)',
        width:600, height:400, borderRadius:'50%',
        background:'radial-gradient(circle,rgba(245,166,35,.1),transparent 65%)',
        pointerEvents:'none' }} />
      <div style={{ position:'relative', zIndex:1, maxWidth:920 }}>
        <h1 className="hero-title" style={{ fontFamily:H, fontWeight:800, fontSize:78, lineHeight:1.04,
          letterSpacing:-2.5, margin:'0 0 28px', color:CREAM }}>
          {T('hero.line1')}<br/>{T('hero.line2')}<span style={{ color:ORANGE }}>.</span>
        </h1>
        <p className="hero-sub" style={{ fontSize:19, lineHeight:1.72, color:'rgba(248,244,238,.72)',
          maxWidth:580, margin:'0 auto 20px' }}>
          {T('hero.sub')}
        </p>
        <p className="hero-close" style={{ fontFamily:H, fontSize:18, fontWeight:500, lineHeight:1.4,
          color:CREAM, maxWidth:580, margin:'0 auto 44px' }}>
          {T('hero.close')} <span style={{ color:ORANGE }}>{T('hero.close_hi')}</span>
        </p>
        <div className="hero-btns" style={{ display:'flex', gap:14, alignItems:'center', justifyContent:'center', flexWrap:'wrap' }}>
          <a href="#quienes-somos" className="bx-btn-primary btn-hover" style={{ textDecoration:'none', fontFamily:B, fontSize:15, fontWeight:600, color:NAVY, background:ORANGE, borderRadius:100, padding:'15px 32px' }}>{T('hero.btn1')}</a>
          <a href="kleo.html" className="bx-btn-ghost btn-ghost-hover" style={{ textDecoration:'none', fontFamily:B, fontSize:15, fontWeight:600, color:CREAM, border:'1.5px solid rgba(248,244,238,.3)', borderRadius:100, padding:'15px 30px' }}>{T('hero.btn2')}</a>
        </div>
      </div>
    </div>
  );

  // ── FOOTER ────────────────────────────────────────────────────
  const Footer = () => <window.BXFooter />;

  // ── QUIÉNES SOMOS ─────────────────────────────────────────────
  const QuienesSomos = () => (
    <div id="quienes-somos" style={{ background:LIGHT, color:NAVY, padding:'80px 64px' }}>
      <div style={{ maxWidth:860, margin:'0 auto' }}>
        <div style={{ fontFamily:M, fontSize:11, fontWeight:600, letterSpacing:2.5, textTransform:'uppercase', color:ORANGE, marginBottom:14 }}>{T('about.eyebrow')}</div>
        <h2 style={{ fontFamily:H, fontWeight:700, fontSize:'clamp(28px,3.5vw,42px)', letterSpacing:-1, margin:'0 0 24px', lineHeight:1.1, color:NAVY }}>{T('about.title')}</h2>
        <p style={{ fontFamily:B, fontSize:16, fontWeight:600, lineHeight:1.6, color:NAVY, margin:'0 0 14px' }}>{T('about.p1')}</p>
        <p style={{ fontFamily:B, fontSize:15, lineHeight:1.75, color:'rgba(13,27,42,.65)', margin:0 }}>{T('about.p2')}</p>
      </div>
    </div>
  );

  // ── KLEO DESTACADO ────────────────────────────────────────────
  const KleoDestacado = () => (
    <div id="kleo-section" style={{ background:NAVY, padding:'80px 64px', position:'relative', overflow:'hidden' }}>
      <div style={{ position:'absolute', inset:0, background:'radial-gradient(ellipse 60% 70% at 50% 50%,rgba(123,92,191,.12),transparent 65%)', pointerEvents:'none' }} />
      <div className="kleo-grid" style={{ maxWidth:1100, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1fr', gap:80, alignItems:'center', position:'relative', zIndex:1 }}>
        <div>
          <div style={{ fontFamily:M, fontSize:11, fontWeight:600, letterSpacing:2.5, textTransform:'uppercase', color:'#7B5CBF', marginBottom:14 }}>{T('kleo.eyebrow')}</div>
          <img
            src={window.KLEO_WORDMARK_DARK || 'assets/kleo-wordmark-dark.svg'}
            alt="KLEO"
            style={{ height:52, display:'block', marginBottom:22 }}
          />
          <h2 style={{ fontFamily:H, fontWeight:700, fontSize:'clamp(24px,2.8vw,32px)', letterSpacing:-.5, lineHeight:1.2, color:CREAM, margin:'0 0 20px' }}>{T('kleo.lema')}</h2>
          <p style={{ fontFamily:B, fontSize:16, lineHeight:1.75, color:'rgba(248,244,238,.75)', marginBottom:32, maxWidth:440 }}>{T('kleo.desc')}</p>
          <PlatBadge platforms={['iphone','android','watch']} color='#7B5CBF' />
          <div style={{ display:'flex', alignItems:'center', gap:8, fontFamily:H, fontWeight:600, fontSize:16, color:'#7B5CBF', marginBottom:36 }}>
            <img src={window.KLEO_LOGO || 'assets/kleo-logo.svg'} alt="" style={{ height:24, width:24, borderRadius:6, display:'block', flexShrink:0 }} />
            <span>{T('kleo.demo_line', '“Ey KLEO, agenda esto.” — así de fácil.')}</span>
          </div>
          <div>
            <div style={{ fontFamily:B, fontSize:12, color:'rgba(248,244,238,.4)', marginBottom:10 }}>{T('kleo.estado')}</div>
            <a href="kleo.html" style={{ textDecoration:'none', fontFamily:B, fontSize:15, fontWeight:600, color:'#fff', background:'#7B5CBF', borderRadius:100, padding:'14px 28px', display:'inline-block' }}>{T('kleo.cta_btn')}</a>
          </div>
        </div>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'center' }}>
          <div style={{ animation:'bxFloat 6s ease-in-out infinite' }}>
            <window.KleoDevice />
          </div>
        </div>
      </div>
    </div>
  );

  // ── LO QUE SIGUE ──────────────────────────────────────────────
  const LoQueSigue = () => (
    <div id="lo-que-sigue" style={{ background:'#111D2A', padding:'80px 64px', textAlign:'center' }}>
      <div style={{ maxWidth:620, margin:'0 auto' }}>
        <div style={{ fontFamily:M, fontSize:11, fontWeight:600, letterSpacing:2.5, textTransform:'uppercase', color:ORANGE, marginBottom:14 }}>{T('next.eyebrow')}</div>
        <h2 style={{ fontFamily:H, fontWeight:700, fontSize:'clamp(28px,3.5vw,42px)', letterSpacing:-1, margin:'0 0 20px', color:CREAM }}>{T('next.title')}</h2>
        <p style={{ fontFamily:B, fontSize:16, lineHeight:1.75, color:'rgba(248,244,238,.6)', margin:'0 0 32px' }}>{T('next.desc')}</p>
        <a href="#contacto" style={{ textDecoration:'none', fontFamily:B, fontSize:15, fontWeight:600, color:CREAM, border:'1.5px solid rgba(248,244,238,.3)', borderRadius:100, padding:'14px 28px' }}>{T('next.btn')}</a>
      </div>
    </div>
  );

  // ── CONTACTO ──────────────────────────────────────────────────
  const Contacto = () => {
    const fieldCss = { width:'100%', fontFamily:B, fontSize:14.5, color:NAVY, background:'#fff', border:'1px solid rgba(13,27,42,.10)', borderRadius:12, padding:'13px 15px', outline:'none', boxSizing:'border-box' };
    return (
      <div id="contacto" style={{ background:LIGHT, padding:'80px 64px' }}>
        <div style={{ maxWidth:860, margin:'0 auto' }}>
          <h2 style={{ fontFamily:H, fontWeight:700, fontSize:'clamp(26px,3vw,38px)', letterSpacing:-1, margin:'0 0 16px', color:NAVY }}>{T('contact.title')}</h2>
          <p style={{ fontFamily:B, fontSize:16, lineHeight:1.7, color:'rgba(13,27,42,.65)', margin:'0 0 16px' }}>{T('contact.sub')}</p>
          <p style={{ fontFamily:B, fontSize:16, lineHeight:1.7, color:'rgba(13,27,42,.65)', margin:'0 0 32px' }}>{T('contact.sub2')}</p>
          <div style={{ display:'flex', flexDirection:'column', gap:14, maxWidth:560 }}>
            <input placeholder={T('contact.email')} style={fieldCss} />
            <select style={{ ...fieldCss, appearance:'auto', color:'rgba(13,27,42,.5)' }} defaultValue="">
              <option value="" disabled>{T('contact.interest')}</option>
              <option>{T('contact.opt1')}</option>
              <option>{T('contact.opt2')}</option>
              <option>{T('contact.opt3')}</option>
              <option>{T('contact.opt4')}</option>
              <option>{T('contact.opt5')}</option>
            </select>
            <textarea rows={4} placeholder={T('contact.msg')} style={{ ...fieldCss, resize:'vertical', lineHeight:1.55 }} />
            <label style={{ display:'flex', alignItems:'flex-start', gap:10, fontFamily:B, fontSize:13.5, color:'rgba(13,27,42,.65)', lineHeight:1.5, cursor:'pointer' }}>
              <input type="checkbox" style={{ marginTop:3, flexShrink:0, width:16, height:16, accentColor:ORANGE }} />
              {T('contact.checkbox')}
            </label>
            <a href="#contacto" className="btn-hover" style={{ textDecoration:'none', textAlign:'center', fontFamily:B, fontSize:15, fontWeight:600, color:NAVY, background:ORANGE, borderRadius:12, padding:'13px 24px' }}>{T('contact.btn')}</a>
            <span style={{ fontFamily:B, fontSize:13, color:'rgba(13,27,42,.45)', lineHeight:1.55 }}>{T('contact.legal')}</span>
          </div>
          <div style={{ marginTop:32, paddingTop:24, borderTop:'1px solid rgba(13,27,42,.10)', maxWidth:560 }}>
            <span style={{ fontFamily:B, fontSize:14, color:'rgba(13,27,42,.6)', lineHeight:1.6 }}>
              {T('contact.direct')} <a href={`mailto:${BX.brand.email}`} style={{ color:ORANGE, fontWeight:600, textDecoration:'none' }}>{BX.brand.email}</a>
            </span>
          </div>
        </div>
      </div>
    );
  };

  // ── GSAP ──────────────────────────────────────────────────────
  function useGSAP() {
    useEffect(()=>{
      const G = window.gsap, ST = window.ScrollTrigger;
      if (!G || !ST) return;
      G.registerPlugin(ST);
      G.from('.hero-title',{opacity:0,y:48,duration:.9,ease:'power3.out',delay:.25});
      G.from('.hero-sub,.hero-close',{opacity:0,y:28,duration:.75,stagger:.12,ease:'power3.out',delay:.45});
      G.from('.hero-btns',{opacity:0,y:16,duration:.6,ease:'power3.out',delay:.72});
      G.from('#quienes-somos > div',{opacity:0,y:36,duration:.85,ease:'power3.out',
        scrollTrigger:{trigger:'#quienes-somos',start:'top 78%',toggleActions:'play none none none'}});
      G.from('#kleo-section > div > div:first-child',{opacity:0,x:-36,duration:.85,ease:'power3.out',
        scrollTrigger:{trigger:'#kleo-section',start:'top 75%',toggleActions:'play none none none'}});
      G.from('#kleo-section > div > div:last-child',{opacity:0,x:36,duration:.85,ease:'power3.out',
        scrollTrigger:{trigger:'#kleo-section',start:'top 75%',toggleActions:'play none none none'}});
      G.from('#lo-que-sigue > div',{opacity:0,y:28,duration:.8,ease:'power3.out',
        scrollTrigger:{trigger:'#lo-que-sigue',start:'top 78%',toggleActions:'play none none none'}});
      G.from('#contacto > div',{opacity:0,y:28,duration:.85,ease:'power3.out',
        scrollTrigger:{trigger:'#contacto',start:'top 80%',toggleActions:'play none none none'}});
    },[]);
  }

  // ── ROOT ──────────────────────────────────────────────────────
  function OptionHome() {
    useLang();
    useGSAP();
    return (
      <div style={{ width:'100%', fontFamily:B, background:NAVY, position:'relative' }}>
        <Nav />
        <Hero />
        <QuienesSomos />
        <KleoDestacado />
        <LoQueSigue />
        <Contacto />
        <Footer />
      </div>
    );
  }

  window.OptionHome = OptionHome;
})();