// Hero — big editorial headline, live counter, value prop
const { useEffect: useEffectH, useRef: useRefH, useState: useStateH } = React;

const heroStyles = {
  wrap: {
    position: 'relative',
    paddingTop: 140, paddingBottom: 120,
    overflow: 'hidden',
    borderBottom: '1px solid var(--line)',
  },
  bgGlowLayer: {
    position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 0, overflow: 'hidden',
  },
  glowRed: {
    position: 'absolute', top: '-12%', right: '-8%',
    width: '70vw', height: '70vh',
    background: 'radial-gradient(closest-side, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),.06) 45%, transparent 75%)',
    filter: 'blur(8px)',
    transformOrigin: 'center',
    animation: 'heroGlowRed 22s cubic-bezier(.55,.05,.45,.95) infinite',
    willChange: 'transform, opacity',
  },
  glowViolet: {
    position: 'absolute', bottom: '-18%', left: '-10%',
    width: '62vw', height: '62vh',
    background: 'radial-gradient(closest-side, rgba(109,91,255,.13), rgba(109,91,255,.05) 45%, transparent 75%)',
    filter: 'blur(8px)',
    transformOrigin: 'center',
    animation: 'heroGlowViolet 28s cubic-bezier(.55,.05,.45,.95) infinite',
    willChange: 'transform, opacity',
  },
  inner: { position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1.15fr .85fr', gap: 60, alignItems: 'end' },
  eyebrowRow: { display: 'flex', alignItems: 'center', gap: 14, marginBottom: 28 },
  h1: {
    fontFamily: "'Instrument Serif', serif",
    fontWeight: 400,
    fontSize: 88,
    lineHeight: 0.96,
    letterSpacing: '-0.03em',
    margin: 0,
    color: 'var(--ink)',
  },
  h1Small: { fontSize: 92 },
  sub: {
    fontSize: 19, lineHeight: 1.5, color: 'var(--ink-2)',
    maxWidth: 520, marginTop: 36, marginBottom: 36,
  },
  ctaRow: { display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' },
  trustRow: {
    display: 'flex', gap: 28, marginTop: 56, paddingTop: 28,
    borderTop: '1px solid var(--line)', color: 'var(--ink-3)',
    fontSize: 13, letterSpacing: '.02em',
  },
  trustItem: { display: 'flex', alignItems: 'center', gap: 8 },

  /* right column */
  rightCol: { display: 'flex', flexDirection: 'column', gap: 20 },
  ticker: {
    padding: 28,
    background: 'var(--panel)',
    border: '1px solid var(--line-2)',
    borderRadius: 'var(--radius)',
    position: 'relative', overflow: 'hidden',
  },
  tickerLabel: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase',
    color: 'var(--ink-3)', marginBottom: 18,
  },
  tickerDot: {
    width: 8, height: 8, borderRadius: 999, background: 'var(--accent)',
    boxShadow: '0 0 10px var(--accent)',
    animation: 'pulse 1.6s ease-in-out infinite',
  },
  tickerValue: {
    fontFamily: "'Instrument Serif', serif",
    fontSize: 76, lineHeight: 1, letterSpacing: '-0.02em',
  },
  tickerToday: {
    marginTop: 10,
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 13, color: 'var(--accent)',
  },
  tickerSub: { marginTop: 12, color: 'var(--ink-2)', fontSize: 14 },

  feedCard: {
    padding: 20,
    background: 'var(--panel)',
    border: '1px solid var(--line-2)',
    borderRadius: 'var(--radius)',
  },
  feedHeader: {
    display: 'flex', justifyContent: 'space-between',
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase',
    color: 'var(--ink-3)', marginBottom: 14,
  },
  feedItem: {
    display: 'grid', gridTemplateColumns: '44px 1fr auto', gap: 12,
    alignItems: 'center', padding: '10px 0',
    borderTop: '1px solid var(--line)',
  },
  feedAvatar: {
    width: 36, height: 36, borderRadius: 8,
    display: 'grid', placeItems: 'center',
    fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: '#0A0A0A',
  },
  feedMeta: { fontSize: 13, color: 'var(--ink)' },
  feedSub: { fontSize: 12, color: 'var(--ink-3)', marginTop: 2 },
  feedPrice: { fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: 'var(--accent)' },
};

// live feed of incoming leads
const FEED_POOL = [
  { sector: 'BTP',        city: 'Lyon',      price: '42 €', color: '#FF9C6A' },
  { sector: 'Assurance',  city: 'Nantes',    price: '28 €', color: '#6D5BFF' },
  { sector: 'Immobilier', city: 'Paris',     price: '55 €', color: '#E8C766' },
  { sector: 'Santé',      city: 'Bordeaux',  price: '36 €', color: '#5BC8E0' },
  { sector: 'Éducation',  city: 'Toulouse',  price: '24 €', color: '#FF6B9E' },
  { sector: 'BTP',        city: 'Marseille', price: '48 €', color: '#FF9C6A' },
  { sector: 'Immobilier', city: 'Lille',     price: '52 €', color: '#E8C766' },
];

function Hero() {
  const [feed, setFeed] = useStateH(() => FEED_POOL.slice(0, 4));

  useEffectH(() => {
    const id = setInterval(() => {
      setFeed((cur) => {
        const next = FEED_POOL[Math.floor(Math.random() * FEED_POOL.length)];
        return [next, cur[0], cur[1], cur[2]];
      });
    }, 2400);
    return () => clearInterval(id);
  }, []);

  return (
    <header style={heroStyles.wrap} className="hero-section">
      <div style={heroStyles.bgGlowLayer} aria-hidden="true">
        <div style={heroStyles.glowRed} />
        <div style={heroStyles.glowViolet} />
      </div>
      <div className="wrap hero-grid" style={heroStyles.inner}>
        <div>
          <div style={heroStyles.eyebrowRow}>
            <span className="eyebrow">Pay-per-Lead · B2B France</span>
          </div>
          <h1 style={heroStyles.h1} className="hero-h1">
            Payez au <span className="serif italic" style={{color:'var(--accent)'}}>prospect</span>.
            <br/>
            Pas au <span className="serif italic">clic</span>, pas à l'<span className="serif italic">espoir</span>.
          </h1>
          <p style={heroStyles.sub} className="hero-sub">
            BackMeUp livre des leads qualifiés, exclusifs et localisés directement dans votre CRM.
            Modèle PPL&nbsp;: vous ne payez que lorsqu'un prospect a montré un intérêt réel pour vos services.
          </p>
          <div style={heroStyles.ctaRow}>
            <a href="#contact" className="btn btn-primary">
              Commander des leads
              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
            </a>
            <a href="#comment" className="btn btn-ghost">Voir le fonctionnement</a>
          </div>
          <div style={heroStyles.trustRow} className="hero-trust">
            <div style={heroStyles.trustItem}><Check/> Sans engagement</div>
            <div style={heroStyles.trustItem}><Check/> Intégration CRM + Sheets</div>
            <div style={heroStyles.trustItem}><Check/> Tarif dégressif au volume</div>
          </div>
        </div>

        <div style={heroStyles.rightCol}>
          <div style={heroStyles.ticker}>
            <div style={heroStyles.tickerLabel}>
              <span>Leads livrés · 2026 YTD</span>
              <span style={heroStyles.tickerDot} />
            </div>
            <div style={heroStyles.tickerValue} className="ticker-value">
              <HeroCounter />
            </div>
            <div style={heroStyles.tickerToday}>+637 aujourd'hui</div>
            <div style={heroStyles.tickerSub}>
              Taux de qualification moyen&nbsp;: <span style={{color:'var(--ink)'}}>87%</span> · 
              Délai de livraison&nbsp;: <span style={{color:'var(--ink)'}}>&lt; 90 sec</span>
            </div>
          </div>

          <div style={heroStyles.feedCard}>
            <div style={heroStyles.feedHeader}>
              <span>Flux temps réel</span>
              <span>/live</span>
            </div>
            {feed.map((f, i) => (
              <div key={i + f.sector + f.city} style={heroStyles.feedItem}>
                <div style={{...heroStyles.feedAvatar, background: f.color}}>{f.sector.slice(0,2).toUpperCase()}</div>
                <div>
                  <div style={heroStyles.feedMeta}>Nouveau lead · <span style={{color:'var(--ink-2)'}}>{f.sector}</span></div>
                  <div style={heroStyles.feedSub}>Zone&nbsp;: {f.city} · Fiche complète</div>
                </div>
                <div style={heroStyles.feedPrice}>{f.price}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @keyframes pulse {
          0%,100% { opacity: 1; transform: scale(1); }
          50% { opacity: .5; transform: scale(.85); }
        }

        /* Hero background glows — drift slowly across the canvas, breathing in scale and opacity. */
        @keyframes heroGlowRed {
          0%   { transform: translate3d(0, 0, 0)        scale(1)    rotate(0deg);   opacity: .85; border-radius: 50%; }
          25%  { transform: translate3d(-6%, 4%, 0)     scale(1.18) rotate(8deg);   opacity: 1;   border-radius: 46% 54% 58% 42% / 52% 46% 54% 48%; }
          50%  { transform: translate3d(4%, -3%, 0)     scale(.9)   rotate(-4deg);  opacity: .6;  border-radius: 58% 42% 46% 54% / 44% 58% 42% 56%; }
          75%  { transform: translate3d(-3%, -6%, 0)    scale(1.08) rotate(6deg);   opacity: .95; border-radius: 50% 50% 60% 40% / 50% 56% 44% 50%; }
          100% { transform: translate3d(0, 0, 0)        scale(1)    rotate(0deg);   opacity: .85; border-radius: 50%; }
        }
        @keyframes heroGlowViolet {
          0%   { transform: translate3d(0, 0, 0)        scale(1)    rotate(0deg);   opacity: .8;  border-radius: 50%; }
          30%  { transform: translate3d(7%, -5%, 0)     scale(1.22) rotate(-10deg); opacity: 1;   border-radius: 56% 44% 50% 50% / 48% 56% 44% 52%; }
          55%  { transform: translate3d(-4%, 4%, 0)     scale(.88)  rotate(5deg);   opacity: .55; border-radius: 44% 56% 54% 46% / 58% 42% 56% 44%; }
          80%  { transform: translate3d(3%, 6%, 0)      scale(1.05) rotate(-3deg);  opacity: .9;  border-radius: 52% 48% 46% 54% / 50% 52% 48% 50%; }
          100% { transform: translate3d(0, 0, 0)        scale(1)    rotate(0deg);   opacity: .8;  border-radius: 50%; }
        }

        @media (prefers-reduced-motion: reduce) {
          @keyframes heroGlowRed    { 0%,100% { transform: none; opacity: .85; } }
          @keyframes heroGlowViolet { 0%,100% { transform: none; opacity: .8;  } }
        }
      `}</style>
    </header>
  );
}

function Check() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="var(--accent)" strokeWidth="1.7">
      <path d="M3 7.5l2.8 2.8L11 4.5"/>
    </svg>
  );
}

// Isolated counter — doesn't re-render from parent state changes.
function HeroCounter() {
  const [n, setN] = useStateH(0);
  useEffectH(() => {
    const target = 57495;
    const steps = 60;
    let i = 0;
    const id = setInterval(() => {
      i++;
      const p = Math.min(1, i / steps);
      const eased = 1 - Math.pow(1 - p, 3);
      setN(Math.round(target * eased));
      if (p >= 1) clearInterval(id);
    }, 36);
    return () => clearInterval(id);
  }, []);
  return <span className="serif">{formatNumberFR(n)}</span>;
}

Object.assign(window, { Hero });