// Hero section with live product dashboard mockup
const { useState, useEffect, useRef } = React;

function Nav() {
  const [open, setOpen] = useState(false);
  const links = [
    { href: '#features', label: 'Fonctionnalités' },
    { href: '#chatbot', label: 'Chatbot' },
    { href: '#receptionist', label: 'Standard IA' },
    { href: '#pricing', label: 'Tarifs' },
    { href: '#surmesure', label: 'Sur mesure' },
    { href: 'formations.html', label: 'Formations' },
    { href: 'blog.html', label: 'Blog' },
    { href: 'rejoindre.html', label: 'Nous rejoindre' },
  ];
  return (
    <>
      <nav className="nav">
        <div className="container nav-inner">
          <a href="#" className="logo logo-wordmark">
            <div className="logo-mark"></div>
            <span className="wordmark">
              <span className="wm-lead">Lead</span><span className="wm-custom">Custom</span>
            </span>
          </a>
          <ul className="nav-links">
            {links.map(l => <li key={l.href}><a href={l.href}>{l.label}</a></li>)}
          </ul>
          <div className="nav-cta">
            <a href="connexion.html" className="btn btn-ghost">Connexion</a>
            <a href="reservation.html" className="btn btn-primary">
              Réserver un appel <Icon.Arrow />
            </a>
            <button
              className={`nav-burger${open ? ' open' : ''}`}
              onClick={() => setOpen(o => !o)}
              aria-label="Menu"
            >
              <span></span><span></span><span></span>
            </button>
          </div>
        </div>
      </nav>
      <div className={`nav-mobile-menu${open ? ' open' : ''}`}>
        {links.map(l => (
          <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>
        ))}
        <div className="nav-mobile-divider"></div>
        <div className="nav-mobile-cta">
          <a href="connexion.html" className="btn btn-ghost" style={{justifyContent:'center'}}>Connexion</a>
          <a href="reservation.html" className="btn btn-primary" style={{justifyContent:'center'}}>Réserver un appel</a>
        </div>
      </div>
    </>
  );
}

function MiniChart() {
  // Smooth random-ish line
  const points = [22, 28, 24, 35, 30, 42, 38, 52, 48, 62, 58, 72, 68, 78];
  const max = Math.max(...points);
  const min = Math.min(...points);
  const w = 100, h = 30;
  const path = points.map((p, i) => {
    const x = (i / (points.length - 1)) * w;
    const y = h - ((p - min) / (max - min)) * h;
    return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
  }).join(' ');
  const area = `${path} L ${w} ${h} L 0 ${h} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <defs>
        <linearGradient id="chartGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="oklch(0.72 0.18 290)" stopOpacity="0.3" />
          <stop offset="100%" stopColor="oklch(0.72 0.18 290)" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={area} fill="url(#chartGrad)" />
      <path d={path} fill="none" stroke="oklch(0.78 0.2 290)" strokeWidth="1" />
    </svg>
  );
}

function DashboardMock() {
  return (
    <div className="dash">
      <aside className="dash-side">
        <div className="dash-org">
          <div className="dash-org-mark"></div>
          <div>
            <div className="dash-org-name">Atelier Moreau</div>
            <div className="dash-org-meta">Plomberie · 12 pers.</div>
          </div>
        </div>
        <div className="dash-section-label">Espace</div>
        <div className="dash-item active">
          <span className="dash-icon"><Icon.Pulse /></span>
          Tableau de bord
        </div>
        <div className="dash-item">
          <span className="dash-icon"><Icon.Inbox /></span>
          Boîte unifiée
          <span className="dash-badge">12</span>
        </div>
        <div className="dash-item">
          <span className="dash-icon"><Icon.Users /></span>
          Clients
        </div>
        <div className="dash-item">
          <span className="dash-icon"><Icon.Calendar /></span>
          Planning
        </div>
        <div className="dash-item">
          <span className="dash-icon"><Icon.Invoice /></span>
          Devis & factures
        </div>
        <div className="dash-section-label">Automatisations</div>
        <div className="dash-item">
          <span className="dash-icon"><Icon.Bot /></span>
          Chatbot WhatsApp
        </div>
        <div className="dash-item">
          <span className="dash-icon"><Icon.Phone /></span>
          Standard IA
        </div>
        <div className="dash-item">
          <span className="dash-icon"><Icon.Star /></span>
          Avis Google
        </div>
        <div className="dash-item">
          <span className="dash-icon"><Icon.Settings /></span>
          Paramètres
        </div>
      </aside>
      <div className="dash-main">
        <div className="dash-topbar">
          <div>
            <h3>Bonjour, Julien</h3>
            <div className="dash-topbar-meta">
              Lundi 27 avril <span className="dim">·</span> 6 nouvelles demandes ce matin
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <div className="btn btn-ghost" style={{ padding: '6px 12px', fontSize: 12 }}>
              <Icon.Sparkle size={14} /> Demander à LeadCustom
            </div>
            <div className="btn btn-primary" style={{ padding: '6px 12px', fontSize: 12 }}>
              + Nouveau devis
            </div>
          </div>
        </div>

        <div className="dash-stats">
          <div className="stat">
            <div className="stat-label">Devis envoyés</div>
            <div className="stat-value">38</div>
            <div className="stat-delta">↑ 24% sem.</div>
          </div>
          <div className="stat">
            <div className="stat-label">CA en cours</div>
            <div className="stat-value">62,4k€</div>
            <div className="stat-delta">↑ 12%</div>
          </div>
          <div className="stat">
            <div className="stat-label">Appels qualifiés</div>
            <div className="stat-value">147</div>
            <div className="stat-delta">↑ 8%</div>
          </div>
          <div className="stat">
            <div className="stat-label">Note Google</div>
            <div className="stat-value">4,9 ★</div>
            <div className="stat-delta">+ 23 avis</div>
          </div>
        </div>

        <div className="dash-row">
          <div className="panel">
            <div className="panel-title">
              <span>Activité en direct</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--text-dim)' }}>
                <span className="pulse"></span> live
              </span>
            </div>
            <div>
              <div className="feed-item">
                <div className="feed-icon bot"><Icon.Bot size={12} /></div>
                <div className="feed-text">
                  <div className="feed-title">Mme Ferrand · WhatsApp</div>
                  <div className="feed-meta">Devis fuite chauffe-eau · qualifié auto</div>
                </div>
                <div className="feed-time">à l'instant</div>
              </div>
              <div className="feed-item">
                <div className="feed-icon call"><Icon.Phone size={12} /></div>
                <div className="feed-text">
                  <div className="feed-title">Appel manqué transcrit</div>
                  <div className="feed-meta">Urgence : chaudière HS · rappel programmé</div>
                </div>
                <div className="feed-time">2 min</div>
              </div>
              <div className="feed-item">
                <div className="feed-icon invoice"><Icon.Invoice size={12} /></div>
                <div className="feed-text">
                  <div className="feed-title">Facture #2104 réglée</div>
                  <div className="feed-meta">M. Bertin · 1 480 € · virement</div>
                </div>
                <div className="feed-time">8 min</div>
              </div>
              <div className="feed-item">
                <div className="feed-icon review"><Icon.Star size={12} /></div>
                <div className="feed-text">
                  <div className="feed-title">Nouvel avis Google · 5 étoiles</div>
                  <div className="feed-meta">Réponse envoyée automatiquement</div>
                </div>
                <div className="feed-time">14 min</div>
              </div>
            </div>
          </div>
          <div className="panel">
            <div className="panel-title">
              <span>Devis cette semaine</span>
              <span style={{ fontSize: 11, color: 'var(--green)', fontFamily: 'Geist Mono, monospace' }}>+24%</span>
            </div>
            <div className="chart">
              <MiniChart />
            </div>
            <div style={{ marginTop: 12, fontSize: 11, color: 'var(--text-dim)', display: 'flex', justifyContent: 'space-between', fontFamily: 'Geist Mono, monospace' }}>
              <span>Lun</span><span>Mar</span><span>Mer</span><span>Jeu</span><span>Ven</span><span>Sam</span><span>Dim</span>
            </div>
            <div style={{ marginTop: 16, paddingTop: 12, borderTop: '1px solid var(--border)' }}>
              <div style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'Geist Mono, monospace', marginBottom: 6 }}>TAUX DE CONVERSION</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em' }}>68%</span>
                <span style={{ fontSize: 11, color: 'var(--green)', fontFamily: 'Geist Mono, monospace' }}>↑ 19 pts</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-content">
          <div style={{ marginBottom: 24 }}>
            <span className="eyebrow">Nouveau · LeadCustom 2.5 · standard IA en 14 langues</span>
          </div>
          <h1 className="h-display">
            <span className="line">L'OS qui répond, devise</span>
            <span className="line">et facture <span className="serif gradient-text">à votre place.</span></span>
          </h1>
          <p className="hero-sub">
            LeadCustom est un CRM autonome propulsé par l'IA pour les artisans, les agences immobilières et les PME. Agents IA, chatbot WhatsApp, standard téléphonique 24/7, devis vocaux, planning, avis Google et réseaux sociaux : tout est automatisé. Et sur mesure, on crée aussi votre site web ou application.
          </p>
          <div className="hero-actions">
            <a href="#pricing" className="btn btn-primary btn-lg">
              Voir les offres premium <Icon.Arrow />
            </a>
            <a href="#receptionist" className="btn btn-ghost btn-lg">
              <Icon.Phone size={14} /> Écouter un appel IA
            </a>
          </div>
          <div className="hero-meta">
            <span className="hero-meta-item"><span className="check"></span> Setup à partir de 890€</span>
            <span className="hero-meta-item"><span className="check"></span> Garantie 14 jours</span>
            <span className="hero-meta-item"><span className="check"></span> Assistance gratuite avant abonnement</span>
            <span className="hero-meta-item"><Icon.Lock size={12} /> RGPD & CCPA · données chiffrées</span>
          </div>
        </div>

        <div className="hero-product reveal">
          <div className="product-glow"></div>
          <div className="product-frame">
            <DashboardMock />
          </div>
        </div>

        <div className="logos">
          <div className="logos-label">Plus de 2 400 artisans et PME font confiance à LeadCustom</div>
          <div className="logos-grid">
            <div className="logo-item">Atelier Moreau</div>
            <div className="logo-item">Garage&Co</div>
            <div className="logo-item">CleanPro</div>
            <div className="logo-item">Verde Jardin</div>
            <div className="logo-item">Bertrand BTP</div>
            <div className="logo-item">Lumiart</div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Nav = Nav;
window.Hero = Hero;