// Editorial hero — split layout. Left: massive type. Right: live agent status card.

const Hero = () => {
  const codeRef = useSpotlight();
  const chatRef = useSpotlight();
  return (
  <section className="hero grain" data-screen-label="01 Hero">

    <h1 className="hero__title">
      <span className="hero__title-line">
        On construit vos <span className="accent accent--amber">outils</span>.
      </span>
      <span className="hero__title-line">
        On déploie vos <span className="accent accent--amber">agents IA</span>.
      </span>
    </h1>

    <p className="hero__sub">
      Studio de développement web et d'agents IA à Marseille. On code vos applications sur-mesure et on déploie les agents qui répondent, vendent et organisent — 24h/24, sur tous vos canaux.
    </p>

    <div className="hero__cta-row">
      <button className="btn-primary">
        Discuter de votre projet
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </button>
    </div>

    <div className="hero__split">

      {/* LEFT — CRM / COMMERCIAL DASHBOARD PREVIEW */}
      <div className="hero-card-wrap">
        <span className="hero-card-overlabel">Votre outil sur-mesure</span>
      <article ref={codeRef} className="hero-card hero-card--tool spotlight" style={{ position: 'relative', overflow: 'hidden' }}>
        <header className="saas2__chrome">
          <span className="saas2__chrome-dots"><span></span><span></span><span></span></span>
          <span className="saas2__chrome-url">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            app.checkeasy.studio
          </span>
          <span className="hero-card__badge hero-card__badge--terra">01 · OUTIL</span>
        </header>

        <div className="crm__body">

          {/* CRM SIDEBAR */}
          <aside className="crm__sidebar">
            <div className="crm__sidebar-inner">
              <div className="crm__section">
                <div className="crm__section-head">
                  <span>GESTION</span>
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M6 9l6 6 6-6"/></svg>
                </div>
                <nav className="crm__nav">
                  <a className="crm__nav-item crm__nav-item--active">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/></svg>
                    Dashboard
                  </a>
                  <a className="crm__nav-item">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3h18v4H3z"/><path d="M3 9h12v4H3z"/><path d="M3 15h6v4H3z"/></svg>
                    Logements
                    <span className="crm__badge">47</span>
                  </a>
                  <a className="crm__nav-item">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 21h18"/><path d="M5 21V7l8-4v18"/><path d="M19 21V11l-6-4"/></svg>
                    Ménages
                    <span className="crm__badge">12</span>
                  </a>
                  <a className="crm__nav-item">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
                    Signalements
                  </a>
                </nav>
              </div>

              <div className="crm__section">
                <div className="crm__section-head">
                  <span>OPÉRATIONS</span>
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M6 9l6 6 6-6"/></svg>
                </div>
                <nav className="crm__nav">
                  <a className="crm__nav-item">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>
                    Check-in / out
                  </a>
                  <a className="crm__nav-item">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
                    Voyageurs
                  </a>
                  <a className="crm__nav-item">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
                    Calendrier
                  </a>
                  <a className="crm__nav-item">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 12h-6l-2 3H10l-2-3H2"/><path d="M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z"/></svg>
                    Équipe terrain
                  </a>
                </nav>
              </div>

              <div className="crm__section">
                <div className="crm__section-head">
                  <span>COMMUNICATION</span>
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M6 9l6 6 6-6"/></svg>
                </div>
                <nav className="crm__nav">
                  <a className="crm__nav-item">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
                    WhatsApp auto
                  </a>
                  <a className="crm__nav-item">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
                    Notifications
                  </a>
                </nav>
              </div>
            </div>

            <div className="crm__sidebar-footer">
              <div className="crm__user">
                <span className="crm__user-avatar">ML</span>
                <div className="crm__user-info">
                  <span className="crm__user-name">Marie Lefèvre</span>
                  <span className="crm__user-email">marie@checkeasy.co</span>
                </div>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ opacity: 0.5, flexShrink: 0 }}><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
              </div>
            </div>
          </aside>

          {/* MAIN CONTENT */}
          <div className="crm__main">
            <div className="crm__main-header">
              <h2 className="crm__title">Vue d'ensemble</h2>
              <p className="crm__subtitle">Logements, ménages et signalements en temps réel</p>
            </div>

            <div className="crm__kpis">
              <div className="crm__kpi-card">
                <span className="crm__kpi-icon crm__kpi-icon--blue">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
                </span>
                <div className="crm__kpi-text">
                  <span className="crm__kpi-label">Logements actifs</span>
                  <span className="crm__kpi-value">47 <span className="crm__kpi-sub">/ 52</span></span>
                </div>
              </div>
              <div className="crm__kpi-card">
                <span className="crm__kpi-icon crm__kpi-icon--teal">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 00-4-4H4"/></svg>
                </span>
                <div className="crm__kpi-text">
                  <span className="crm__kpi-label">Ménages cette semaine</span>
                  <span className="crm__kpi-value">38 <span className="crm__kpi-sub">/ 42</span></span>
                </div>
              </div>
              <div className="crm__kpi-card">
                <span className="crm__kpi-icon crm__kpi-icon--amber">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
                </span>
                <div className="crm__kpi-text">
                  <span className="crm__kpi-label">Taux de conformité</span>
                  <span className="crm__kpi-value">94% <span className="crm__kpi-sub">/ 97%</span></span>
                </div>
              </div>
            </div>

            <div className="crm__funnel">
              <h3 className="crm__funnel-title">Signalements en cours</h3>
              <div className="crm__funnel-rows">
                <div className="crm__funnel-row">
                  <span className="crm__funnel-label">Nouveau</span>
                  <div className="crm__funnel-bar-wrap">
                    <div className="crm__funnel-bar crm__funnel-bar--teal" style={{ width: '60%' }}>
                      <span className="crm__funnel-count">5</span>
                    </div>
                  </div>
                </div>
                <div className="crm__funnel-row">
                  <span className="crm__funnel-label">En traitement</span>
                  <div className="crm__funnel-bar-wrap">
                    <div className="crm__funnel-bar crm__funnel-bar--teal" style={{ width: '38%' }}>
                      <span className="crm__funnel-count">3</span>
                    </div>
                  </div>
                </div>
                <div className="crm__funnel-row">
                  <span className="crm__funnel-label">Analysé par IA</span>
                  <div className="crm__funnel-bar-wrap">
                    <div className="crm__funnel-bar crm__funnel-bar--teal" style={{ width: '92%' }}>
                      <span className="crm__funnel-count">8</span>
                    </div>
                  </div>
                </div>
                <div className="crm__funnel-row">
                  <span className="crm__funnel-label">Résolu</span>
                  <div className="crm__funnel-bar-wrap">
                    <div className="crm__funnel-bar crm__funnel-bar--teal" style={{ width: '100%' }}>
                      <span className="crm__funnel-count">12</span>
                    </div>
                  </div>
                </div>
                <div className="crm__funnel-row">
                  <span className="crm__funnel-label">Urgent</span>
                  <div className="crm__funnel-bar-wrap">
                    <div className="crm__funnel-bar crm__funnel-bar--teal" style={{ width: '15%' }}>
                      <span className="crm__funnel-count crm__funnel-count--red">1</span>
                    </div>
                  </div>
                </div>
                <div className="crm__funnel-row">
                  <span className="crm__funnel-label">En attente</span>
                  <div className="crm__funnel-bar-wrap">
                    <div className="crm__funnel-bar crm__funnel-bar--teal" style={{ width: '25%' }}>
                      <span className="crm__funnel-count">2</span>
                    </div>
                  </div>
                </div>
                <div className="crm__funnel-row">
                  <span className="crm__funnel-label">Clôturé</span>
                  <div className="crm__funnel-bar-wrap">
                    <div className="crm__funnel-bar crm__funnel-bar--teal" style={{ width: '100%' }}>
                      <span className="crm__funnel-count crm__funnel-count--green">24</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* CHAT WIDGET OVERLAY */}
          <div className="crm__chat-widget">
            <header className="crm__chat-header">
              <span className="crm__chat-icon">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2C6.48 2 2 5.58 2 10c0 2.13 1.06 4.04 2.74 5.4L3.5 20l4.26-2.13A11.5 11.5 0 0012 18.5c5.52 0 10-3.58 10-8S17.52 2 12 2z"/></svg>
              </span>
              <span className="crm__chat-label">Assistant IA</span>
              <span className="crm__chat-actions">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M23 4v6h-6"/><path d="M1 20v-6h6"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
              </span>
            </header>
            <div className="crm__chat-body">
              <div className="crm__chat-msg">
                <p className="crm__chat-msg-title">Signalement #247 — Rue Paradis</p>
                <p>L'IA Vision a analysé les photos du ménage :</p>
                <p className="crm__chat-quote">"Carreau fissuré dans la salle de bain, trace d'humidité sous l'évier. Niveau : intervention recommandée avant le prochain check-in."</p>
                <p className="crm__chat-msg-title" style={{ marginTop: '8px' }}>Actions suggérées</p>
                <ol className="crm__chat-list">
                  <li><strong>Planifier un artisan</strong> avant vendredi 14h (check-in)</li>
                  <li><strong>Prévenir le voyageur</strong> d'un éventuel décalage</li>
                  <li><strong>Archiver les photos</strong> pour le dossier propriétaire</li>
                </ol>
                <p>Je peux <strong>envoyer la demande d'intervention</strong> au prestataire maintenant.</p>
              </div>
            </div>
            <div className="crm__chat-input">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ opacity: 0.4, flexShrink: 0 }}><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>
              <span className="crm__chat-placeholder">Écrivez votre message...</span>
              <span className="crm__chat-send">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
              </span>
            </div>
            <div className="crm__chat-powered">Powered by La Traverse</div>
          </div>

        </div>
      </article>
      </div>

      {/* RIGHT — AGENT CHAT PREVIEW */}
      <div className="hero-card-wrap">
        <span className="hero-card-overlabel hero-card-overlabel--amber">Votre agent IA en action</span>
      <article ref={chatRef} className="hero-card hero-card--agent spotlight">
        <header className="hero-card__head">
          <span className="hero-card__avatar">
            <img src={window.AGENT_AVATAR_URL && window.AGENT_AVATAR_URL('Sofia')} alt="Sofia" />
          </span>
          <div>
            <div className="hero-card__name">Sofia</div>
            <div className="hero-card__role">Accueil &amp; réservation · WhatsApp</div>
          </div>
          <span className="hero-card__badge hero-card__badge--amber">02 · AGENT</span>
        </header>
        <div className="hero-card__body hero-card__body--chat">
          <div className="hero-card__bubble hero-card__bubble--client">
            <span className="hero-card__bubble-from">Christine · 14:31</span>
            Bonjour, j'aimerais réserver un cours de surf samedi matin pour mes deux enfants 🏄
          </div>
          <div className="hero-card__bubble hero-card__bubble--agent">
            <span className="hero-card__bubble-from">Sofia · à l'instant</span>
            Bonjour Christine ! Il reste deux places samedi à 10h.
            Je vous les bloque le temps que vous confirmiez.
            <span className="hero-card__typing"><span></span><span></span><span></span></span>
          </div>
        </div>
        <footer className="hero-card__foot">
          <span><span className="hero-card__live hero-card__live--amber"></span>LIVE</span>
          <span>conversation #4827</span>
          <span>répondu en 3,4 s</span>
        </footer>
      </article>
      </div>

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

window.Hero = Hero;