// Hero section

const { useState: useStateH, useEffect: useEffectH } = React;

function LiveClock() {
  const [t, setT] = useStateH(() => new Date());
  useEffectH(() => {
    const i = setInterval(() => setT(new Date()), 1000);
    return () => clearInterval(i);
  }, []);
  const hh = String(t.getUTCHours()).padStart(2,'0');
  const mm = String(t.getUTCMinutes()).padStart(2,'0');
  const ss = String(t.getUTCSeconds()).padStart(2,'0');
  return <span>{hh}:{mm}:{ss} UTC</span>;
}

function HeroCard({ card, spark }) {
  const accent = card.accent_color || '#58d6ff';
  const extra = card.extra || (card.extra_json ? (() => { try { return JSON.parse(card.extra_json); } catch { return null; } })() : null);

  return (
    <>
      <div className="panel-label">
        <span style={{width:6,height:6,borderRadius:'50%',background:accent,boxShadow:`0 0 6px ${accent}`}}/>
        {card.label}
      </div>

      {card.card_type === 'sparkline' && (
        <>
          <div className="panel-val">{card.value}
            {card.suffix ? <span style={{fontSize:14, color:'var(--slate-500)', fontFamily:'var(--mono)'}}>{card.suffix}</span> : null}
          </div>
          <Sparkline values={spark} color={accent}/>
          {card.sub ? <div className="panel-sub">{card.sub}</div> : null}
        </>
      )}

      {card.card_type === 'counter' && (
        <>
          <div className="panel-val"><Counter value={Number(card.value) || 0} /></div>
          {card.sub ? <div className="panel-sub">{card.sub}</div> : null}
        </>
      )}

      {card.card_type === 'grid' && extra && Array.isArray(extra.cells) && (
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginTop:4}}>
          {extra.cells.map(([lab, val], i) => (
            <div key={i}>
              <div className="mono" style={{fontSize:10,color:'var(--slate-500)'}}>{lab}</div>
              <div style={{fontFamily:'var(--serif)',fontSize:22,lineHeight:1, color: i === 1 ? '#e8a948' : undefined}}>{val}</div>
            </div>
          ))}
        </div>
      )}

      {card.card_type === 'confidence' && (
        <>
          <div className="panel-val">{card.value}
            {card.suffix ? <span style={{fontSize:18,color:'var(--slate-500)'}}>{card.suffix}</span> : null}
          </div>
          <div style={{height:3,background:'rgba(255,255,255,0.08)',marginTop:10,overflow:'hidden'}}>
            <div style={{width: (extra && extra.percent ? extra.percent : Number(card.value) || 0) + '%', height:'100%', background:'linear-gradient(90deg,#58d6ff,#7bc99d)'}}/>
          </div>
        </>
      )}

      {card.card_type === 'value' && (
        <>
          <div className="panel-val">{card.value}{card.suffix ? <span style={{fontSize:14,color:'var(--slate-500)'}}>{card.suffix}</span> : null}</div>
          {card.sub ? <div className="panel-sub">{card.sub}</div> : null}
        </>
      )}
    </>
  );
}

const HERO_FLOAT_ANIMATIONS = {
  'top-left':     'floatA 6s ease-in-out infinite',
  'top-right':    'floatB 7s ease-in-out infinite',
  'bottom-left':  'floatC 8s ease-in-out infinite',
  'bottom-right': 'floatD 9s ease-in-out infinite',
};

function Hero() {
  const content = (typeof useContent === 'function') ? useContent() : window.CONTENT_FALLBACK;
  const hero = content.hero || {};
  const cards = hero.cards || [];

  // tiny animated sparkline data
  const [spark, setSpark] = useStateH(() =>
    Array.from({ length: 14 }, () => 30 + Math.random() * 70)
  );
  useEffectH(() => {
    const i = setInterval(() => {
      setSpark(s => [...s.slice(1), 30 + Math.random() * 70]);
    }, 1200);
    return () => clearInterval(i);
  }, []);

  return (
    <section className="hero">
      <div className="hero-grid" />
      <div className="container">
        <div className="hero-inner">
          <div className="hero-copy">
            <Reveal>
              <span className="eyebrow">{hero.eyebrow}</span>
            </Reveal>
            <Reveal delay={120}>
              <h1 className="display hero-title">
                <span className="line">{hero.title_line_1}</span>
                <span className="line">{hero.title_line_2}</span>
                <span className="line">
                  <span className="accent italic-accent">{hero.title_line_3a}</span>{' '}
                  <em className="serif" style={{fontStyle:'italic'}}>{hero.title_line_3b}</em>
                </span>
              </h1>
            </Reveal>
            <Reveal delay={220}>
              <p className="lead hero-lead">{hero.lead}</p>
            </Reveal>
            <Reveal delay={320}>
              <div className="hero-ctas">
                <a href={hero.primary_href || '#contact'} className="btn btn-primary">
                  {hero.primary_cta} <span className="arrow">→</span>
                </a>
                <a href={hero.secondary_href || '#specialize'} className="btn btn-ghost">
                  {hero.secondary_cta} <span className="arrow">↓</span>
                </a>
              </div>
            </Reveal>
          </div>

          <div className="globe-stage">
            <Globe />

            {cards.map((card, i) => (
              <div key={card.slot || i}
                   className={`panel panel-${card.slot}`}
                   style={{ animation: HERO_FLOAT_ANIMATIONS[card.slot] }}>
                <HeroCard card={card} spark={spark} />
              </div>
            ))}
          </div>
        </div>

        <div className="hero-meta">
          <div className="hero-meta-block">
            <span>{hero.meta_coord_n}</span><span className="sep"/>
            <span>{hero.meta_coord_e}</span><span className="sep"/>
            <span>{hero.meta_altitude}</span>
          </div>
          <div className="hero-meta-block">
            <span className="status-dot" />
            <span>{hero.meta_status}</span><span className="sep"/>
            <LiveClock />
          </div>
        </div>
      </div>
    </section>
  );
}

// inject float keyframes
const _floatCSS = document.createElement('style');
_floatCSS.textContent = `
@keyframes floatA { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes floatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
@keyframes floatC { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes floatD { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }
`;
document.head.appendChild(_floatCSS);

window.Hero = Hero;