/* Taskaway — Site components (shared) */

const INK = '#0A0E1A';
const PAPER = '#F5F3EE';
const LIME = '#D4FF4F';

// Tweak defaults (edited by host when Tweaks panel is used)
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#D4FF4F",
  "density": "regular",
  "dark": false
} /*EDITMODE-END*/;

const ACCENT_OPTIONS = {
  'Lime': '#D4FF4F',
  'Orange': '#FF6B35',
  'Cyan': '#5FE3D7',
  'Magenta': '#FF4FD4',
  'Amber': '#FFB84D'
};

// Count-up hook — eases a number toward its target over ~450ms
function useCountUp(target, duration = 450) {
  const [val, setVal] = React.useState(target);
  const ref = React.useRef({ from: target, to: target, start: 0, raf: 0 });
  React.useEffect(() => {
    const st = ref.current;
    st.from = val;
    st.to = target;
    st.start = performance.now();
    cancelAnimationFrame(st.raf);
    const tick = (now) => {
      const t = Math.min(1, (now - st.start) / duration);
      const eased = t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
      const next = st.from + (st.to - st.from) * eased;
      setVal(next);
      if (t < 1) st.raf = requestAnimationFrame(tick);
    };
    st.raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(st.raf);
  }, [target, duration]);
  return val;
}

// ─── Logo ──────────────────────────────────────────────────────────────
function Mark({ size = 32, color, accent = LIME }) {
  const s = size;
  const c = color || 'currentColor';
  return (
    <svg width={s} height={s} viewBox="0 0 64 64" style={{ display: 'block', color: c }}>
      <line x1="10" y1="14" x2="54" y2="14" stroke={c} strokeWidth="9" />
      <line x1="32" y1="14" x2="32" y2="36" stroke={c} strokeWidth="9" />
      <path d="M 32 36 L 16 50" stroke={c} strokeWidth="9" strokeLinecap="square" fill="none" />
      <path d="M 32 36 L 32 52" stroke={c} strokeWidth="9" fill="none" />
      <path d="M 32 36 L 48 50" stroke={c} strokeWidth="9" strokeLinecap="square" fill="none" />
      <circle cx="32" cy="36" r="4.5" fill={accent} stroke={c} strokeWidth="1.5" />
      <circle cx="16" cy="50" r="2.5" fill={c} />
      <circle cx="32" cy="52" r="2.5" fill={c} />
      <circle cx="48" cy="50" r="2.5" fill={c} />
    </svg>);

}

function Logo({ height = 32, color, accent = LIME }) {
  const c = color || 'currentColor';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: height * 0.32, color: c }}>
      <Mark size={height} color={c} accent={accent} />
      <span style={{
        fontFamily: "'Space Grotesk', sans-serif",
        fontWeight: 700,
        fontSize: height * 0.62,
        letterSpacing: '-0.03em',
        color: c,
        lineHeight: 1
      }}>taskaway<span style={{ color: accent }}>.</span></span>
    </div>);

}

// ─── Nav ───────────────────────────────────────────────────────────────
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 10);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={'nav' + (scrolled ? ' nav-scrolled' : '')}>
      <div className="container nav-inner">
        <a href="#top" className="nav-logo" aria-label="Taskaway accueil"><Logo height={30} /></a>
        <nav className="nav-links">
          <a href="#services">Services</a>
          <a href="#roi">Simulateur</a>
          <a href="#process">Process</a>
          <a href="#why">Pourquoi</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="nav-cta">
          <a href="/audit" className="btn btn-primary">Audit Gratuit →</a>
        </div>
        <button className="nav-burger" onClick={() => setOpen(!open)} aria-label="Menu">
          <span /><span /><span />
        </button>
      </div>
      {open &&
      <div className="nav-mobile">
          <a href="#services" onClick={() => setOpen(false)}>Services</a>
          <a href="#roi" onClick={() => setOpen(false)}>Simulateur</a>
          <a href="#process" onClick={() => setOpen(false)}>Process</a>
          <a href="#why" onClick={() => setOpen(false)}>Pourquoi Taskaway</a>
          <a href="#faq" onClick={() => setOpen(false)}>FAQ</a>
          <a href="/audit" className="btn btn-primary" onClick={() => setOpen(false)}>Audit Gratuit →</a>
        </div>
      }
    </header>);

}

// ─── Workflow animation (hero visual) ──────────────────────────────────
function WorkflowDiagram() {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 1800);
    return () => clearInterval(id);
  }, []);
  const sources = [
  { label: 'Stripe', y: 50 },
  { label: 'HubSpot', y: 140 },
  { label: 'Shopify', y: 230 },
  { label: 'Typeform', y: 320 }];

  const dests = [
  { label: 'Slack', y: 70 },
  { label: 'Airtable', y: 160 },
  { label: 'Brevo', y: 250 },
  { label: 'Sheets', y: 340 }];

  return (
    <div className="workflow">
      <svg viewBox="0 0 680 400" style={{ width: '100%', height: '100%' }}>
        <defs>
          <pattern id="wfgrid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#ffffff10" strokeWidth="0.5" />
          </pattern>
        </defs>
        <rect width="680" height="400" fill="url(#wfgrid)" />

        {/* Corner ticks */}
        {[[20, 20], [660, 20], [20, 380], [660, 380]].map(([x, y], i) =>
        <g key={i} stroke={PAPER} strokeWidth="1" opacity="0.5">
            <line x1={x - 6} y1={y} x2={x + 6} y2={y} />
            <line x1={x} y1={y - 6} x2={x} y2={y + 6} />
          </g>
        )}

        {/* Connections */}
        {sources.map((s, i) =>
        <g key={'l' + i}>
            <path d={`M 140 ${s.y} L 260 ${s.y} L 340 200`} stroke={PAPER} strokeWidth="1.2" fill="none" opacity="0.5" />
          </g>
        )}
        {dests.map((d, i) =>
        <g key={'r' + i}>
            <path d={`M 340 200 L 420 ${d.y} L 540 ${d.y}`} stroke={PAPER} strokeWidth="1.2" fill="none" opacity="0.5" />
          </g>
        )}

        {/* Moving packet along one path */}
        {sources.map((s, i) => {
          const active = tick % sources.length === i;
          return active ?
          <circle key={'p' + i} r="4" fill={LIME}>
              <animateMotion dur="1.4s" repeatCount="1" path={`M 140 ${s.y} L 260 ${s.y} L 340 200`} />
            </circle> :
          null;
        })}
        {dests.map((d, i) => {
          const idx = (tick - 1) % dests.length;
          const active = idx === i && tick > 0;
          return active ?
          <circle key={'p2' + i} r="4" fill={LIME}>
              <animateMotion dur="1.4s" repeatCount="1" path={`M 340 200 L 420 ${d.y} L 540 ${d.y}`} />
            </circle> :
          null;
        })}

        {/* Source boxes */}
        {sources.map((s, i) =>
        <g key={s.label}>
            <rect x="60" y={s.y - 14} width="80" height="28" fill="none" stroke={PAPER} strokeWidth="1" />
            <text x="100" y={s.y + 4} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill={PAPER} letterSpacing="0.05em">{s.label.toUpperCase()}</text>
          </g>
        )}

        {/* Taskaway core node */}
        <g>
          <rect x="300" y="170" width="80" height="60" fill={INK} stroke={PAPER} strokeWidth="1.5" />
          <circle cx="340" cy="200" r="14" fill={LIME} stroke={PAPER} strokeWidth="1.5" />
          <text x="340" y="204" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fontWeight="600" fill={INK}>T.</text>
          <text x="340" y="250" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill={PAPER} opacity="0.6" letterSpacing="0.1em">[ TASKAWAY ]</text>
        </g>

        {/* Dest boxes */}
        {dests.map((d, i) =>
        <g key={d.label}>
            <rect x="540" y={d.y - 14} width="80" height="28" fill={PAPER} />
            <text x="580" y={d.y + 4} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill={INK} letterSpacing="0.05em">{d.label.toUpperCase()}</text>
          </g>
        )}

        {/* Labels */}
        <text x="100" y="30" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill={PAPER} opacity="0.5" letterSpacing="0.15em">SOURCES</text>
        <text x="580" y="30" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill={PAPER} opacity="0.5" letterSpacing="0.15em">DESTINATIONS</text>
      </svg>
    </div>);

}

// ─── Hero ──────────────────────────────────────────────────────────────
function Hero() {
  return (
    <section id="top" className="hero">
      <div className="container hero-inner">
        <div className="hero-left">
          <div className="hero-badge">
            <span className="pulse-dot"></span>
            <span className="mono" style={{ color: 'inherit', fontSize: 11 }}>⚡ Réponse sous 24h</span>
          </div>
          <h1 className="hero-h1">
            Récupérez <span className="hl">8 à 15h</span><br />par semaine, par poste.
          </h1>
          <p className="hero-sub">
            Taskaway automatise vos outils entre eux et supprime les tâches répétitives qui consomment votre équipe. ROI mesuré dès le premier mois.
          </p>
          <div className="hero-ctas">
            <a href="/audit" className="btn btn-dark btn-lg">
              Réserver notre Audit Gratuit
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M5 12h14m0 0-5-5m5 5-5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
            </a>
            <a href="#services" className="btn btn-ghost btn-lg">Voir les services ↓</a>
          </div>
          <div className="hero-meta">
            <span className="mono">C'est gratuit</span>
            <span className="dot">·</span>
            <span className="mono">Sans engagement</span>
            <span className="dot">·</span>
            <span className="mono">45 MINUTES AUDIT GRATUIT</span>
          </div>
        </div>
        <div className="hero-right">
          <div className="workflow-label mono" style={{ color: 'rgba(245,243,238,0.6)' }}>WORKFLOW · LIVE</div>
          <WorkflowDiagram />
        </div>
      </div>
    </section>);

}

// ─── Ticker ────────────────────────────────────────────────────────────
function Ticker() {
  const tools = ['Stripe', 'HubSpot', 'Airtable', 'Slack', 'Google Sheets', 'Shopify', 'Notion', 'Brevo', 'Pipedrive', 'Make', 'Zapier', 'Typeform', 'Webflow'];
  return (
    <section className="ticker-wrap" aria-label="Outils compatibles">
      <div className="container">
        <div className="ticker-head">
          <span className="mono">Taskaway automatise vos outils préférés</span>
          <span className="mono" style={{ color: 'var(--color-muted)' }}>+ 400 intégrations disponibles</span>
        </div>
      </div>
      <div className="ticker">
        <div className="ticker-track">
          {[...tools, ...tools, ...tools].map((t, i) =>
          <span className="ticker-item" key={i}>
              <span className="ticker-dot" />
              {t}
            </span>
          )}
        </div>
      </div>
    </section>);

}

// ─── ROI Bar (bold ROI focus) ──────────────────────────────────────────
function RoiBar() {
  const stats = [
  { big: '8-15h', unit: '/ semaine', label: 'récupérées par poste', detail: 'Source : McKinsey : 60% des employés peuvent économiser 30% de leur temps.' },
  { big: '+28%', unit: 'd’efficacité', label: 'opérationnelle en moyenne', detail: 'Sur les processus automatisés, dès les 3 premiers mois.' },
  { big: '−80%', unit: 'd’erreurs', label: 'de saisie manuelle', detail: 'Élimination des doubles saisies et oublis sur les workflows critiques.' },
  { big: '8-15h', unit: '/ semaine', label: 'des organisations rentabilisent', detail: 'Source : benchmark workflow automation 2025.' }];

  return (
    <section className="roibar">
      <div className="container">
        <div className="roibar-head">
          <span className="mono" style={{ color: LIME }}>→ LE CALCUL</span>
          <h2 className="roibar-h">
            Les chiffres réels<br />de l’automatisation.
          </h2>
        </div>
        <div className="roibar-grid">
          {stats.map((s, i) =>
          <div className="roibar-cell" key={i}>
              <span className="mono" style={{ color: 'rgba(245,243,238,0.5)' }}>{String(i + 1).padStart(2, '0')}</span>
              <div className="roibar-big">
                {s.big}<span className="roibar-unit">{s.unit}</span>
              </div>
              <div className="roibar-label">{s.label}</div>
              <div className="roibar-detail">{s.detail}</div>
            </div>
          )}
        </div>
        <div className="roibar-foot">
          <span style={{ color: 'rgba(245,243,238,0.6)', fontSize: 14 }}>Appliqué à une équipe de 5, avec 10h/sem récupérées par personne, c'est</span>
          <span style={{ fontFamily: "'Space Grotesk',sans-serif", fontWeight: 600, fontSize: 28, letterSpacing: '-0.02em' }}>≈ 2 600 heures / an redirigées<span style={{ color: LIME }}>.</span></span>
        </div>
      </div>
    </section>);

}

// ─── Problem ───────────────────────────────────────────────────────────
function Problem() {
  const cards = [
  {
    num: '01',
    stat: '94%',
    unit: 'des employés concernés',
    title: 'Travail répétitif',
    body: "Selon McKinsey, 94% des collaborateurs effectuent des tâches répétitives au quotidien : saisie, exports, relances manuelles. Un gisement de temps invisible mais massif."
  },
  {
    num: '02',
    stat: '4,5h',
    unit: '/ sem. en saisie seule',
    title: 'Erreurs coûteuses',
    body: "Une enquête Zapier montre que l'employé moyen perd 4,5h par semaine rien qu'en saisie manuelle — avec son lot d'erreurs silencieuses."
  },
  {
    num: '03',
    stat: '60%',
    unit: 'du temps en « work about work »',
    title: 'Plafond de verre',
    body: "Asana mesure que 60% du temps part en coordination : mises à jour de statut, déplacements de fichiers, transferts de données. Autant d'énergie qui ne part pas dans le métier."
  }];

  return (
    <section id="problem" className="problem">
      <div className="container">
        <div className="section-head">
          <span className="mono">01 — Le constat</span>
          <h2>Le vrai coût caché de<br />votre travail manuel.</h2>
          <p>Ce n'est pas juste du temps perdu. C'est de la croissance en moins, des clients en moins, de la sérénité en moins.</p>
        </div>
        <div className="problem-grid">
          {cards.map((c) =>
          <article key={c.num} className="pcard">
              <div className="pcard-head">
                <span className="mono">{c.num}</span>
                <span className="mono">PAIN POINT</span>
              </div>
              <div className="pcard-stat">
                <div className="pcard-num">{c.stat}</div>
                <div className="pcard-unit">{c.unit}</div>
              </div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ─── Services ──────────────────────────────────────────────────────────
function Services() {
  const cards = [
  {
    idx: '01',
    tag: 'LEAD MAGNET',
    title: 'L\'Audit Flash',
    price: 'Gratuit',
    duration: '45 minutes',
    desc: "On analyse vos processus et on identifie précisément où vous perdez temps et argent.",
    bullets: ['Cartographie de 1 à 3 processus', 'ROI estimé par workflow', 'Plan d\'action prioritaire'],
    cta: 'Réserver maintenant',
    featured: false
  },
  {
    idx: '02',
    tag: 'OFFRE PHARE',
    title: 'Le Projet Sur-Mesure',
    price: 'Sur devis',
    duration: '2 à 4 semaines',
    desc: "Setup complet de vos workflows d'automatisation. Clé en main. Formation équipe incluse. Support 3 mois offert.",
    bullets: ['Workflows production-ready', 'Documentation technique complète', 'Formation de votre équipe', 'Support 3 mois inclus'],
    cta: 'Demander un devis',
    featured: true
  },
  {
    idx: '03',
    tag: 'RECURRENT',
    title: 'Le Support Mensuel',
    price: 'Dès 200€',
    duration: 'par mois',
    desc: "Votre expert dédié pour maintenir, optimiser et créer de nouvelles automatisations à la demande.",
    bullets: ['Monitoring 24/7 des workflows', 'Nouvelles automatisations', 'SLA < 4h en jour ouvré'],
    cta: 'Voir les formules',
    featured: false
  }];

  return (
    <section id="services" className="services">
      <div className="container">
        <div className="section-head">
          <span className="mono">03 — Services</span>
          <h2>3 façons de travailler<br />avec Taskaway.</h2>
          <p>Un point d'entrée gratuit, une offre phare clé en main, un support récurrent. Vous choisissez selon votre maturité.</p>
        </div>
        <div className="services-grid">
          {cards.map((c) =>
          <article key={c.idx} className={'scard' + (c.featured ? ' scard-featured' : '')}>
              {c.featured && <div className="scard-badge mono">★ Le plus choisi</div>}
              <div className="scard-head">
                <span className="mono">{c.idx} · {c.tag}</span>
              </div>
              <h3 className="scard-title">{c.title}</h3>
              <div className="scard-price">
                <span className="scard-pnum">{c.price}</span>
                <span className="scard-pdur">· {c.duration}</span>
              </div>
              <p className="scard-desc">{c.desc}</p>
              <ul className="scard-list">
                {c.bullets.map((b) =>
              <li key={b}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                    {b}
                  </li>
              )}
              </ul>
              <a href="/audit" className={'btn ' + (c.featured ? 'btn-primary' : 'btn-ghost')}>{c.cta} →</a>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ─── Process ───────────────────────────────────────────────────────────
function Process() {
  const steps = [
  { num: '01', week: 'Semaine 0', title: 'Diagnostic', body: "On cartographie vos processus actuels et on identifie les gisements de temps.", icon: 'M3 12h4l3-9 4 18 3-9h4' },
  { num: '02', week: 'Semaine 1', title: 'Design', body: "Nous dessinons la machine parfaite pour vous. Validation sur maquette avant le code.", icon: 'M4 4h16v4H4zM4 12h10v8H4zM18 12h2v8h-2z' },
  { num: '03', week: 'Semaine 2-3', title: 'Construction', body: "Nous connectons tous vos outils, nous testons chaque chemin, nous mesurons les performances.", icon: 'M12 2l3 6 6 1-4.5 4.5 1 6-5.5-3-5.5 3 1-6L3 9l6-1z' },
  { num: '04', week: 'Semaine 4', title: 'Livraison', body: "Vous récupérez les clés, la documentation complète, et une session de formation.", icon: 'M5 12l5 5L20 7' }];

  return (
    <section id="process" className="process">
      <div className="container">
        <div className="section-head">
          <span className="mono">04 — Process</span>
          <h2>Décollage en 4 étapes.</h2>
          <p>Une méthode éprouvée, ritualisée, sans surprise. Chaque étape a son livrable.</p>
        </div>
        <div className="timeline">
          <div className="timeline-line" />
          {steps.map((s, i) =>
          <div className="tstep" key={s.num}>
              <div className="tstep-marker">
                <div className="tstep-dot" />
              </div>
              <div className="tstep-card">
                <div className="tstep-meta">
                  <span className="mono">{s.num}</span>
                  <span className="mono" style={{ color: 'var(--color-muted)' }}>{s.week}</span>
                </div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─── Why Taskaway ──────────────────────────────────────────────────────
function WhyN8n() {
  const args = [
  {
    tag: 'PRICING',
    h: '3× moins cher à volume',
    body: "Les outils SaaS d'automatisation explosent votre budget dès que vous scalez : facturation à la tâche. Notre stack reste flat, même à 100 000 exécutions/mois.",
    viz:
    <svg viewBox="0 0 220 110" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
          <line x1="10" y1="95" x2="165" y2="95" stroke={INK} strokeWidth="1" />
          <line x1="10" y1="15" x2="10" y2="95" stroke={INK} strokeWidth="1" />
          <path d="M 10 90 Q 80 85 100 55 T 160 20" stroke={INK} strokeWidth="1.5" fill="none" />
          <path d="M 10 91 L 160 85" stroke={INK} strokeWidth="1.5" fill="none" strokeDasharray="3 3" />
          <circle cx="160" cy="20" r="3" fill={INK} />
          <circle cx="160" cy="85" r="3" fill={LIME} stroke={INK} strokeWidth="1" />
          <text x="168" y="23" fontFamily="JetBrains Mono, monospace" fontSize="9" fill={INK}>SaaS</text>
          <text x="168" y="88" fontFamily="JetBrains Mono, monospace" fontSize="9" fill={INK}>Taskaway</text>
        </svg>

  },
  {
    tag: 'FLEXIBILITY',
    h: '100% flexible',
    body: "Accès au code, logique avancée, branchements conditionnels, API custom. Sans limite, sans quota artificiel.",
    viz:
    <svg viewBox="0 0 200 110" preserveAspectRatio="xMidYMid meet" style={{ width: '100%' }}>
          <rect x="15" y="47" width="40" height="16" fill="none" stroke={INK} strokeWidth="1" />
          <text x="35" y="58" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="8" fill={INK}>IN</text>
          <path d="M 55 55 L 80 25" stroke={INK} strokeWidth="1" fill="none" />
          <path d="M 55 55 L 80 55" stroke={INK} strokeWidth="1" fill="none" />
          <path d="M 55 55 L 80 85" stroke={INK} strokeWidth="1" fill="none" />
          <circle cx="85" cy="25" r="6" fill="none" stroke={INK} strokeWidth="1" />
          <circle cx="85" cy="55" r="6" fill={LIME} stroke={INK} strokeWidth="1" />
          <circle cx="85" cy="85" r="6" fill="none" stroke={INK} strokeWidth="1" />
          <path d="M 91 25 L 130 55" stroke={INK} strokeWidth="1" fill="none" />
          <path d="M 91 55 L 130 55" stroke={INK} strokeWidth="1" fill="none" />
          <path d="M 91 85 L 130 55" stroke={INK} strokeWidth="1" fill="none" />
          <rect x="130" y="47" width="55" height="16" fill={INK} />
          <text x="157" y="58" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="8" fill={PAPER}>CODE</text>
        </svg>

  },
  {
    tag: 'SOVEREIGNTY',
    h: 'Hébergeable en France',
    body: "Vos données restent chez vous ou chez un hébergeur FR/EU. Conformité RGPD native, pas de transfert hors-UE.",
    viz:
    <svg viewBox="0 0 200 115" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
          <rect x="20" y="8" width="160" height="100" fill="none" stroke={INK} strokeWidth="1" />
          <text x="100" y="22" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" fill={INK}>FR · EU</text>
          <line x1="20" y1="30" x2="180" y2="30" stroke={INK} strokeWidth="1" />
          <rect x="40" y="42" width="30" height="12" fill={INK} />
          <rect x="85" y="42" width="30" height="12" fill="none" stroke={INK} strokeWidth="1" />
          <rect x="130" y="42" width="30" height="12" fill="none" stroke={INK} strokeWidth="1" />
          <rect x="40" y="62" width="30" height="12" fill="none" stroke={INK} strokeWidth="1" />
          <rect x="85" y="62" width="30" height="12" fill={LIME} stroke={INK} strokeWidth="1" />
          <rect x="130" y="62" width="30" height="12" fill="none" stroke={INK} strokeWidth="1" />
          <line x1="20" y1="86" x2="180" y2="86" stroke={INK} strokeWidth="1" />
          <text x="100" y="100" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="8" fill={INK}>RGPD · NATIVE</text>
        </svg>

  }];

  return (
    <section id="why" className="whyn8n">
      <div className="container">
        <div className="section-head">
          <span className="mono">05 — Pourquoi Taskaway</span>
          <h2>Un expert dédié,<br />pas un outil générique.</h2>
          <p>Trois raisons qui font la différence quand on regarde à 12 mois — là où les plateformes grand public montrent leurs limites.</p>
        </div>
        <div className="whyn8n-grid">
          {args.map((a) =>
          <div key={a.tag} className="ncard">
              <div className="ncard-viz">{a.viz}</div>
              <span className="mono">{a.tag}</span>
              <h3>{a.h}</h3>
              <p>{a.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─── FAQ ───────────────────────────────────────────────────────────────
function FAQ() {
  const qs = [
  { q: "Est-ce compatible avec mes outils ?", a: "Si votre outil a une API (99% des outils modernes : Stripe, HubSpot, Notion, Shopify, Pipedrive, Brevo, Slack…), nous pouvons le connecter. Pour les outils plus exotiques, un connecteur custom est toujours possible via HTTP." },
  { q: "En quoi Taskaway est différent des outils grand public ?", a: "Les plateformes SaaS type Zapier sont pensées pour l'auto-setup sur des cas simples. Taskaway c'est une équipe dédiée, avec des workflows sur-mesure, une logique avancée (branchements, itérations, code custom) et un coût 3× inférieur à volume égal." },
  { q: "Combien ça coûte exactement ?", a: "L'audit est gratuit. Les projets sur-mesure démarrent à 1 500€ pour un workflow simple et montent à 15 000€ pour des setups multi-équipes. Le support mensuel démarre à 200€/mois. Tout dépend de votre périmètre — parlons-en." },
  { q: "Que se passe-t-il après la livraison ?", a: "Nous vous formons à la livraison, avec documentation complète et vidéos d'utilisation. Notre offre Support Mensuel prend le relais pour les évolutions, la maintenance et les nouvelles automatisations. Sans engagement de durée." },
  { q: "Mes données sont-elles en sécurité ?", a: "Votre infrastructure peut être hébergée chez vous, chez un hébergeur FR/EU de votre choix, ou sur notre infrastructure dédiée. Aucune donnée ne transite par un tiers. NDA possible dès le premier échange." }];

  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="faq">
      <div className="container">
        <div className="section-head">
          <span className="mono">06 — FAQ</span>
          <h2>Vos questions,<br />nos réponses.</h2>
        </div>
        <div className="faq-list">
          {qs.map((item, i) =>
          <div key={i} className={'faq-item' + (open === i ? ' open' : '')}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="mono faq-num">Q{String(i + 1).padStart(2, '0')}</span>
                <span className="faq-qt">{item.q}</span>
                <span className="faq-plus">
                  <svg width="20" height="20" viewBox="0 0 20 20"><line x1="10" y1="3" x2="10" y2="17" stroke="currentColor" strokeWidth="1.5" /><line x1="3" y1="10" x2="17" y2="10" stroke="currentColor" strokeWidth="1.5" /></svg>
                </span>
              </button>
              <div className="faq-a">
                <p>{item.a}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─── ROI Calculator ────────────────────────────────────────────────────
function RoiCalculator() {
  const [employees, setEmployees] = React.useState(5);
  const [hours, setHours] = React.useState(8);
  const [rate, setRate] = React.useState(35);
  const weeklyTarget = employees * hours;
  const annualTarget = weeklyTarget * 47;
  const savingsTarget = Math.round(annualTarget * rate);

  const weeklyHours = useCountUp(weeklyTarget);
  const annualHours = useCountUp(annualTarget);
  const annualSavings = useCountUp(savingsTarget);

  const formatNum = (n) => new Intl.NumberFormat('fr-FR').format(Math.round(n));
  const formatEuro = (n) => new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(Math.round(n));
  return (
    <section id="roi" className="roicalc">
      <div className="container">
        <div className="section-head">
          <span className="mono">02 — Simulateur</span>
          <h2>Calculez votre ROI<br />en trois curseurs.</h2>
          <p>Estimation basée sur les heures manuelles récupérables via automatisation. Fourchette prudente calibrée sur l'étude McKinsey (30% du temps en tâches automatisables).</p>
        </div>

        <div className="roicalc-grid">
          <div className="roicalc-inputs">
            <div className="roicalc-field">
              <div className="roicalc-field-head">
                <label htmlFor="rc-emp" className="mono">Taille d'équipe concernée</label>
                <span className="roicalc-val">{employees} {employees > 1 ? 'personnes' : 'personne'}</span>
              </div>
              <input id="rc-emp" type="range" min="1" max="50" step="1" value={employees} onChange={(e) => setEmployees(+e.target.value)} />
              <div className="roicalc-scale"><span>1</span><span>25</span><span>50</span></div>
            </div>

            <div className="roicalc-field">
              <div className="roicalc-field-head">
                <label htmlFor="rc-hrs" className="mono">Heures manuelles récupérables / sem / pers.</label>
                <span className="roicalc-val">{hours}h</span>
              </div>
              <input id="rc-hrs" type="range" min="2" max="20" step="1" value={hours} onChange={(e) => setHours(+e.target.value)} />
              <div className="roicalc-scale"><span>2h</span><span>10h</span><span>20h</span></div>
            </div>

            <div className="roicalc-field">
              <div className="roicalc-field-head">
                <label htmlFor="rc-rate" className="mono">Coût horaire chargé moyen</label>
                <span className="roicalc-val">{rate}€/h</span>
              </div>
              <input id="rc-rate" type="range" min="20" max="100" step="5" value={rate} onChange={(e) => setRate(+e.target.value)} />
              <div className="roicalc-scale"><span>20€</span><span>60€</span><span>100€</span></div>
            </div>
          </div>

          <div className="roicalc-results">
            <div className="roicalc-result">
              <span className="mono">HEURES / SEM.</span>
              <div className="roicalc-big">{formatNum(weeklyHours)}<span>h</span></div>
            </div>
            <div className="roicalc-divider" />
            <div className="roicalc-result">
              <span className="mono">HEURES / AN</span>
              <div className="roicalc-big">{formatNum(annualHours)}<span>h</span></div>
              <span className="roicalc-detail">Base 47 semaines de travail</span>
            </div>
            <div className="roicalc-divider" />
            <div className="roicalc-result roicalc-result-hero">
              <span className="mono" style={{ color: LIME }}>ÉCONOMIES / AN</span>
              <div className="roicalc-mega">{formatEuro(annualSavings)}</div>
              <span className="roicalc-detail">En valeur temps récupéré</span>
            </div>
            <a href="/audit" className="btn btn-primary roicalc-cta">
              Valider ce calcul avec un audit gratuit
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M5 12h14m0 0-5-5m5 5-5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
            </a>
          </div>
        </div>
      </div>
    </section>);

}

// ─── Not Do (scope honesty) ────────────────────────────────────────────
function NotDo() {
  const items = [
  {
    kind: 'no',
    tag: 'CE QUE NOUS NE FAISONS PAS',
    h: 'Projets < 2 500€ HT',
    body: 'Sous ce seuil, le coût fixe de cadrage et documentation dépasse la valeur livrée. Un Audit Flash suffit : il vous donnera souvent la réponse gratuitement.'
  },
  {
    kind: 'no',
    tag: 'CE QUE NOUS NE FAISONS PAS',
    h: 'Remplacement de CRM',
    body: "Nous orchestrons votre stack existante. Si HubSpot, Pipedrive ou Salesforce tiennent la route, on les garde et on les automatise. Pas de migration forcée."
  },
  {
    kind: 'no',
    tag: 'CE QUE NOUS NE FAISONS PAS',
    h: 'Bots IA marketing',
    body: "Génération de contenu, SEO automatisé, personas synthétiques : ce n'est pas notre métier. On connecte des systèmes, on ne produit pas de copy."
  },
  {
    kind: 'yes',
    tag: 'CE QUE NOUS FAISONS, TRÈS BIEN',
    h: 'Orchestration multi-outils',
    body: "Connecter vos 8 à 20 outils métiers entre eux, avec logique conditionnelle, retries, monitoring et documentation. Le cœur du métier."
  }];

  return (
    <section className="notdo">
      <div className="container">
        <div className="section-head">
          <span className="mono">→ HONNÊTETÉ</span>
          <h2>On préfère dire non.<br />Ça évite les mauvaises surprises.</h2>
          <p>La clarté du périmètre, c'est le premier livrable. Voici ce qui sort du cadre — et ce qui rentre, pile dedans.</p>
        </div>
        <div className="notdo-grid">
          {items.map((it, i) =>
          <div key={i} className={`notdo-card notdo-${it.kind}`}>
              <div className="notdo-icon" aria-hidden="true">
                {it.kind === 'no' ?
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /></svg> :

              <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 12l4 4 10-10" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
              }
              </div>
              <span className="mono notdo-tag">{it.tag}</span>
              <h3 className="notdo-h">{it.h}</h3>
              <p className="notdo-body">{it.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─── Final CTA ─────────────────────────────────────────────────────────
function FinalCTA() {
  return (
    <section id="audit" className="finalcta">
      <div className="container">
        <div className="finalcta-card">
          <div className="finalcta-grid" />
          <div className="finalcta-split">
            <div className="finalcta-left">
              <span className="mono" style={{ color: LIME }}>→ AUDIT GRATUIT · 45 MIN</span>
              <h2 className="finalcta-h">
                Prêt à récupérer<br /><span style={{ color: LIME }}>10h+</span> par semaine<span style={{ color: LIME }}>?</span>
              </h2>
              <p className="finalcta-sub">
                45 minutes. Zero commercial. On cartographie vos 3 tâches les plus chronophages et on vous livre une estimation chiffrée.
              </p>
              <ul className="finalcta-list">
                <li><span className="finalcta-check">✓</span> Diagnostic gratuit et sans engagement</li>
                <li><span className="finalcta-check">✓</span> Réponse sous 24h ouvrées</li>
                <li><span className="finalcta-check">✓</span> NDA possible avant tout échange</li>
                <li><span className="finalcta-check">✓</span> Données hébergées en France / EU</li>
              </ul>
            </div>
            <div className="finalcta-right" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 24 }}>
              <a href="/audit" className="btn btn-primary btn-lg" style={{ fontSize: 16, padding: '20px 36px', textAlign: 'center', justifyContent: 'center' }}>
                Réserver mon Audit Flash
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M5 12h14m0 0-5-5m5 5-5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
              </a>
              <div className="mono" style={{ fontSize: 12, opacity: 0.6, textAlign: 'center', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
                ● 5 min pour remplir · ● Réponse sous 24h · ● 0€ d'engagement
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);
}

// ─── Footer ────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <Logo height={28} color={PAPER} accent={LIME} />
            <p className="footer-tagline">Les tâches qui prennent du temps, c'est Taskaway qui s'en charge.</p>
          </div>
          <div className="footer-cols">
            <div className="footer-col">
              <span className="mono">Services</span>
              <a href="#services">Audit Flash</a>
              <a href="#services">Projet sur-mesure</a>
              <a href="#services">Support mensuel</a>
            </div>
            <div className="footer-col">
              <span className="mono">Ressources</span>
              <a href="#roi">Simulateur ROI</a>
              <a href="#process">Process</a>
              <a href="#why">Pourquoi Taskaway</a>
              <a href="#faq">FAQ</a>
            </div>
            <div className="footer-col">
              <span className="mono">Contact</span>
              <a href="mailto:hello@taskaway.fr">hello@taskaway.fr</a>
              <a href="#">LinkedIn ↗</a>
              <a href="#">Calendly ↗</a>
            </div>
          </div>
        </div>
        <div className="footer-trust">
          <div className="footer-trust-item">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" /><path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
            <span>Hébergement France / EU</span>
          </div>
          <div className="footer-trust-item">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><rect x="4" y="10" width="16" height="10" rx="1.5" stroke="currentColor" strokeWidth="1.5" /><path d="M8 10V7a4 4 0 118 0v3" stroke="currentColor" strokeWidth="1.5" /></svg>
            <span>Conforme RGPD</span>
          </div>
          <div className="footer-trust-item">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
            <span>NDA dès le 1er échange</span>
          </div>
          <div className="footer-trust-item">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5" /><path d="M12 7v5l3 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
            <span>Réponse sous 24h</span>
          </div>
        </div>
        <div className="footer-bot">
          <span className="mono">© 2026 Taskaway · SIRET en cours · taskaway.fr</span>
          <div className="footer-legal">
            <a href="#mentions">Mentions légales</a>
            <a href="#cgv">CGV</a>
            <a href="#privacy">Confidentialité / RGPD</a>
            <a href="#cookies">Cookies</a>
          </div>
        </div>
      </div>
    </footer>);

}

// ─── App ───────────────────────────────────────────────────────────────
// ─── Legal modal ───────────────────────────────────────────────────────
const LEGAL_TEXTS = {
  mentions: {
    title: 'Mentions légales',
    body: [
    ['Éditeur', "Taskaway — SASU au capital de 1 000 €. Siège social : [adresse], France. SIRET : [à compléter]. RCS : [à compléter]. TVA intracommunautaire : [à compléter]."],
    ['Directeur de la publication', "[Nom du dirigeant] — joignable par email à hello@taskaway.fr."],
    ['Hébergeur', "Le site taskaway.fr est hébergé en France / Union européenne. Aucun transfert de données hors UE sans consentement explicite."],
    ['Propriété intellectuelle', "L'ensemble des contenus (textes, graphismes, logo Taskaway) est protégé par le droit d'auteur. Toute reproduction sans autorisation écrite est interdite."],
    ['Contact', "hello@taskaway.fr — réponse sous 24h ouvrées."]]

  },
  cgv: {
    title: "Conditions générales de vente",
    body: [
    ['1. Objet', "Les présentes CGV régissent les prestations de consulting et d'ingénierie en automatisation de workflows fournies par Taskaway à ses clients professionnels."],
    ['2. Prestations', "Audit Flash (forfait), Projet sur-mesure (devis), Support Mensuel (abonnement sans engagement de durée). Chaque prestation fait l'objet d'un devis détaillé validé avant exécution."],
    ['3. Prix et paiement', "Les prix sont indiqués HT. Acompte de 30% à la commande, solde à la livraison. Support mensuel prélevé le 1er de chaque mois. Délai de paiement : 30 jours fin de mois."],
    ['4. Délais', "Les délais sont indicatifs et dépendent de la disponibilité des informations fournies par le client. Un retard côté client n'entraîne pas de pénalité Taskaway."],
    ['5. Propriété des livrables', "Le client devient propriétaire des workflows développés après règlement intégral. Les bibliothèques génériques et méthodes restent propriété de Taskaway."],
    ['6. Confidentialité', "Taskaway s'engage à la stricte confidentialité des données et informations client. NDA possible dès le premier échange, sur simple demande."],
    ['7. Responsabilité', "Obligation de moyens. Responsabilité plafonnée au montant facturé sur les 12 derniers mois."],
    ['8. Litige', "Droit français applicable. Compétence exclusive des tribunaux du siège social de Taskaway en cas de litige non résolu à l'amiable."]]

  },
  privacy: {
    title: 'Politique de confidentialité — RGPD',
    body: [
    ['Responsable du traitement', "Taskaway — hello@taskaway.fr — agit en qualité de responsable de traitement pour les données collectées via taskaway.fr."],
    ['Données collectées', "Formulaire d'audit : nom, email professionnel, entreprise, rôle, taille d'équipe, outils, descriptif du besoin. Aucune donnée sensible n'est demandée."],
    ['Finalités', "Traitement de votre demande d'audit, réponse personnalisée, établissement d'une proposition commerciale. Aucun démarchage non sollicité, aucun partage avec des tiers marketing."],
    ['Base légale', "Exécution de mesures précontractuelles et consentement explicite (case à cocher du formulaire)."],
    ['Durée de conservation', "3 ans à compter du dernier contact, sauf obligation légale supérieure (factures : 10 ans)."],
    ['Hébergement', "Données stockées en France / Union européenne. Aucun transfert hors UE sans consentement explicite."],
    ['Vos droits', "Accès, rectification, effacement, portabilité, opposition, limitation. Contact : hello@taskaway.fr. Réponse sous 30 jours. Recours possible auprès de la CNIL (cnil.fr)."]]

  },
  cookies: {
    title: 'Politique cookies',
    body: [
    ['Principe', "taskaway.fr n'utilise aucun cookie de tracking publicitaire, ni cookie tiers de profilage. Pas de Google Analytics, pas de pixels Meta/LinkedIn."],
    ['Cookies techniques', "Seul un cookie de session strictement nécessaire au fonctionnement du site peut être déposé. Il n'identifie pas l'utilisateur et expire à la fermeture du navigateur."],
    ['Mesure d\u2019audience', "Si une mesure est activée, elle utilise Plausible Analytics (sans cookie, sans IP stockée, hébergé en UE) — conforme RGPD sans consentement préalable."],
    ['Paramétrage', "Vous pouvez à tout moment refuser les cookies depuis les paramètres de votre navigateur. Aucun cookie non essentiel n'est déposé sans votre action."]]

  }
};

function LegalModal({ slug, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === 'Escape' && onClose();
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [onClose]);
  const doc = LEGAL_TEXTS[slug];
  if (!doc) return null;
  return (
    <div className="legal-overlay" onClick={onClose} role="dialog" aria-modal="true" aria-labelledby="legal-title">
      <div className="legal-modal" onClick={(e) => e.stopPropagation()}>
        <div className="legal-head">
          <span className="mono">→ DOCUMENT LÉGAL</span>
          <button className="legal-close" onClick={onClose} aria-label="Fermer">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg>
          </button>
        </div>
        <h2 id="legal-title" className="legal-title">{doc.title}</h2>
        <div className="legal-body">
          {doc.body.map(([h, p], i) =>
          <div key={i} className="legal-section">
              <h3>{h}</h3>
              <p>{p}</p>
            </div>
          )}
        </div>
        <div className="legal-foot">
          <span className="mono">Dernière mise à jour : avril 2026</span>
          <button onClick={onClose} className="btn btn-dark">Fermer</button>
        </div>
      </div>
    </div>);

}

// ─── App ───────────────────────────────────────────────────────────────
function App() {
  const useTweaksFn = typeof window !== 'undefined' ? window.useTweaks : null;
  const TweaksUI = typeof window !== 'undefined' ? window.TweaksPanel : null;
  const TweakSection = typeof window !== 'undefined' ? window.TweakSection : null;
  const TweakToggle = typeof window !== 'undefined' ? window.TweakToggle : null;
  const TweakRadio = typeof window !== 'undefined' ? window.TweakRadio : null;
  const TweakSelect = typeof window !== 'undefined' ? window.TweakSelect : null;
  const TweakColor = typeof window !== 'undefined' ? window.TweakColor : null;

  const [t, setTweak] = useTweaksFn ? useTweaksFn(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];
  const [legal, setLegal] = React.useState(null);

  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute('data-theme', t.dark ? 'dark' : 'light');
    root.setAttribute('data-density', t.density || 'regular');
    root.style.setProperty('--color-signal', t.accent || LIME);
  }, [t.dark, t.density, t.accent]);

  React.useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest('a[href]');
      if (!a) return;
      const href = a.getAttribute('href');
      const slug = href && href.startsWith('#') ? href.slice(1) : null;
      if (slug && LEGAL_TEXTS[slug]) {
        e.preventDefault();
        setLegal(slug);
      }
    };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Ticker />
        <RoiBar />
        <Problem />
        <RoiCalculator />
        <Services />
        <Process />
        <WhyN8n />
        <NotDo />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />
      {legal && <LegalModal slug={legal} onClose={() => setLegal(null)} />}
      {TweaksUI && TweakSection &&
      <TweaksUI title="Tweaks">
          <TweakSection label="Theme" />
          <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak('dark', v)} />
          <TweakSection label="Accent" />
          <TweakSelect label="Couleur" value={t.accent}
        options={Object.entries(ACCENT_OPTIONS).map(([k, v]) => ({ label: k, value: v }))}
        onChange={(v) => setTweak('accent', v)} />
          <TweakColor label="Custom" value={t.accent} onChange={(v) => setTweak('accent', v)} />
          <TweakSection label="Layout" />
          <TweakRadio label="Densité" value={t.density}
        options={['compact', 'regular', 'comfy']}
        onChange={(v) => setTweak('density', v)} />
        </TweaksUI>
      }
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);