// InstantDevis — Landing page sections (Hero, Problem, Solution, Steps, Benefits, CTA, Footer)

const C = window.IDLanding_C;
const I = window.IDLanding_I;
const TactileButton = window.IDLanding_TactileButton;
const StencilNumber = window.IDLanding_StencilNumber;
const TRADES = window.IDLanding_TRADES;
const HEADLINES = window.IDLanding_HEADLINES;
const PhoneMockup = window.IDLanding_PhoneMockup;
const Nav = window.IDLanding_Nav;
const Logo = window.IDLanding_Logo;

// ─── helpers ───────────────────────────────────────────────────────────
function goApp() {
  window.location.href = '/app';
}

function scrollToEtapes(e) {
  e.preventDefault();
  var el = document.getElementById('etapes');
  if (el) el.scrollIntoView({ behavior: 'smooth' });
}

// ─── HERO ──────────────────────────────────────────────────────────────
function Hero({ tweaks }) {
  var hl = HEADLINES[tweaks.headlineVariant] || HEADLINES.soirees;
  var dark = tweaks.darkHero;

  return (
    <section style={{
      position: 'relative',
      background: dark ? '#0D1520' : C.bg,
      color: dark ? '#F3F5F7' : C.ink,
      overflow: 'hidden',
    }}>
      {/* Subtle hachure background */}
      <div className={dark ? '' : 'hachure'} style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}/>
      {/* Decorative orange corner mark */}
      <div style={{
        position: 'absolute', top: 0, right: 0, width: 220, height: 220,
        background: 'radial-gradient(circle at top right, ' + C.safety + '22, transparent 60%)',
        pointerEvents: 'none',
      }}/>

      <div style={{
        maxWidth: 1240, margin: '0 auto', padding: '60px 24px 80px',
        display: 'grid', gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 0.9fr)', gap: 48,
        alignItems: 'center', position: 'relative',
      }} className="hero-grid">
        {/* Left: copy */}
        <div>
          {/* Eyebrow tag */}
          <div className="reveal" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 28 }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '6px 10px',
              background: dark ? 'rgba(255,107,0,0.15)' : C.safety + '18',
              border: '1.5px solid ' + C.safety + '66',
              borderRadius: 4,
            }}>
              <span className="pulse-dot" style={{ width: 7, height: 7, borderRadius: 1, background: C.safety }}/>
              <span className="mono" style={{ fontSize: 11, fontWeight: 700, color: C.safety, letterSpacing: 1.5, textTransform: 'uppercase' }}>
                Pour artisans · Mobile-first
              </span>
            </span>
          </div>

          <h1 className="reveal" style={{
            fontSize: 'clamp(40px, 6vw, 76px)', fontWeight: 800, lineHeight: 0.98,
            letterSpacing: -1.8, margin: '0 0 16px', textWrap: 'balance',
          }}>
            <span style={{ display: 'block' }}>{hl.title}</span>
            <span style={{ display: 'block', color: C.safety, fontStyle: 'italic', fontWeight: 800 }}>
              {hl.emph}
            </span>
          </h1>

          <p className="reveal" style={{
            fontSize: 19, lineHeight: 1.5, color: dark ? '#9CA8B5' : C.inkMuted,
            maxWidth: 540, margin: '0 0 16px',
          }}>
            InstantDevis aide les artisans a{' '}
            <strong style={{ color: dark ? '#F3F5F7' : C.ink, fontWeight: 700 }}>creer</strong>,{' '}
            <strong style={{ color: dark ? '#F3F5F7' : C.ink, fontWeight: 700 }}>envoyer</strong>{' '}
            et{' '}
            <strong style={{ color: dark ? '#F3F5F7' : C.ink, fontWeight: 700 }}>faire signer</strong>{' '}
            leurs devis depuis leur telephone.
          </p>

          {/* Emotional line */}
          <div className="reveal" style={{
            position: 'relative',
            padding: '14px 16px 14px 22px',
            margin: '24px 0 32px',
            background: dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF',
            border: '1px solid ' + (dark ? 'rgba(255,255,255,0.1)' : C.border),
            borderLeft: '4px solid ' + C.safety,
            borderRadius: 4,
            maxWidth: 540,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ flexShrink: 0, color: C.safety }}><I.Family size={22}/></div>
              <p style={{ margin: 0, fontSize: 16, lineHeight: 1.45, fontWeight: 500 }}>
                Le soir, passez du temps avec votre famille.<br/>
                <span style={{ color: dark ? '#9CA8B5' : C.inkMuted }}>Fini les heures tardives sur les devis.</span>
              </p>
            </div>
          </div>

          {/* CTAs */}
          <div className="reveal" style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginBottom: 32 }}>
            <TactileButton
              variant="safety"
              size="xl"
              icon={<I.Bolt size={20}/>}
              onClick={goApp}
            >
              Creer mon premier devis
            </TactileButton>
            <TactileButton
              variant={dark ? 'dark' : 'ghost'}
              size="xl"
              icon={<I.Play size={16}/>}
              onClick={scrollToEtapes}
            >
              Voir comment ca marche
            </TactileButton>
          </div>

          {/* Trust row */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
            {[
              { icon: <I.Clock size={16}/>, t: 'Devis en 2 min' },
              { icon: <I.Phone size={16}/>, t: 'Depuis le telephone' },
              { icon: <I.Lock size={16}/>, t: 'Devis verrouille + horodatage' },
            ].map((it, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, color: dark ? '#9CA8B5' : C.inkMuted }}>
                <span style={{ color: C.primary }}>{it.icon}</span>
                <span style={{ fontSize: 13, fontWeight: 600 }}>{it.t}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Right: phone */}
        <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
          {/* Stencil grid behind phone */}
          <div style={{
            position: 'absolute', inset: -40,
            backgroundImage: 'linear-gradient(' + C.border + ' 1px, transparent 1px), linear-gradient(90deg, ' + C.border + ' 1px, transparent 1px)',
            backgroundSize: '32px 32px',
            opacity: dark ? 0.15 : 0.6,
            mask: 'radial-gradient(circle at center, #000 30%, transparent 75%)',
            WebkitMask: 'radial-gradient(circle at center, #000 30%, transparent 75%)',
          }}/>
          <PhoneMockup/>
          {/* Floating badge */}
          <div style={{
            position: 'absolute', bottom: 30, left: -20,
            background: '#fff', border: '1.5px solid ' + C.border,
            borderRadius: 8, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10,
            boxShadow: '0 8px 24px rgba(11,61,92,0.15)',
            transform: 'rotate(-3deg)',
          }}>
            <div style={{ width: 30, height: 30, borderRadius: '50%', background: C.success + '22', display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.success }}>
              <I.Check size={16}/>
            </div>
            <div>
              <div className="mono" style={{ fontSize: 9, color: C.inkDim, letterSpacing: 1 }}>SIGNE · 14:32</div>
              <div style={{ fontSize: 12, fontWeight: 700, color: C.ink }}>Mme Dubois · 3 906 EUR</div>
            </div>
          </div>
        </div>
      </div>

      {/* Hazard tape band at bottom of hero */}
      <div className="hazard-tape" style={{ height: 10 }}/>
    </section>
  );
}

// ─── TRADES TICKER ─────────────────────────────────────────────────────
function TradesStrip({ tweaks }) {
  if (!tweaks.showTicker) return null;
  var items = TRADES.concat(TRADES).concat(TRADES);
  return (
    <section style={{
      background: C.ink, color: '#fff', overflow: 'hidden',
      borderTop: '1px solid #000', borderBottom: '1px solid #000',
    }}>
      <div style={{ padding: '18px 0', display: 'flex' }}>
        <div className="ticker-track" style={{ display: 'flex', gap: 48, paddingRight: 48, whiteSpace: 'nowrap' }}>
          {items.map((trade, i) => (
            <div key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 12, fontSize: 18, fontWeight: 700, letterSpacing: -0.3 }}>
              <span style={{ color: C.safety }}><trade.Icon/></span>
              <span>{trade.label}</span>
              <span style={{ color: C.safety, marginLeft: 24 }}>+</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── PROBLEM ───────────────────────────────────────────────────────────
function Problem() {
  return (
    <section id="probleme" style={{
      background: C.bgSunken, padding: '90px 24px',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: -100, right: -100, width: 400, height: 400,
        background: C.safety + '08', borderRadius: '50%', pointerEvents: 'none',
      }}/>
      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
        <div style={{ marginBottom: 24 }}>
          <StencilNumber n={1} label="Le probleme" color={C.safety}/>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 0.8fr)', gap: 60, alignItems: 'flex-start' }} className="problem-grid">
          <div>
            <h2 style={{
              fontSize: 'clamp(36px, 5vw, 60px)', fontWeight: 800, lineHeight: 1, letterSpacing: -1.4,
              margin: '0 0 28px', textWrap: 'balance',
            }}>
              Encore des devis<br/>
              a faire a{' '}
              <span style={{ position: 'relative', display: 'inline-block', padding: '0 8px' }}>
                <span style={{ position: 'relative', zIndex: 1, color: '#fff' }}>22h</span>
                <span style={{
                  position: 'absolute', inset: 0,
                  background: C.safety, transform: 'skew(-6deg)', borderRadius: 2,
                }}/>
              </span>
              {' '}?
            </h2>
            <p style={{ fontSize: 19, lineHeight: 1.55, color: C.inkMuted, maxWidth: 560, margin: 0 }}>
              Apres une journee de chantier, vous ne devriez pas passer votre soiree a refaire des devis, chercher les infos client ou relancer a la main.
            </p>
          </div>

          {/* Pain timeline */}
          <div style={{
            background: '#fff', border: '1px solid ' + C.border, borderRadius: 8,
            padding: '20px 22px', boxShadow: '0 2px 8px rgba(21,32,43,0.04)',
          }}>
            <div className="mono" style={{ fontSize: 10, fontWeight: 700, color: C.inkDim, letterSpacing: 1.5, marginBottom: 12 }}>
              UNE SOIREE TYPIQUE
            </div>
            {[
              { t: '19:30', l: 'Retour du chantier', sub: 'Creve.', flag: false },
              { t: '20:15', l: 'Repas en vitesse', sub: 'Les enfants vous attendent.', flag: false },
              { t: '21:00', l: "Ouvrir l'ordi", sub: 'Word, Excel, retrouver les prix.', flag: true },
              { t: '22:47', l: 'Devis envoye', sub: 'Vous loupez la soiree.', flag: true },
            ].map((s, i, arr) => (
              <div key={i} style={{ display: 'flex', gap: 14, paddingBottom: i < arr.length - 1 ? 14 : 0, position: 'relative' }}>
                <div style={{
                  width: 56, flexShrink: 0,
                  fontSize: 13, fontWeight: 700, color: s.flag ? C.safety : C.inkMuted,
                  fontFamily: 'JetBrains Mono, monospace',
                }}>{s.t}</div>
                <div style={{ flex: 1, paddingBottom: 4, position: 'relative' }}>
                  {i < arr.length - 1 && (
                    <span style={{ position: 'absolute', left: -10, top: 18, bottom: -12, width: 2, background: C.border }}/>
                  )}
                  <span style={{
                    position: 'absolute', left: -14, top: 4,
                    width: 10, height: 10, borderRadius: '50%',
                    background: s.flag ? C.safety : C.inkDim,
                    border: '2px solid #fff',
                  }}/>
                  <div style={{ fontSize: 14, fontWeight: 700, color: s.flag ? C.ink : C.inkMuted }}>{s.l}</div>
                  <div style={{ fontSize: 12, color: C.inkMuted, marginTop: 2 }}>{s.sub}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── SOLUTION ──────────────────────────────────────────────────────────
function Solution() {
  var cards = [
    { Icon: I.Doc, t: 'Creez un devis rapidement', d: 'Lignes pre-remplies depuis votre catalogue. Calcul TTC + acompte automatique.' },
    { Icon: I.Mail, t: 'Envoyez-le par email', d: 'PDF genere, lien securise envoye au client en un tap.' },
    { Icon: I.Pen, t: 'Faites-le signer en ligne', d: 'Le client signe sur son ecran. Vous gardez la trace.' },
    { Icon: I.Eye, t: 'Suivez vos devis envoyes', d: 'Brouillon, envoye, signe, paye. Une vue claire, pas de tableur.' },
  ];
  return (
    <section id="solution" style={{ background: C.bg, padding: '100px 24px', position: 'relative' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ marginBottom: 24 }}>
          <StencilNumber n={2} label="La solution" color={C.primary}/>
        </div>
        <h2 style={{
          fontSize: 'clamp(34px, 5vw, 56px)', fontWeight: 800, lineHeight: 1.02, letterSpacing: -1.2,
          margin: '0 0 20px', maxWidth: 800, textWrap: 'balance',
        }}>
          InstantDevis simplifie tout le parcours.
        </h2>
        <p style={{ fontSize: 18, color: C.inkMuted, maxWidth: 560, margin: '0 0 56px' }}>
          Quatre choses, faites bien. Pas de menus a tiroirs, pas de fiches a cocher.
        </p>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16,
        }}>
          {cards.map((c, i) => (
            <div key={i} style={{
              background: '#fff', border: '1.5px solid ' + C.border, borderRadius: 8,
              padding: '24px 22px',
              position: 'relative', overflow: 'hidden',
              transition: 'transform 0.2s, box-shadow 0.2s, border-color 0.2s',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 12px 24px -8px rgba(11,61,92,0.18)'; e.currentTarget.style.borderColor = C.primary + '55'; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = C.border; }}
            >
              {/* Stencil number in corner */}
              <div className="mono" style={{
                position: 'absolute', top: 14, right: 16,
                fontSize: 11, fontWeight: 700, color: C.inkDim, letterSpacing: 1,
              }}>{String(i + 1).padStart(2, '0')}</div>
              <div style={{
                width: 48, height: 48, borderRadius: 6,
                background: C.primary, color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 18,
                boxShadow: '0 2px 0 ' + C.primaryDeep,
              }}>
                <c.Icon/>
              </div>
              <h3 style={{ fontSize: 17, fontWeight: 800, lineHeight: 1.2, margin: '0 0 8px', letterSpacing: -0.3 }}>{c.t}</h3>
              <p style={{ fontSize: 14, color: C.inkMuted, lineHeight: 1.5, margin: 0 }}>{c.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── HOW IT WORKS ─────────────────────────────────────────────────────
function Steps() {
  var steps = [
    { Icon: I.Phone, t: 'Vous creez le devis', sub: 'Depuis votre telephone, sur le chantier ou dans la camionnette.' },
    { Icon: I.Mail,  t: 'Le client recoit un lien securise', sub: 'Par email, en deux clics. Pas de piece jointe a chercher.' },
    { Icon: I.Pen,   t: 'Il consulte et accepte le devis', sub: "Lecture sur telephone, signature au doigt. C'est valide." },
    { Icon: I.Lock,  t: "Vous gardez une preuve d'acceptation horodatee", sub: "Devis verrouille, horodatage, reference d'integrite." },
  ];
  return (
    <section id="etapes" style={{
      background: C.ink, color: '#F3F5F7', padding: '100px 24px',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Diagonal hachure background */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 12px)',
        pointerEvents: 'none',
      }}/>
      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
        <div style={{ marginBottom: 24 }}>
          <StencilNumber n={3} label="Comment ca marche" color={C.safety}/>
        </div>
        <h2 style={{
          fontSize: 'clamp(34px, 5vw, 56px)', fontWeight: 800, lineHeight: 1.02, letterSpacing: -1.2,
          margin: '0 0 56px', maxWidth: 760, textWrap: 'balance',
        }}>
          Quatre etapes. Du chantier a la signature.
        </h2>

        <div style={{ position: 'relative' }}>
          {/* Connecting line */}
          <div style={{
            position: 'absolute', top: 38, left: 38, right: 38, height: 2,
            background: 'repeating-linear-gradient(90deg, ' + C.safety + ' 0, ' + C.safety + ' 8px, transparent 8px, transparent 16px)',
            opacity: 0.5,
          }} className="step-line"/>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 24,
          }}>
            {steps.map((s, i) => (
              <div key={i} style={{ position: 'relative' }}>
                <div style={{
                  width: 76, height: 76, borderRadius: 8,
                  background: C.primary, color: '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 20,
                  border: '2px solid ' + C.safety,
                  position: 'relative',
                  boxShadow: '0 4px 0 #000',
                }}>
                  <s.Icon size={28}/>
                  <span className="mono" style={{
                    position: 'absolute', top: -10, right: -10,
                    width: 28, height: 28, borderRadius: '50%',
                    background: C.safety, color: '#0D1520',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 13, fontWeight: 800,
                    border: '2px solid #0D1520',
                  }}>{i + 1}</span>
                </div>
                <h3 style={{ fontSize: 17, fontWeight: 800, lineHeight: 1.25, margin: '0 0 8px', textWrap: 'balance' }}>
                  {s.t}
                </h3>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: '#9CA8B5', margin: 0 }}>{s.sub}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Hash detail strip */}
        <div style={{
          marginTop: 56, padding: '16px 20px',
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.1)',
          borderRadius: 6,
          display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
        }}>
          <I.Hash size={18}/>
          <div className="mono" style={{ fontSize: 12, color: '#9CA8B5', letterSpacing: 0.5, lineHeight: 1.6 }}>
            <span style={{ color: C.safety, fontWeight: 700 }}>REF · </span>
            sha256:9f4a3b2c1d8e...7a02
            <span style={{ color: C.safety, fontWeight: 700 }}> HORODATAGE · </span>
            25/04/2026 14:32:08 UTC+02
            <span style={{ color: C.safety, fontWeight: 700 }}> STATUT · </span>
            devis verrouille
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── BENEFITS ──────────────────────────────────────────────────────────
function Benefits() {
  var items = [
    { l: "Moins d'administratif",   sub: 'Le telephone fait le boulot.' },
    { l: 'Devis plus rapides',       sub: '2 minutes, pas 2 heures.' },
    { l: 'Signature client en ligne', sub: 'Sans imprimer, sans relancer.' },
    { l: 'Meilleur suivi',           sub: 'Brouillon, envoye, signe, paye.' },
    { l: 'Soirees liberees',         sub: 'A vous le canape.' },
  ];
  return (
    <section style={{ background: C.bg, padding: '100px 24px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ marginBottom: 24 }}>
          <StencilNumber n={4} label="Ce que vous y gagnez" color={C.primary}/>
        </div>
        <h2 style={{
          fontSize: 'clamp(34px, 5vw, 56px)', fontWeight: 800, lineHeight: 1.02, letterSpacing: -1.2,
          margin: '0 0 48px', maxWidth: 800, textWrap: 'balance',
        }}>
          Cinq benefices concrets,<br/>
          <span style={{ color: C.primary }}>tous les jours.</span>
        </h2>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 0,
          border: '1.5px solid ' + C.border, borderRadius: 8, overflow: 'hidden', background: '#fff',
        }}>
          {items.map((b, i) => (
            <div key={i} style={{
              padding: '28px 22px',
              borderRight: i < items.length - 1 ? '1.5px solid ' + C.border : 'none',
              borderBottom: '1.5px solid ' + C.border,
              position: 'relative',
              minHeight: 170,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            }} className="benefit-cell">
              <div className="mono" style={{ fontSize: 11, fontWeight: 700, color: C.safety, letterSpacing: 1.5 }}>
                +0{i + 1}
              </div>
              <div>
                <div style={{ fontSize: 18, fontWeight: 800, lineHeight: 1.15, color: C.ink, marginBottom: 6, letterSpacing: -0.3 }}>
                  {b.l}
                </div>
                <div style={{ fontSize: 13, color: C.inkMuted, lineHeight: 1.4 }}>{b.sub}</div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: C.success }}>
                <I.Check size={16}/>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── FINAL CTA ─────────────────────────────────────────────────────────
function FinalCTA() {
  return (
    <section id="cta" style={{ background: C.bgSunken, padding: '100px 24px', position: 'relative', overflow: 'hidden' }}>
      <div className="hachure-strong" style={{ position: 'absolute', inset: 0, opacity: 0.4, pointerEvents: 'none' }}/>
      <div style={{ maxWidth: 900, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
        <div style={{ display: 'inline-block', marginBottom: 28 }}>
          <StencilNumber n={5} label="On y va" color={C.safety}/>
        </div>
        <h2 style={{
          fontSize: 'clamp(40px, 6vw, 78px)', fontWeight: 800, lineHeight: 0.98, letterSpacing: -1.8,
          margin: '0 0 24px', textWrap: 'balance',
        }}>
          Fini les devis<br/>
          <span style={{
            position: 'relative', display: 'inline-block', padding: '0 12px',
            background: C.ink, color: C.safety, transform: 'skew(-4deg)',
          }}>
            <span style={{ display: 'inline-block', transform: 'skew(4deg)' }}>qui trainent.</span>
          </span>
        </h2>
        <p style={{ fontSize: 19, lineHeight: 1.5, color: C.inkMuted, maxWidth: 560, margin: '0 auto 40px' }}>
          Creez votre premier devis des maintenant et testez InstantDevis sur mobile.
        </p>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center', marginBottom: 32 }}>
          <TactileButton
            variant="safety"
            size="xl"
            icon={<I.Bolt size={22}/>}
            onClick={goApp}
          >
            Lancer InstantDevis
          </TactileButton>
        </div>

        <div className="mono" style={{ fontSize: 12, color: C.inkMuted, letterSpacing: 1, textTransform: 'uppercase' }}>
          Sans carte · Premier devis offert · Ca prend 2 minutes
        </div>
      </div>
      <div className="hazard-tape" style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 8 }}/>
    </section>
  );
}

// ─── FOOTER ────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{ background: C.ink, color: '#9CA8B5', padding: '48px 24px 32px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24, justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 32 }}>
          <div style={{ maxWidth: 360 }}>
            <div style={{ marginBottom: 14 }}>
              <Logo size={32} dark/>
            </div>
            <p style={{ fontSize: 13, lineHeight: 1.55, margin: 0 }}>
              L'outil mobile de devis pour les artisans qui preferent le chantier au paperasse.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 48, flexWrap: 'wrap' }}>
            {[
              { h: 'Produit', l: ['Fonctionnalites', 'Tarifs', 'Catalogue', 'Application mobile'] },
              { h: 'Metiers', l: ['Plomberie', 'Electricite', 'Peinture', 'Renovation'] },
              { h: 'Support', l: ['Contact', 'FAQ', 'Conditions', 'Confidentialite'] },
            ].map((col, i) => (
              <div key={i}>
                <div className="mono" style={{ fontSize: 11, fontWeight: 700, color: C.safety, letterSpacing: 1.5, marginBottom: 12, textTransform: 'uppercase' }}>{col.h}</div>
                {col.l.map((item) => (
                  <div key={item} style={{ fontSize: 13, marginBottom: 8, color: '#9CA8B5' }}>{item}</div>
                ))}
              </div>
            ))}
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 20, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: 1, color: '#6B7887' }}>
            2026 INSTANTDEVIS · MADE FOR ARTISANS
          </div>
          <div className="mono" style={{ fontSize: 11, letterSpacing: 1, color: '#6B7887' }}>
            BUILD 2026.04.26 · v0.1
          </div>
        </div>
      </div>
    </footer>
  );
}

// ─── ROOT COMPONENT ────────────────────────────────────────────────────
// TweaksPanel removed for production — fixed defaults used directly.
function LandingPage() {
  var tweaks = window.IDLanding_TWEAK_DEFAULTS || {
    accent: 'orange',
    headlineVariant: 'soirees',
    showTicker: true,
    darkHero: false,
  };
  return (
    <div data-screen-label="Landing InstantDevis">
      <Nav/>
      <Hero tweaks={tweaks}/>
      <TradesStrip tweaks={tweaks}/>
      <Problem/>
      <Solution/>
      <Steps/>
      <Benefits/>
      <FinalCTA/>
      <Footer/>
      <style>{`
        @media (max-width: 880px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .problem-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .nav-links a:not(:last-child) { display: none; }
          .step-line { display: none; }
        }
        @media (max-width: 540px) {
          .benefit-cell { border-right: none !important; }
        }
      `}</style>
    </div>
  );
}

window.LandingPage = LandingPage;