/* global React, DashboardMockup, Counter */
const { useEffect: useEffH, useRef: useRefH } = React;

/* ============================================
   HERO
   ============================================ */
function Hero() {
  const wordRef = useRefH(null);

  return (
    <section id="hero" style={{
      position: 'relative',
      minHeight: '100vh',
      paddingTop: 140,
      paddingBottom: 120,
      overflow: 'hidden',
    }}>
      {/* Background orbs */}
      <div className="orb orb-bordeaux" style={{ width: 600, height: 600, top: -100, left: -150 }} />
      <div className="orb orb-green" style={{ width: 700, height: 700, top: 200, right: -200 }} />
      <div className="orb orb-gold" style={{ width: 500, height: 500, bottom: -100, left: '40%' }} />

      {/* Decorative grid lines */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.4, pointerEvents: 'none' }}>
        <defs>
          <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
            <path d="M 80 0 L 0 0 0 80" fill="none" stroke="rgba(47,133,90,0.06)" strokeWidth="1" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" />
      </svg>

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 80, alignItems: 'center' }} className="hero-grid">
          {/* Left side - copy */}
          <div>
            <h1 className="display-xl reveal" data-delay="1" ref={wordRef} style={{ marginBottom: 28 }}>
              J'automatise<br/>
              les process<br/>
              <span className="display-italic gold-text">chronophages</span><br/>
              <span style={{ color: 'var(--vp-cream-dim)', fontSize: '0.55em', fontFamily: 'var(--font-body)', fontWeight: 300, letterSpacing: '-0.01em', display: 'inline-block', marginTop: 14 }}>
                des entreprises en croissance.
              </span>
            </h1>

            <p className="body-lg reveal" data-delay="2" style={{
              maxWidth: 540, marginBottom: 40,
              fontSize: 19, lineHeight: 1.55,
            }}>
              Infrastructure IA sur mesure pour économiser <strong style={{ color: 'var(--vp-cream)', fontWeight: 500 }}>+10h par semaine</strong>, accélérer vos résultats et scaler durablement — sans recruter.
            </p>

            <div className="reveal" data-delay="3" style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 56 }}>
              <a href="#booking" className="btn btn-primary">
                Réserver mon audit stratégique
                <span className="btn-arrow">→</span>
              </a>
              <a href="#services" className="btn btn-ghost">
                Découvrir nos systèmes
              </a>
            </div>

            {/* Trust row */}
            <div className="reveal" data-delay="4" style={{
              display: 'flex', alignItems: 'center', gap: 28,
              paddingTop: 32, borderTop: '1px solid rgba(47,133,90,0.12)',
              flexWrap: 'wrap',
            }}>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 4 }}>
                  {[...Array(5)].map((_, i) => (
                    <span key={i} style={{ color: 'var(--vp-gold-light)', fontSize: 14 }}>★</span>
                  ))}
                  <span className="mono" style={{ marginLeft: 6, fontSize: 11, color: 'var(--vp-cream)' }}>4.96/5</span>
                </div>
                <div style={{ fontSize: 12, color: 'var(--vp-cream-faint)' }}>+50 dirigeants accompagnés</div>
              </div>

              <div style={{ width: 1, height: 40, background: 'var(--vp-line)' }} />

              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, color: 'var(--vp-gold-light)', lineHeight: 1 }}>
                  <Counter to={10} suffix="h+" duration={1400} />
                </div>
                <div style={{ fontSize: 12, color: 'var(--vp-cream-faint)', marginTop: 4 }}>gagnées / semaine</div>
              </div>

              <div style={{ width: 1, height: 40, background: 'var(--vp-line)' }} />

              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, color: 'var(--vp-gold-light)', lineHeight: 1 }}>
                  <Counter to={3.4} decimals={1} suffix="×" duration={1600} />
                </div>
                <div style={{ fontSize: 12, color: 'var(--vp-cream-faint)', marginTop: 4 }}>conversion moyenne</div>
              </div>
            </div>
          </div>

          {/* Right side - dashboard */}
          <div className="reveal" data-delay="3" style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <DashboardMockup />
          </div>
        </div>

        {/* Logo marquee */}
        <div className="reveal" data-delay="5" style={{ marginTop: 100 }}>
          <div className="mono" style={{
            fontSize: 11, color: 'var(--vp-cream-faint)', letterSpacing: '0.22em',
            textTransform: 'uppercase', marginBottom: 28, textAlign: 'center',
          }}>
            Ils ont automatisé leur croissance avec Vivo Partner
          </div>
          <LogoMarquee />
        </div>
      </div>

      <style>{`
        @media (max-width: 1024px) {
          .hero-grid {
            grid-template-columns: 1fr !important;
            gap: 60px !important;
          }
        }
      `}</style>
    </section>
  );
}

/* ============================================
   LOGO MARQUEE
   ============================================ */
function LogoMarquee() {
  const logos = [
    { name: 'NOVAFLOW', font: 'var(--font-display)', style: 'normal' },
    { name: 'helvex.', font: 'var(--font-body)', style: 'italic', weight: 600 },
    { name: 'CRESTLINE', font: 'var(--font-display)', style: 'normal', weight: 500 },
    { name: 'arcadia', font: 'var(--font-body)', style: 'normal', weight: 700, ls: '-0.04em' },
    { name: 'ÆTHER', font: 'var(--font-display)', style: 'italic', weight: 400 },
    { name: 'kairos', font: 'var(--font-body)', style: 'normal', weight: 300, ls: '0.3em' },
    { name: 'MERIDIA', font: 'var(--font-display)', style: 'normal' },
    { name: 'Volans', font: 'var(--font-display)', style: 'italic', weight: 400 },
  ];
  const doubled = [...logos, ...logos];

  return (
    <div style={{
      position: 'relative',
      overflow: 'hidden',
      maskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)',
      WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)',
    }}>
      <div style={{
        display: 'flex', gap: 64, width: 'max-content',
        animation: 'vp-marquee 35s linear infinite',
      }}>
        {doubled.map((logo, i) => (
          <div key={i} style={{
            fontFamily: logo.font,
            fontStyle: logo.style,
            fontWeight: logo.weight || 400,
            fontSize: 22,
            letterSpacing: logo.ls || '0.04em',
            color: 'var(--vp-cream-dim)',
            whiteSpace: 'nowrap',
            opacity: 0.55,
          }}>
            {logo.name}
          </div>
        ))}
      </div>
    </div>
  );
}

window.Hero = Hero;