/* Hero — text left, floating card grid right. Theme-aware: white in bright, navy in dark. */
function HeroCard({ children, style, float = 0 }) {
  return (
    <div style={{
      background:'var(--hero-card-bg)', border:'1px solid var(--hero-card-border)',
      borderRadius:'var(--r-card)',
      boxShadow:'var(--hero-card-shadow)',
      padding:'18px', animation:`bneFloat 5.5s ease-in-out ${float}s infinite alternate`, ...style,
    }}>{children}</div>
  );
}

function Hero({ t }) {
  const c = t.hero.cards;
  const TW_DEFAULTS = /*EDITMODE-BEGIN*/{
    "c1x": 120, "c1y": -144,
    "c2x": 8, "c2y": -80,
    "c3x": -92, "c3y": -32,
    "c4x": -116, "c4y": 64,
    "videoOp": 100
  }/*EDITMODE-END*/;
  const hasTw = typeof window.useTweaks === 'function' && typeof window.TweaksPanel !== 'undefined';
  const twPair = hasTw ? window.useTweaks(TW_DEFAULTS) : [TW_DEFAULTS, function(){}];
  const tw = twPair[0], setTweak = twPair[1];
  return (
    <Section id="top" bg="deep" style={{ overflow:'hidden', background:'var(--hero-bg)' }}>
      {/* background video + readability scrims */}
      <video className="bne-hero-video" src="site/assets/hero-background.mp4?v=5" autoPlay loop muted playsInline preload="auto"
        ref={el => { if (el) { el.muted = true; const p = el.play(); if (p && p.catch) p.catch(()=>{}); } }}
        style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', zIndex:0, opacity:(tw.videoOp/100), pointerEvents:'none' }}></video>
      <div aria-hidden="true" style={{ position:'absolute', inset:0, pointerEvents:'none', zIndex:0,
        background:'linear-gradient(90deg, var(--hero-scrim-1) 0%, var(--hero-scrim-1) 40%, var(--hero-scrim-2) 75%, var(--hero-scrim-2) 100%), linear-gradient(180deg, var(--hero-scrim-2) 0%, transparent 22%, transparent 68%, var(--hero-scrim-1) 100%)' }}></div>
      {/* glow + mesh background */}
      <div aria-hidden="true" style={{ position:'absolute', inset:0, pointerEvents:'none',
        background:'radial-gradient(60% 55% at 78% 18%, rgba(123,47,190,.14), transparent 60%), radial-gradient(50% 45% at 8% 80%, rgba(155,85,214,.10), transparent 60%)' }}></div>
      <div aria-hidden="true" style={{ position:'absolute', inset:0, pointerEvents:'none', opacity:.6,
        backgroundImage:'linear-gradient(var(--hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px)',
        backgroundSize:'64px 64px', maskImage:'radial-gradient(75% 70% at 60% 30%, #000 30%, transparent 78%)',
        WebkitMaskImage:'radial-gradient(75% 70% at 60% 30%, #000 30%, transparent 78%)' }}></div>

      <Container style={{ position:'relative', zIndex:1, display:'grid', gridTemplateColumns:'1.05fr .95fr', gap:48,
        alignItems:'center', minHeight:'100vh', paddingTop:120, paddingBottom:64 }} >
        {/* left */}
        <div className="bne-hero-text">
          <Reveal><Eyebrow style={{ marginBottom:22 }}>{t.hero.eyebrow}</Eyebrow></Reveal>
          <Reveal delay={60}>
            <h1 className="t-display bne-hero-title" style={{ margin:0, color:'var(--text-1)', fontWeight:800, fontSize:'clamp(42px,5.8vw,84px)', maxWidth:540 }}>
              <span style={{ fontWeight:500, color:'var(--text-2)', whiteSpace:'pre-line' }}>{t.hero.title[0]}</span><br/>
              <span style={{ background:'linear-gradient(92deg, var(--purple-core) 0%, var(--purple-soft) 42%, #5566D8 100%)', WebkitBackgroundClip:'text', backgroundClip:'text', WebkitTextFillColor:'transparent', color:'transparent' }}>{t.hero.title[1]}</span>
            </h1>
          </Reveal>
          <Reveal delay={120}>
            <p className="t-lead" style={{ color:'var(--text-2)', width:'100%', maxWidth:540, marginTop:22, marginBottom:0, fontSize:17, lineHeight:1.45, whiteSpace:'pre-line' }}>{t.hero.sub}</p>
          </Reveal>
          <Reveal delay={180}>
            <div style={{ display:'flex', gap:14, marginTop:34, flexWrap:'wrap' }}>
              <Button variant="solid" href={window.PAGES.contact}>{t.hero.cta}</Button>
              <Button variant="ghost" href={window.PAGES.cases}>{t.hero.ctaAlt}</Button>
            </div>
          </Reveal>
        </div>

        {/* right — floating cards over the background */}
        <div className="bne-hero-art" style={{ position:'relative', height:560 }}>
          <div style={{ position:'absolute', inset:0, transform:'translateY(32px) scale(.92)', transformOrigin:'top center' }}>
          {/* Card 1 — Proof */}
          <HeroCard float={0} style={{ position:'absolute', top:150 + tw.c1y, left:`calc(2% + ${tw.c1x}px)`, width:'56%' }}>
            <div className="t-eyebrow" style={{ marginBottom:10 }}>{c.proofEyebrow}</div>
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:12 }}>
              <ClientLogo name="cvs-health" h={16} />
              <span style={{ display:'inline-flex', alignItems:'center', gap:5, fontFamily:'var(--font-mono)', fontSize:10.5, letterSpacing:'.04em', textTransform:'uppercase', color:'#36C28E', background:'rgba(54,194,142,.14)', border:'1px solid rgba(54,194,142,.3)', padding:'4px 9px', borderRadius:'var(--r-pill)' }}>
                <Icon name="check" size={12} stroke={2.6}/>{c.caseLabel}
              </span>
            </div>
            <div style={{ fontFamily:'var(--font-body)', fontSize:13.5, lineHeight:1.4, color:'var(--on-deep-2)', whiteSpace:'pre-line' }}>{c.proofBody}</div>
          </HeroCard>

          {/* Card 2 — Process */}
          <HeroCard float={1.4} style={{ position:'absolute', top:214 + tw.c2y, right:40 - tw.c2x, width:'40%' }}>
            <div style={{ display:'flex', alignItems:'flex-start', gap:12 }}>
              <div style={{ display:'grid', placeItems:'center', width:38, height:38, borderRadius:10, background:'rgba(54,194,142,.16)', color:'#36C28E', flexShrink:0 }}>
                <Icon name="check" size={20} stroke={2.4}/>
              </div>
              <div>
                <div className="t-eyebrow" style={{ marginTop:2 }}>{c.processEyebrow}</div>
                <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:17, lineHeight:1.25, color:'var(--on-deep-1)', marginTop:6, whiteSpace:'pre-line' }}>{c.processTitle}</div>
              </div>
            </div>
          </HeroCard>

          {/* Card 3 — Experience */}
          <HeroCard float={.7} style={{ position:'absolute', bottom:-tw.c3y, left:`calc(6% + ${tw.c3x}px)`, width:'44%' }}>
            <div className="t-eyebrow" style={{ marginBottom:10 }}>{c.expEyebrow}</div>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:34, letterSpacing:'-.02em', lineHeight:1.3, paddingBottom:3, background:'linear-gradient(92deg, var(--purple-core) 0%, var(--purple-soft) 42%, #5566D8 100%)', WebkitBackgroundClip:'text', backgroundClip:'text', WebkitTextFillColor:'transparent', color:'transparent', display:'inline-block' }}>{c.expN}</div>
            <div style={{ fontFamily:'var(--font-body)', fontSize:13.5, lineHeight:1.4, color:'var(--on-deep-2)', marginTop:8 }}>{c.expBody}</div>
          </HeroCard>

          {/* Card 4 — Value */}
          <HeroCard float={1.1} style={{ position:'absolute', bottom:-tw.c4y, right:`calc(2% - ${tw.c4x}px)`, width:'46%' }}>
            <div className="t-eyebrow" style={{ marginBottom:12 }}>{c.valueEyebrow}</div>
            <div style={{ display:'flex', flexDirection:'column', gap:11 }}>
              {[
                { icon:'spark', ln:c.valueLines[0] },
                { icon:'wallet', ln:c.valueLines[1] },
                { icon:'globe', ln:c.valueLines[2] },
              ].map((row, i) => (
                <div key={i} style={{ display:'flex', alignItems:'center', gap:11 }}>
                  <span style={{ display:'grid', placeItems:'center', flexShrink:0, width:30, height:30, borderRadius:8, background:'rgba(123,47,190,.14)', color:'var(--accent)' }}>
                    <Icon name={row.icon} size={16} stroke={2}/>
                  </span>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:14.5, color:'var(--on-deep-1)', letterSpacing:'-.01em' }}>{row.ln}</span>
                </div>
              ))}
            </div>
          </HeroCard>
          </div>
        </div>
      </Container>

      {/* client strip — fixed horizontal grid (no ticker, per v4) */}
      <div style={{ position:'relative', zIndex:1, borderTop:'1px solid var(--border-1)', padding:'30px 0 38px' }}>
        <Container>
          <div className="t-caption" style={{ color:'var(--text-3)', textAlign:'center', marginBottom:22, fontFamily:'var(--font-mono)', letterSpacing:'.1em', textTransform:'uppercase', fontSize:11 }}>{t.hero.proof}</div>
          <div style={{ display:'flex', flexWrap:'wrap', alignItems:'center', justifyContent:'center', gap:'30px 56px' }}>
            {(() => {
              const H = { 'cvs-health':19, 'sony':17, 'coca-cola':27, 'united-nations':38, 'tetrapak':21 };
              return window.BNE.clients.map((cl) => (
                <span key={cl} style={{ transition:'opacity var(--dur)', opacity:.7, display:'inline-flex' }}
                  onMouseEnter={e=>e.currentTarget.style.opacity='1'} onMouseLeave={e=>e.currentTarget.style.opacity='.7'}>
                  <ClientLogo name={cl} h={H[cl] || 24} />
                </span>
              ));
            })()}
          </div>
        </Container>
      </div>
      {hasTw && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="Card 1 · Proven at scale" />
          <TweakSlider label="Horizontal" value={tw.c1x} min={-120} max={120} step={4} unit="px" onChange={(v)=>setTweak('c1x', v)} />
          <TweakSlider label="Vertical" value={tw.c1y} min={-160} max={160} step={4} unit="px" onChange={(v)=>setTweak('c1y', v)} />
          <TweakSection label="Card 2 · No surprises" />
          <TweakSlider label="Horizontal" value={tw.c2x} min={-260} max={120} step={4} unit="px" onChange={(v)=>setTweak('c2x', v)} />
          <TweakSlider label="Vertical" value={tw.c2y} min={-160} max={160} step={4} unit="px" onChange={(v)=>setTweak('c2y', v)} />
          <TweakSection label="Card 3 · Track record" />
          <TweakSlider label="Horizontal" value={tw.c3x} min={-120} max={120} step={4} unit="px" onChange={(v)=>setTweak('c3x', v)} />
          <TweakSlider label="Vertical" value={tw.c3y} min={-160} max={160} step={4} unit="px" onChange={(v)=>setTweak('c3y', v)} />
          <TweakSection label="Card 4 · What you get" />
          <TweakSlider label="Horizontal" value={tw.c4x} min={-120} max={120} step={4} unit="px" onChange={(v)=>setTweak('c4x', v)} />
          <TweakSlider label="Vertical" value={tw.c4y} min={-160} max={160} step={4} unit="px" onChange={(v)=>setTweak('c4y', v)} />
          <TweakSection label="Background video" />
          <TweakSlider label="Video opacity" value={tw.videoOp} min={10} max={100} unit="%" onChange={(v)=>setTweak('videoOp', v)} />
        </TweaksPanel>
      )}
    </Section>
  );
}

Object.assign(window, { Hero });