import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Guide — NoteToQuote',
  description: 'Comment installer et utiliser NoteToQuote dans Dolibarr. Tutoriel complet pour artisans.',
};

function Step({ n, title, children }: { n: number; title: string; children: React.ReactNode }) {
  return (
    <div style={{ display: 'flex', gap: 20, marginBottom: 40 }}>
      <div style={{ flexShrink: 0, width: 36, height: 36, borderRadius: '50%', background: 'linear-gradient(135deg, #6d28d9, #a855f7)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 800, fontSize: 15, marginTop: 2 }}>
        {n}
      </div>
      <div style={{ flex: 1 }}>
        <h3 style={{ margin: '0 0 10px', fontSize: 17, fontWeight: 700, color: '#0f0f0f' }}>{title}</h3>
        {children}
      </div>
    </div>
  );
}

function Tag({ children }: { children: React.ReactNode }) {
  return (
    <code style={{ background: '#f3f4f6', border: '1px solid #e5e7eb', borderRadius: 6, padding: '2px 8px', fontSize: 12, color: '#374151', fontFamily: 'monospace' }}>
      {children}
    </code>
  );
}

function Tip({ children }: { children: React.ReactNode }) {
  return (
    <div style={{ display: 'flex', gap: 10, background: '#fffbeb', border: '1px solid #fde68a', borderRadius: 10, padding: '12px 14px', margin: '14px 0', fontSize: 13, color: '#92400e', lineHeight: 1.5 }}>
      <span style={{ flexShrink: 0 }}>💡</span>
      <span>{children}</span>
    </div>
  );
}

function Section({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
  return (
    <section id={id} style={{ marginBottom: 56 }}>
      <h2 style={{ fontSize: 22, fontWeight: 800, color: '#0f0f0f', margin: '0 0 24px', paddingBottom: 12, borderBottom: '2px solid #f0eef8' }}>
        {title}
      </h2>
      {children}
    </section>
  );
}

export default function AidePage() {
  const card: React.CSSProperties = {
    background: '#fff', borderRadius: 16, padding: '20px 24px', marginBottom: 12,
    boxShadow: '0 0 0 1px #f0eef8, 0 2px 12px rgba(0,0,0,.04)',
  };

  return (
    <div style={{ maxWidth: 720, margin: '0 auto', padding: '56px 24px 80px' }}>

      {/* Header */}
      <div style={{ marginBottom: 48 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: '#f5f3ff', border: '1px solid #ddd6fe', color: '#6d28d9', fontSize: 12, fontWeight: 600, padding: '5px 12px', borderRadius: 99, marginBottom: 16 }}>
          Guide d&apos;utilisation
        </div>
        <h1 style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-0.03em', color: '#0f0f0f', margin: '0 0 12px', lineHeight: 1.15 }}>
          Comment utiliser NoteToQuote
        </h1>
        <p style={{ fontSize: 15, color: '#6b7280', margin: 0, lineHeight: 1.65 }}>
          NoteToQuote est un module pour Dolibarr. Vous tapez vos notes de chantier, l&apos;IA génère les lignes de devis. Ce guide vous explique comment l&apos;installer et l&apos;utiliser en 10 minutes.
        </p>
      </div>

      {/* Sommaire */}
      <div style={{ ...card, marginBottom: 48 }}>
        <p style={{ margin: '0 0 12px', fontSize: 11, fontWeight: 700, color: '#9ca3af', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Sommaire</p>
        {[
          { href: '#prerequis',     label: '1. Prérequis' },
          { href: '#installation',  label: '2. Installation du module' },
          { href: '#configuration', label: '3. Configuration de la clé' },
          { href: '#utilisation',   label: '4. Générer votre premier devis' },
          { href: '#conseils',      label: '5. Conseils pour de bons résultats' },
          { href: '#faq',           label: '6. Questions fréquentes' },
        ].map(({ href, label }) => (
          <a key={href} href={href} style={{ display: 'block', padding: '7px 0', fontSize: 14, color: '#7c3aed', textDecoration: 'none', fontWeight: 500, borderBottom: '1px solid #f9f7ff' }}>
            {label}
          </a>
        ))}
      </div>

      {/* 1. Prérequis */}
      <Section id="prerequis" title="1. Prérequis">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}>
          {[
            { label: 'Dolibarr installé', sub: 'Version 17 ou supérieure' },
            { label: 'Accès administrateur', sub: 'Pour installer les modules' },
            { label: 'Une clé de licence', sub: 'Obtenue sur notetoquote.com' },
            { label: 'Connexion internet', sub: 'Pour appeler l\'IA' },
          ].map(({ label, sub }) => (
            <div key={label} style={{ background: '#f8faf9', borderRadius: 12, padding: '14px 16px', display: 'flex', alignItems: 'flex-start', gap: 10 }}>
              <span style={{ color: '#059669', fontWeight: 700, fontSize: 16, flexShrink: 0 }}>✓</span>
              <div>
                <p style={{ margin: 0, fontWeight: 600, fontSize: 13, color: '#0f0f0f' }}>{label}</p>
                <p style={{ margin: 0, fontSize: 12, color: '#6b7280' }}>{sub}</p>
              </div>
            </div>
          ))}
        </div>
        <Tip>Pas encore de clé ? <a href="/" style={{ color: '#7c3aed', fontWeight: 600 }}>Obtenez 10 devis gratuits</a> pour tester sans engagement, sans carte bancaire.</Tip>
      </Section>

      {/* 2. Installation */}
      <Section id="installation" title="2. Installation du module">
        <Step n={1} title="Téléchargez le module depuis votre espace client">
          <p style={{ fontSize: 14, color: '#4b5563', lineHeight: 1.65, margin: 0 }}>
            Connectez-vous sur <a href="/dashboard" style={{ color: '#7c3aed', fontWeight: 600 }}>votre espace client</a> avec votre clé de licence. Cliquez sur <strong>Télécharger</strong> pour récupérer le fichier <Tag>module_notetoquote-1.0.0.zip</Tag>.
          </p>
        </Step>

        <Step n={2} title="Uploadez le zip dans Dolibarr">
          <p style={{ fontSize: 14, color: '#4b5563', lineHeight: 1.65, margin: 0 }}>
            Dans Dolibarr, allez dans <Tag>Configuration</Tag> → <Tag>Modules / Applications</Tag> → onglet <Tag>Déployer / Installer un module externe</Tag>. Cliquez sur <strong>Choisir un fichier</strong>, sélectionnez le zip, puis cliquez <strong>Envoyer</strong>.
          </p>
          <Tip>Pour une mise à jour, le zip écrase simplement les anciens fichiers. Pas besoin de désinstaller au préalable.</Tip>
        </Step>

        <Step n={3} title="Activez le module NoteToQuote">
          <p style={{ fontSize: 14, color: '#4b5563', lineHeight: 1.65, margin: 0 }}>
            Toujours dans <Tag>Modules / Applications</Tag>, recherchez <strong>NoteToQuote</strong> dans la liste et cliquez sur le bouton pour l&apos;activer.
          </p>
        </Step>
      </Section>

      {/* 3. Configuration */}
      <Section id="configuration" title="3. Configuration de la clé de licence">
        <Step n={1} title="Ouvrez la configuration NoteToQuote">
          <p style={{ fontSize: 14, color: '#4b5563', lineHeight: 1.65, margin: 0 }}>
            Cliquez sur l&apos;icône de réglage à côté de NoteToQuote dans la liste des modules, ou allez dans <Tag>NoteToQuote</Tag> → <Tag>Configuration</Tag> dans le menu.
          </p>
        </Step>

        <Step n={2} title="Collez votre clé de licence">
          <p style={{ fontSize: 14, color: '#4b5563', lineHeight: 1.65, margin: 0 }}>
            Copiez votre clé depuis <a href="/dashboard" style={{ color: '#7c3aed', fontWeight: 600 }}>votre espace client</a> (format <Tag>LAU-XXXX-XXXX-XXXX</Tag>) et collez-la dans le champ <strong>Clé de licence</strong>. Cliquez sur <strong>Enregistrer</strong>.
          </p>
        </Step>

        <Step n={3} title="Vérifiez que la licence est active">
          <p style={{ fontSize: 14, color: '#4b5563', lineHeight: 1.65, margin: 0 }}>
            Cliquez sur <strong>Vérifier la licence</strong>. Si tout est correct, vous verrez votre plan et votre quota de devis restants pour le mois.
          </p>
        </Step>
      </Section>

      {/* 4. Utilisation */}
      <Section id="utilisation" title="4. Générer votre premier devis">
        <Step n={1} title="Ouvrez une fiche tiers dans Dolibarr">
          <p style={{ fontSize: 14, color: '#4b5563', lineHeight: 1.65, margin: 0 }}>
            Ouvrez la fiche du client pour lequel vous souhaitez créer un devis, puis cliquez sur l&apos;onglet <strong>NoteToQuote</strong>.
          </p>
        </Step>

        <Step n={2} title="Saisissez vos notes de chantier">
          <p style={{ fontSize: 14, color: '#4b5563', lineHeight: 1.65, margin: '0 0 10px' }}>
            Tapez vos notes comme vous les prendriez sur le terrain. L&apos;IA comprend le langage naturel — pas besoin de les formater. Exemple :
          </p>
          <div style={{ background: '#f8f7ff', border: '1px solid #ddd6fe', borderRadius: 10, padding: '14px 16px', fontSize: 13, color: '#374151', lineHeight: 1.7, fontStyle: 'italic' }}>
            &ldquo;Remplacement chaudière gaz Atlantic 24kW, pose robinets thermostatiques sur 6 radiateurs, purge circuit, mise en service. Déplacement 30km aller-retour.&rdquo;
          </div>
          <Tip>Plus vos notes sont précises (matériaux, marques, quantités, distances), plus le devis généré sera juste.</Tip>
        </Step>

        <Step n={3} title='Cliquez sur "Générer le devis"'>
          <p style={{ fontSize: 14, color: '#4b5563', lineHeight: 1.65, margin: 0 }}>
            L&apos;IA analyse vos notes et génère les lignes de devis en quelques secondes : désignation, quantité et prix unitaire pour chaque poste. <strong>Les prix sont des prix HT</strong> — vérifiez-les et adaptez vos marges avant d&apos;envoyer.
          </p>
        </Step>

        <Step n={4} title="Relisez et créez le devis dans Dolibarr">
          <p style={{ fontSize: 14, color: '#4b5563', lineHeight: 1.65, margin: 0 }}>
            Ajustez les lignes si besoin, puis cliquez sur <strong>Créer le devis</strong>. Les lignes sont importées directement dans un devis Dolibarr associé au client, prêt à être envoyé.
          </p>
        </Step>
      </Section>

      {/* 5. Conseils */}
      <Section id="conseils" title="5. Conseils pour de bons résultats">
        {[
          { title: 'Soyez précis sur les quantités', body: "Mentionnez les surfaces, longueurs, nombres d'unités. \"10 mètres de gaine\" est mieux que \"de la gaine\"." },
          { title: 'Précisez les marques si vous les connaissez', body: "L'IA peut calibrer les prix selon la gamme. \"Radiateur Acova 1000W\" est plus précis que \"radiateur\"." },
          { title: "N'oubliez pas la main d'œuvre", body: "Déplacement, mise en service, essais — l'IA les intègre si vous les mentionnez dans vos notes." },
          { title: 'Les prix générés sont HT et indicatifs', body: "L'IA propose une base de tarification. Relisez toujours, ajustez selon votre contexte, vos marges et les conditions du chantier." },
        ].map(({ title, body }) => (
          <div key={title} style={{ display: 'flex', gap: 12, marginBottom: 16, background: '#fafaf9', borderRadius: 12, padding: '14px 16px' }}>
            <div style={{ flexShrink: 0, width: 8, height: 8, borderRadius: '50%', background: '#7c3aed', marginTop: 6 }} />
            <div>
              <p style={{ margin: '0 0 4px', fontWeight: 700, fontSize: 14, color: '#0f0f0f' }}>{title}</p>
              <p style={{ margin: 0, fontSize: 13, color: '#6b7280', lineHeight: 1.6 }}>{body}</p>
            </div>
          </div>
        ))}
      </Section>

      {/* 6. FAQ */}
      <Section id="faq" title="6. Questions fréquentes">
        {[
          { q: "J'ai perdu ma clé de licence, que faire ?", a: "Écrivez-nous à contact@notetoquote.com en indiquant l'email avec lequel vous avez souscrit. Nous générerons une nouvelle clé et vous la renverrons par email. Pour des raisons de sécurité, nous ne stockons pas les clés en clair — nous ne pouvons pas récupérer l'ancienne, mais nous en créons une nouvelle immédiatement." },
          { q: "Combien de devis puis-je générer par mois ?", a: "Selon votre formule : 50/mois (Solo), 200/mois (Essentiel), 500/mois (Pro), illimité (Agence). Le compteur se remet à zéro le 1er de chaque mois." },
          { q: "Les prix générés sont-ils HT ou TTC ?", a: "Les lignes de devis générées par l'IA sont toujours en prix HT, comme le fonctionnement standard de Dolibarr. La TVA s'applique ensuite selon les paramètres de votre compte Dolibarr." },
          { q: "Avec quelle version de Dolibarr ça fonctionne ?", a: "Dolibarr 17 et supérieur." },
          { q: "Mes notes de chantier sont-elles stockées ?", a: "Non. Vos notes sont envoyées à notre API pour traitement par l'IA, puis immédiatement supprimées. Nous ne conservons pas le contenu de vos notes." },
          { q: "Comment mettre à jour le module ?", a: "Téléchargez le nouveau zip depuis votre espace client, puis uploadez-le dans Dolibarr → Configuration → Modules → Déployer. Les anciens fichiers sont écrasés automatiquement." },
          { q: "Puis-je utiliser le module sur plusieurs Dolibarr ?", a: "Chaque clé de licence est valable pour une seule installation Dolibarr. Si vous avez plusieurs sociétés ou plusieurs serveurs distincts, prenez une licence par installation, ou contactez-nous pour la formule Agence." },
          { q: "Comment résilier mon abonnement ?", a: "Depuis votre espace client, cliquez sur \"Gérer mon abonnement\" et suivez les instructions. Résiliation en un clic, sans pénalité, effective à la fin de la période en cours." },
        ].map(({ q, a }) => (
          <div key={q} style={{ borderBottom: '1px solid #f0eef8', paddingBottom: 20, marginBottom: 20 }}>
            <p style={{ margin: '0 0 8px', fontWeight: 700, fontSize: 14, color: '#0f0f0f' }}>{q}</p>
            <p style={{ margin: 0, fontSize: 14, color: '#6b7280', lineHeight: 1.65 }}>{a}</p>
          </div>
        ))}
      </Section>

      {/* CTA */}
      <div style={{ background: 'linear-gradient(135deg, #f5f3ff, #fdf4ff)', border: '1px solid #ddd6fe', borderRadius: 20, padding: '32px 28px', textAlign: 'center' }}>
        <h2 style={{ fontSize: 22, fontWeight: 800, color: '#0f0f0f', margin: '0 0 8px' }}>Une question ?</h2>
        <p style={{ fontSize: 14, color: '#6b7280', margin: '0 0 20px' }}>On répond généralement en moins d&apos;une heure en journée.</p>
        <a
          href="mailto:contact@notetoquote.com"
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: 'linear-gradient(135deg, #6d28d9, #7c3aed)', color: '#fff',
            fontWeight: 700, fontSize: 14, padding: '12px 24px', borderRadius: 12,
            textDecoration: 'none', boxShadow: '0 4px 14px rgba(109,40,217,.35)',
          }}
        >
          Écrire à contact@notetoquote.com →
        </a>
      </div>

      <style>{`
        @media (max-width: 540px) {
          div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}