/* Sections: Canvas / Kanban / Database blocks + Pricing + Apps + Demo + Docs + Final */
const { useState: useStateS } = React;

function Block({ side, chip, chipClass, title, lede, features, accent, mockup: Mockup, link }) {
  return (
    <section className={`horus-section horus-block ${side === 'right' ? '' : 'horus-block--reverse'}`}>
      <div>
        <span className={`horus-block__chip ${chipClass}`}>{chip}</span>
        <h2 className="horus-block__title">{title}</h2>
        <p className="horus-block__lede">{lede}</p>
        <div className="horus-block__features">
          {features.map((f, i) => (
            <div key={i} className="horus-block__feature">
              <div className="horus-block__feature-icon" style={{ background: accent }}>
                <i data-lucide={f.icon} />
              </div>
              <div className="horus-block__feature-text">
                <b>{f.title}</b>
                <span>{f.desc}</span>
              </div>
            </div>
          ))}
        </div>
        <a className="horus-block__link">
          {link}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
        </a>
      </div>
      <div className="horus-block__visual">
        <div className="horus-block__visual-inner">
          <div style={{ position: 'relative', width: '100%', height: '100%' }}>
            <Mockup />
          </div>
        </div>
      </div>
    </section>
  );
}

function BoardsSection() {
  return (
    <div id="boards">
      <section className="horus-section" style={{ paddingTop: 80 }}>
        <div className="horus-eyebrow">La plateforme</div>
        <h2 className="horus-section-title">Les mêmes projets. <em>Trois perspectives.</em></h2>
        <p className="horus-section-lede">
          Un board Horus n'est pas figé dans un seul format. Basculez entre Canvas, Kanban ou Database d'un clic — les données restent, l'interface s'adapte à votre façon de réfléchir.
        </p>
      </section>

      <Block side="right"
        chip="Canvas" chipClass="horus-block__chip--canvas"
        accent="linear-gradient(135deg,#3B82F6,#2563EB)"
        title="Pensez en grand. Dessinez en grand."
        lede="Un canvas infini pour cartographier vos idées. Post-its, formes, flèches, croquis, fichiers, todos — tout vit côte à côte, en temps réel avec votre équipe."
        features={[
          { icon: 'sticky-note', title: 'Post-its, formes, dessins', desc: '14 types d\'éléments, assemblables et connectables.' },
          { icon: 'users', title: 'Collaboration en direct', desc: 'Curseurs en direct, modifications instantanées.' },
          { icon: 'move', title: 'Zoom et pan infinis', desc: 'Grille optionnelle alignée sur 8 px.' },
        ]}
        mockup={CanvasMockup}
        link="Explorer le Canvas"
      />

      <Block side="left"
        chip="Kanban" chipClass="horus-block__chip--kanban"
        accent="linear-gradient(135deg,#A855F7,#7C3AED)"
        title="Des colonnes, des cartes, du flow."
        lede="Un tableau Kanban pensé pour l'exécution. Glissez, déposez, priorisez — avec tout le contexte directement sur la carte."
        features={[
          { icon: 'move', title: 'Drag & drop fluide', desc: 'Réordonnez cartes et colonnes sans latence.' },
          { icon: 'alert-circle', title: 'Priorités & échéances', desc: 'Urgent, haute, moyenne, basse — codées en couleur.' },
          { icon: 'check-square', title: 'Sous-tâches & pièces jointes', desc: 'Checklists, fichiers, mentions, tout sur la carte.' },
        ]}
        mockup={KanbanMockup}
        link="Explorer le Kanban"
      />

      <Block side="right"
        chip="Database" chipClass="horus-block__chip--db"
        accent="linear-gradient(135deg,#10B981,#059669)"
        title="La structure quand vous en avez besoin."
        lede="Base de données typée : texte, nombre, date, select, url, checkbox. Filtrez, triez, regroupez — chaque projet devient interrogeable."
        features={[
          { icon: 'database', title: '8 types de propriétés', desc: 'Texte, nombre, date, select, multi-select, url, email, checkbox.' },
          { icon: 'list-filter', title: 'Filtres & tris combinés', desc: 'Empilez les conditions, sauvegardez vos vues.' },
          { icon: 'arrow-right-left', title: 'Synchronisé avec Kanban', desc: 'La même donnée, deux rendus — aucune duplication.' },
        ]}
        mockup={DatabaseMockup}
        link="Explorer la Database"
      />
    </div>
  );
}

// ─── DEMO ───
function DemoSection() {
  const [tab, setTab] = useStateS('canvas');
  const Map = { canvas: CanvasMockup, kanban: KanbanMockup, database: DatabaseMockup };
  const C = Map[tab];
  return (
    <section className="horus-section horus-demo" id="demo">
      <div className="horus-eyebrow">Démo interactive</div>
      <h2 className="horus-section-title">Essayez les trois vues <em>sans créer de compte.</em></h2>
      <p className="horus-section-lede">Cliquez sur un onglet pour basculer entre les modes. Toutes les données sont partagées — c'est la même ressource, vue autrement.</p>
      <div className="horus-demo__shell">
        <div className="horus-demo__tabs">
          <span className="horus-demo__dot" style={{ background: '#EF4444' }} />
          <span className="horus-demo__dot" style={{ background: '#F59E0B' }} />
          <span className="horus-demo__dot" style={{ background: '#10B981' }} />
          <div style={{ width: 20 }} />
          {[
            { id: 'canvas', label: 'Canvas', icon: 'layout-grid' },
            { id: 'kanban', label: 'Kanban', icon: 'columns-3' },
            { id: 'database', label: 'Database', icon: 'table-2' },
          ].map(t => (
            <button key={t.id} className={`horus-demo__tab ${tab === t.id ? 'is-active' : ''}`} onClick={() => setTab(t.id)}>
              <i data-lucide={t.icon} />
              {t.label}
            </button>
          ))}
          <div style={{ flex: 1 }} />
          <div style={{ color: '#6B7280', fontSize: 12, paddingRight: 8 }}>horus.app / roadmap-q2</div>
        </div>
        <div className="horus-demo__body">
          <div style={{ position: 'absolute', inset: 20 }}>
            <C />
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── PRICING ───
function PricingSection() {
  const plans = [
    { name: 'Solo', price: '0', sub: '/ mois', desc: 'Pour explorer Horus et ses trois vues sur vos projets perso.', popular: false,
      feats: ['3 boards illimités', '2 types de board par projet', 'Canvas + Kanban + Database', 'Export JSON / CSV', '100 Mo de stockage'] },
    { name: 'Pro', price: '9', sub: '€ / mois', desc: 'Pour les créatifs et freelances qui vivent dans Horus.', popular: true,
      feats: ['Boards illimités', 'Tous les types de board', 'Collaboration jusqu\'à 5 invités', 'Historique 30 jours', '10 Go de stockage', 'Intégrations (Slack, Notion, GitHub)'] },
    { name: 'Équipe', price: '19', sub: '€ / membre', desc: 'Pour les petites équipes qui veulent un seul outil partagé.', popular: false,
      feats: ['Tout Pro, pour toute l\'équipe', 'Dossiers partagés & permissions', 'SSO Google & Microsoft', 'Historique illimité', 'Stockage 100 Go / membre', 'Support prioritaire'] },
  ];
  return (
    <section className="horus-section horus-pricing" id="pricing">
      <div className="horus-eyebrow">Tarifs</div>
      <h2 className="horus-section-title">Simple. <em>Sans surprise.</em></h2>
      <p className="horus-section-lede">Commencez gratuitement, passez Pro quand Horus devient votre outil principal. Annulable à tout moment.</p>
      <div className="horus-pricing__grid">
        {plans.map(p => (
          <div key={p.name} className={`horus-price ${p.popular ? 'horus-price--popular' : ''}`}>
            {p.popular && <span className="horus-price__badge">Le plus choisi</span>}
            <div className="horus-price__name">{p.name}</div>
            <div className="horus-price__amount"><b>{p.price}</b><span>{p.sub}</span></div>
            <p className="horus-price__desc">{p.desc}</p>
            <ul className="horus-price__feats">
              {p.feats.map(f => (
                <li key={f}>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  {f}
                </li>
              ))}
            </ul>
            <button className={`horus-btn ${p.popular ? 'horus-btn--primary' : 'horus-btn--ghost'}`} style={{ justifyContent: 'center' }}>
              {p.price === '0' ? 'Créer un compte' : 'Choisir ' + p.name}
            </button>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── APPS ECOSYSTEM ───
function AppsSection() {
  const apps = [
    { name: 'Horus Boards',   desc: 'Canvas, Kanban, Database — la gestion de projet centrale.', icon: 'layout-grid', grad: 'linear-gradient(135deg,#3B82F6,#8B5CF6)', state: 'ready', tag: 'Disponible' },
    { name: 'Horus Docs',     desc: 'Écriture collaborative typée, liée à vos boards.',         icon: 'file-text',   grad: 'linear-gradient(135deg,#F59E0B,#EF4444)', state: 'soon',  tag: 'Q3 2026' },
    { name: 'Horus Calendar', desc: 'Planning unifié, vue cartes / timeline / semaine.',        icon: 'calendar',    grad: 'linear-gradient(135deg,#10B981,#059669)', state: 'soon',  tag: 'Q4 2026' },
    { name: 'Horus Meet',     desc: 'Réunions avec notes automatiques posées sur le board.',    icon: 'video',       grad: 'linear-gradient(135deg,#EC4899,#8B5CF6)', state: 'later', tag: 'Prévu' },
  ];
  return (
    <section className="horus-section horus-apps" id="apps">
      <div className="horus-eyebrow">Écosystème Horus</div>
      <h2 className="horus-section-title">Une suite, <em>pensée comme un tout.</em></h2>
      <p className="horus-section-lede">
        Boards est le premier produit d'une famille cohérente. Chaque outil partage données, thème et raccourcis — jamais de re-saisie, jamais de changement de contexte.
      </p>
      <div className="horus-apps__grid">
        {apps.map(a => (
          <div key={a.name} className={`horus-app ${a.state === 'ready' ? 'horus-app--ready' : 'horus-app--locked'}`}>
            <div>
              <div className="horus-app__icon" style={{ background: a.grad }}>
                <i data-lucide={a.icon} />
              </div>
              <h3 className="horus-app__name">{a.name}</h3>
              <p className="horus-app__desc">{a.desc}</p>
            </div>
            <span className={`horus-app__tag ${a.state === 'soon' ? 'horus-app__tag--soon' : a.state === 'later' ? 'horus-app__tag--later' : ''}`}>
              {a.tag}
            </span>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── DOCS ───
function DocsSection() {
  const docs = [
    { icon: 'book-open', title: 'Guide de démarrage', desc: 'Créez votre premier board en 5 minutes.' },
    { icon: 'code-2',    title: 'Référence API',       desc: 'Endpoints REST, webhooks, authentification.' },
    { icon: 'puzzle',    title: 'Intégrations',         desc: 'Slack, GitHub, Figma, Zapier, n8n.' },
  ];
  return (
    <section className="horus-section horus-docs" id="docs">
      <div className="horus-eyebrow">Documentation</div>
      <h2 className="horus-section-title">Tout est documenté. <em>Promis.</em></h2>
      <div className="horus-docs__grid">
        {docs.map(d => (
          <a key={d.title} className="horus-doc">
            <div className="horus-doc__icon"><i data-lucide={d.icon} /></div>
            <h4>{d.title}</h4>
            <p>{d.desc}</p>
            <span className="horus-doc__arrow">Lire
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </span>
          </a>
        ))}
      </div>
    </section>
  );
}

// ─── FINAL CTA ───
function FinalSection() {
  return (
    <section className="horus-section">
      <div className="horus-final">
        <div className="horus-final__box">
          <h2 className="horus-final__title">Commencez maintenant.<br/><span style={{ background: 'linear-gradient(135deg,#60A5FA,#A78BFA)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>C'est gratuit.</span></h2>
          <p className="horus-final__sub">Créez votre compte en 20 secondes, importez depuis Notion ou Trello, et retrouvez vos projets sous trois angles différents.</p>
          <div className="horus-final__ctas">
            <button className="horus-btn horus-btn--primary">
              Créer un compte
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" width="16" height="16"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </button>
            <button className="horus-btn horus-btn--ghost">Parler à l'équipe</button>
          </div>
        </div>
        <footer className="horus-footer">
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: '#fff', fontWeight: 600 }}>
            <span className="horus-nav__mark" style={{ width: 24, height: 24, fontSize: 13 }}>H</span>
            Horus © 2026
          </div>
          <div>
            <a>Mentions légales</a>
            <a href="confidentialite.html">Confidentialité</a>
            <a>Statut</a>
            <a href="mailto:contact@horus-pro.fr">Contact</a>
          </div>
        </footer>
      </div>
    </section>
  );
}

Object.assign(window, { BoardsSection, DemoSection, PricingSection, AppsSection, DocsSection, FinalSection });