// Hero — charcoal-900 bg, display H1, primary + secondary CTA, illustration placeholder.
function Hero({ setRoute }) {
  return (
    <section
      id="home"
      style={{
        background: 'var(--charcoal-900)',
        color: '#fff',
        paddingBlock: 'clamp(64px, 10vw, 120px)',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      {/* Decorative cradle glyph at corner, single use, low opacity */}
      <div
        aria-hidden="true"
        style={{
          position: 'absolute', right: -120, top: -80,
          width: 540, height: 540,
          opacity: 0.06,
          pointerEvents: 'none',
        }}
      >
        <svg viewBox="0 0 64 64" width="100%" height="100%">
          <g transform="translate(8 12)">
            <path fill="#FFFFFF" d="M20 0a20 20 0 1 0 0 40 4 4 0 0 1 0 8A28 28 0 1 1 20 -8z" />
            <circle fill="#F59E0B" cx="34" cy="20" r="6" />
          </g>
        </svg>
      </div>

      <div
        className="container"
        style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 0.9fr)',
          gap: 64,
          alignItems: 'center',
        }}
      >
        <div style={{ maxWidth: 36 + 'rem' }}>
          <div className="eyebrow" style={{ color: 'var(--amber-300)' }}>
            Assistant téléphonique IA
          </div>
          <h1
            style={{
              fontFamily: 'var(--font-display)',
              fontSize: 'clamp(2.5rem, 5.5vw, 4rem)',
              fontWeight: 500,
              lineHeight: 1.05,
              letterSpacing: '-0.02em',
              marginTop: 16,
              color: '#fff',
              textWrap: 'balance',
            }}
          >
            Le garde du corps<br />de votre téléphone.
          </h1>
          <p
            style={{
              marginTop: 24,
              fontSize: 'var(--fs-lg)',
              lineHeight: 1.65,
              color: 'var(--charcoal-100)',
              maxWidth: '36rem',
            }}
          >
            Kin-Guard répond aux appels inconnus à votre place,
            détecte les signes d'arnaque et ne vous transmet
            que les appels légitimes.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
            <button
              className="kg-btn kg-btn--primary-dark"
              onClick={() => setRoute('waitlist')}
            >
              Rejoindre la liste d'attente
            </button>
            <a className="kg-btn kg-btn--secondary-dark" href="#solution">
              Voir comment ça marche
              <Icon name="arrow-down" size={16} />
            </a>
          </div>
          <p
            style={{
              marginTop: 28,
              fontSize: 'var(--fs-sm)',
              color: 'var(--charcoal-300)',
              maxWidth: '32rem',
            }}
          >
            Votre téléphone devrait vous rapprocher des personnes
            qui comptent, pas vous exposer aux fraudeurs.
          </p>
        </div>

        <HeroIllustration />
      </div>
    </section>
  );
}

// Illustration placeholder — calm composition. Not a final asset.
// Reads as: an incoming call being intercepted by an amber "ring of care".
function HeroIllustration() {
  return (
    <div className="hero-art" aria-hidden="true">
      {/* Concentric amber rings */}
      <svg
        viewBox="0 0 400 500"
        width="100%" height="100%"
        style={{ position: 'absolute', inset: 0 }}
      >
        <defs>
          <linearGradient id="ringFade" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#F59E0B" stopOpacity="0.7" />
            <stop offset="100%" stopColor="#F59E0B" stopOpacity="0.05" />
          </linearGradient>
        </defs>
        {/* Outer arc */}
        <circle cx="200" cy="250" r="170" fill="none" stroke="url(#ringFade)" strokeWidth="1.5" />
        <circle cx="200" cy="250" r="130" fill="none" stroke="#F59E0B" strokeOpacity="0.35" strokeWidth="1.5" />
        <circle cx="200" cy="250" r="92" fill="none" stroke="#F59E0B" strokeOpacity="0.65" strokeWidth="2" />
        {/* Phone slab */}
        <rect x="158" y="180" width="84" height="160" rx="14" fill="#1F2937" stroke="#374151" />
        <rect x="166" y="192" width="68" height="118" rx="6" fill="#0B0F14" />
        {/* Caller label inside phone */}
        <rect x="172" y="210" width="56" height="6" rx="2" fill="#F59E0B" opacity="0.9" />
        <rect x="172" y="222" width="40" height="4" rx="2" fill="#9CA3AF" opacity="0.7" />
        <rect x="172" y="232" width="48" height="4" rx="2" fill="#9CA3AF" opacity="0.45" />
        {/* Speech bubble — assistant answering */}
        <g transform="translate(244 168)">
          <rect width="120" height="72" rx="14" fill="#F5F6F7" />
          <rect x="14" y="16" width="92" height="6" rx="2" fill="#1F2937" />
          <rect x="14" y="30" width="76" height="5" rx="2" fill="#4B5563" />
          <rect x="14" y="42" width="64" height="5" rx="2" fill="#4B5563" />
          <rect x="14" y="54" width="36" height="6" rx="3" fill="#D97706" />
          <path d="M0 28 L-10 36 L0 40 Z" fill="#F5F6F7" />
        </g>
        {/* Filter indicator — pulse dot */}
        <circle cx="200" cy="380" r="6" fill="#F59E0B">
          <animate attributeName="opacity" values="1;0.3;1" dur="2.4s" repeatCount="indefinite" />
        </circle>
      </svg>
      {/* Placeholder watermark — flagged */}
      <div
        style={{
          position: 'absolute', bottom: 14, right: 16,
          fontFamily: 'var(--font-mono)', fontSize: 10,
          color: 'rgba(255,255,255,0.32)',
          letterSpacing: '0.05em',
        }}
      >
        Illustration éditoriale — placeholder
      </div>
    </div>
  );
}

window.Hero = Hero;