// Bento features grid + WhatsApp interactive demo + AI receptionist demo

function Bento() {
  return (
    <section className="section" id="features">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Fonctionnalités</span>
          <h2 className="h-section">Une équipe digitale<br/>qui ne dort jamais.</h2>
          <p>Sept agents IA spécialisés, orchestrés dans un seul CRM. Vous restez sur le terrain ; LeadCustom gère le reste.</p>
        </div>

        <div className="bento">
          <div className="bento-card col-3 row-2 reveal">
            <div className="bento-icon-wrap"><Icon.Invoice /></div>
            <h3>Devis, factures & relances<br/>générés en un message.</h3>
            <p>Décrivez le chantier en vocal, photo ou en chat : LeadCustom produit un devis chiffré, l'envoie, relance le client jusqu'à signature, puis émet la facture.</p>
            <div className="bento-visual">
              <BentoInvoice />
            </div>
          </div>

          <div className="bento-card col-3 reveal">
            <div className="bento-icon-wrap"><Icon.Bot /></div>
            <h3>Chatbot WhatsApp & Messenger 24/7</h3>
            <p>Comprend, qualifie, prend les RDV, envoie les devis. En 14 langues. Conversations transmises à un humain en un clic.</p>
            <div className="bento-visual">
              <BentoChatbot />
            </div>
          </div>

          <div className="bento-card col-3 reveal">
            <div className="bento-icon-wrap"><Icon.Phone /></div>
            <h3>Standard IA qui qualifie chaque appel</h3>
            <p>Décroche en moins de 2 sonneries, identifie l'urgence, prend les coordonnées et planifie le rappel. Aucun appel perdu.</p>
            <div className="bento-visual">
              <BentoCall />
            </div>
          </div>

          <div className="bento-card col-2 reveal">
            <div className="bento-icon-wrap"><Icon.Mic /></div>
            <h3>Devis vocaux & comptes-rendus photo</h3>
            <p>Parlez ou photographiez le chantier. L'IA structure tout : matériaux, temps, photos avant/après.</p>
          </div>

          <div className="bento-card col-2 reveal">
            <div className="bento-icon-wrap"><Icon.Calendar /></div>
            <h3>Planning intelligent & rappels auto</h3>
            <p>Optimise les tournées par zone, envoie SMS de rappel, coordonne les équipes en temps réel.</p>
            <div className="bento-visual">
              <BentoPlanning />
            </div>
          </div>

          <div className="bento-card col-2 reveal">
            <div className="bento-icon-wrap"><Icon.Star /></div>
            <h3>Avis Google & réseaux automatisés</h3>
            <p>Demande d'avis post-chantier, réponse contextuelle, posts hebdo Instagram & Facebook avec photos chantier.</p>
            <div className="bento-visual">
              <BentoReviews />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BentoInvoice() {
  return (
    <div style={{
      background: 'var(--bg-elevated)',
      border: '1px solid var(--border)',
      borderRadius: 12,
      padding: 18,
      fontSize: 12,
      fontFamily: 'Geist Mono, monospace',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
        <div>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', textTransform: 'uppercase' }}>DEVIS</div>
          <div style={{ fontSize: 16, color: 'var(--text)', marginTop: 4, fontFamily: 'Geist, sans-serif', fontWeight: 500 }}>#2107 · Mme Ferrand</div>
        </div>
        <div style={{
          padding: '4px 10px',
          background: 'oklch(0.78 0.16 150 / 0.15)',
          color: 'var(--green)',
          borderRadius: 100,
          fontSize: 11,
          alignSelf: 'flex-start',
        }}>SIGNÉ</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, color: 'var(--text-muted)', fontSize: 12 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span>Remplacement chauffe-eau 200L</span>
          <span style={{ color: 'var(--text)' }}>1 240 €</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span>Main d'œuvre · 4 h</span>
          <span style={{ color: 'var(--text)' }}>320 €</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span>Évacuation ancien matériel</span>
          <span style={{ color: 'var(--text)' }}>80 €</span>
        </div>
      </div>
      <div style={{
        marginTop: 14,
        paddingTop: 12,
        borderTop: '1px solid var(--border)',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}>
        <span style={{ color: 'var(--text-dim)', fontSize: 11 }}>TOTAL TTC</span>
        <span style={{ fontSize: 22, fontWeight: 500, fontFamily: 'Geist, sans-serif', letterSpacing: '-0.02em' }}>1 968 €</span>
      </div>
      <div style={{
        marginTop: 12,
        padding: '8px 10px',
        background: 'oklch(0.72 0.18 290 / 0.08)',
        border: '1px solid oklch(0.72 0.18 290 / 0.2)',
        borderRadius: 8,
        fontSize: 11,
        color: 'var(--accent-bright)',
        fontFamily: 'Geist, sans-serif',
        display: 'flex',
        alignItems: 'center',
        gap: 6,
      }}>
        <Icon.Sparkle size={12} /> Généré en 4s à partir d'un vocal de 22 s
      </div>
    </div>
  );
}

function BentoChatbot() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 12 }}>
      <div style={{
        alignSelf: 'flex-start',
        background: 'oklch(0.22 0.015 145)',
        padding: '8px 12px',
        borderRadius: 10,
        borderTopLeftRadius: 2,
        maxWidth: '85%',
        color: 'oklch(0.95 0 0)',
      }}>Bonjour, fuite sous l'évier 😬 vous passez quand ?</div>
      <div style={{
        alignSelf: 'flex-end',
        background: 'oklch(0.32 0.06 145)',
        padding: '8px 12px',
        borderRadius: 10,
        borderTopRightRadius: 2,
        maxWidth: '85%',
        color: 'oklch(0.97 0 0)',
      }}>Je peux vous envoyer un plombier demain à 9h ou 14h. Une photo de la fuite ?</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4, color: 'var(--text-dim)', fontSize: 10, fontFamily: 'Geist Mono, monospace' }}>
        <span style={{ width: 6, height: 6, background: 'var(--green)', borderRadius: '50%' }}></span>
        Réponse en 1,2 s · 24/7
      </div>
    </div>
  );
}

function BentoCall() {
  return (
    <div style={{
      background: 'var(--bg-elevated)',
      border: '1px solid var(--border)',
      borderRadius: 12,
      padding: 14,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
        <div style={{
          width: 32, height: 32,
          background: 'oklch(0.72 0.18 290 / 0.15)',
          borderRadius: '50%',
          display: 'grid',
          placeItems: 'center',
          color: 'var(--accent-bright)',
        }}><Icon.Phone size={14} /></div>
        <div>
          <div style={{ fontSize: 12, fontWeight: 500 }}>+33 6 87 22 14 09</div>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'Geist Mono, monospace' }}>00:42 · transcrit en direct</div>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 2, height: 32, justifyContent: 'center' }}>
        {[6, 14, 22, 18, 26, 12, 28, 20, 16, 24, 10, 22, 18, 26, 14, 8, 20].map((h, i) => (
          <span key={i} style={{
            width: 2,
            height: h,
            background: 'linear-gradient(180deg, var(--accent-bright), var(--cyan))',
            borderRadius: 100,
            animation: `wave 1.2s ease-in-out infinite`,
            animationDelay: `${i * 0.06}s`,
          }}></span>
        ))}
      </div>
      <div style={{ marginTop: 10, fontSize: 11, color: 'var(--text-muted)', fontFamily: 'Geist Mono, monospace', textAlign: 'center' }}>
        URGENCE détectée · rappel SMS &lt; 5 min
      </div>
    </div>
  );
}

function BentoPlanning() {
  const slots = [
    { time: '09:00', label: 'Bertin', color: 'var(--accent)' },
    { time: '11:30', label: 'Ferrand', color: 'var(--cyan-dim)' },
    { time: '14:00', label: 'Dubois', color: 'var(--green)' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 11, fontFamily: 'Geist Mono, monospace' }}>
      {slots.map((s, i) => (
        <div key={i} style={{
          display: 'flex',
          alignItems: 'center',
          gap: 10,
          padding: '6px 10px',
          background: 'var(--bg-elevated)',
          border: '1px solid var(--border)',
          borderRadius: 8,
          borderLeft: `3px solid ${s.color}`,
        }}>
          <span style={{ color: 'var(--text-dim)' }}>{s.time}</span>
          <span style={{ color: 'var(--text)', fontFamily: 'Geist, sans-serif' }}>{s.label}</span>
          <span style={{ marginLeft: 'auto', color: 'var(--text-dim)' }}>4.2 km</span>
        </div>
      ))}
    </div>
  );
}

function BentoReviews() {
  return (
    <div style={{
      background: 'var(--bg-elevated)',
      border: '1px solid var(--border)',
      borderRadius: 10,
      padding: 12,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
        <div style={{ display: 'flex', gap: 1, color: 'var(--amber)' }}>
          {[0,1,2,3,4].map(i => <Icon.Star key={i} size={11} filled />)}
        </div>
        <span style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'Geist Mono, monospace' }}>il y a 2 h · Google</span>
      </div>
      <div style={{ fontSize: 12, color: 'var(--text)', lineHeight: 1.4 }}>
        "Réactif, propre, pro. Devis en 5 minutes après l'appel."
      </div>
      <div style={{
        marginTop: 8,
        paddingTop: 8,
        borderTop: '1px solid var(--border)',
        fontSize: 11,
        color: 'var(--accent-bright)',
        fontFamily: 'Geist Mono, monospace',
        display: 'flex',
        alignItems: 'center',
        gap: 6,
      }}>
        <Icon.Sparkle size={11} /> Réponse postée auto
      </div>
    </div>
  );
}

window.Bento = Bento;