// InstantDevis — Landing page phone mockup + nav

const C = window.IDLanding_C;
const I = window.IDLanding_I;
const Logo = window.IDLanding_Logo;

const HEADLINES = {
  soirees:  { title: 'Vos devis en 2 minutes.', emph: 'Vos soirees pour vous.' },
  fini22h:  { title: 'Encore des devis a 22h ?', emph: 'Plus jamais.' },
  chantier: { title: 'Le devis fini', emph: 'avant la fin du chantier.' },
};

// ─── NAV ──────────────────────────────────────────────────────────────
function Nav() {
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(241,239,235,0.92)',
      backdropFilter: 'blur(10px)',
      borderBottom: '1px solid ' + C.border,
    }}>
      <div className="hazard-tape-thin" style={{ height: 4 }}/>
      <div style={{
        maxWidth: 1240, margin: '0 auto', padding: '14px 24px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <Logo size={34}/>
        <nav className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          <a href="#probleme" className="mono" style={{ fontSize: 12, fontWeight: 600, letterSpacing: 1.5, color: C.inkMuted, textTransform: 'uppercase' }}>
            Probleme
          </a>
          <a href="#solution" className="mono" style={{ fontSize: 12, fontWeight: 600, letterSpacing: 1.5, color: C.inkMuted, textTransform: 'uppercase' }}>
            Solution
          </a>
          <a href="#etapes" className="mono" style={{ fontSize: 12, fontWeight: 600, letterSpacing: 1.5, color: C.inkMuted, textTransform: 'uppercase' }}>
            Comment ca marche
          </a>
          <a href="/app" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '10px 16px', border: '1.5px solid ' + C.primary,
            color: C.primary, fontSize: 14, fontWeight: 700, borderRadius: 4,
          }}>
            Lancer InstantDevis <I.Arrow size={14}/>
          </a>
        </nav>
      </div>
    </header>
  );
}

// ─── PHONE MOCKUP (the product preview) ───────────────────────────────
function PhoneMockup() {
  const [step, setStep] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setStep((s) => (s + 1) % 3), 3500);
    return () => clearInterval(t);
  }, []);

  return (
    <div style={{
      width: 300, height: 620, borderRadius: 38,
      background: '#0D1520',
      padding: 10,
      boxShadow: '0 30px 60px -20px rgba(11,61,92,0.45), 0 0 0 2px #000, inset 0 0 0 2px rgba(255,255,255,0.08)',
      position: 'relative',
      animation: 'phone-float 6s ease-in-out infinite',
    }}>
      {/* Notch */}
      <div style={{
        position: 'absolute', top: 18, left: '50%', transform: 'translateX(-50%)',
        width: 110, height: 26, background: '#000', borderRadius: 14, zIndex: 5,
      }}/>
      {/* Screen */}
      <div style={{
        width: '100%', height: '100%', borderRadius: 30, overflow: 'hidden',
        background: C.bg, position: 'relative',
        display: 'flex', flexDirection: 'column',
      }}>
        {/* Status bar */}
        <div className="mono" style={{
          height: 38, padding: '10px 22px 4px', display: 'flex',
          justifyContent: 'space-between', alignItems: 'center',
          fontSize: 12, fontWeight: 700, color: C.ink,
        }}>
          <span>20:47</span>
          <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
            <span style={{ display: 'inline-block', width: 14, height: 8, border: '1.5px solid ' + C.ink, borderRadius: 2, position: 'relative' }}>
              <span style={{ position: 'absolute', inset: 1, background: C.ink, width: '70%', borderRadius: 1 }}/>
            </span>
          </span>
        </div>

        {/* Header */}
        <div style={{ padding: '8px 16px 10px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 24, height: 24, borderRadius: 4, background: C.primary, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                <path d="M14 2 L8 13 L12 13 L10 22 L17 10 L13 10 L14 2 Z" fill={C.safety}/>
              </svg>
            </div>
            <div style={{ fontSize: 14, fontWeight: 800, letterSpacing: -0.3 }}>
              <span>Instant</span><span style={{ color: C.primary }}>Devis</span>
            </div>
          </div>
          <div style={{ width: 28, height: 28, borderRadius: '50%', background: C.bgSunken, display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.inkMuted, fontSize: 11, fontWeight: 700 }}>JD</div>
        </div>

        {/* Body — three rotating screens */}
        <div style={{ flex: 1, padding: '4px 14px 14px', display: 'flex', flexDirection: 'column', gap: 10, overflow: 'hidden', position: 'relative' }}>
          {step === 0 && <ScreenCreate/>}
          {step === 1 && <ScreenSign/>}
          {step === 2 && <ScreenList/>}
        </div>

        {/* Bottom nav */}
        <div style={{
          height: 56, borderTop: '1px solid ' + C.border, background: '#fff',
          display: 'flex', alignItems: 'center',
        }}>
          {['Accueil', 'Devis', 'Clients'].map((l, i) => {
            const active = (i === 0 && step !== 1) || (i === 1 && step === 1);
            return (
              <div key={l} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, position: 'relative' }}>
                {active && <div style={{ position: 'absolute', top: 0, left: '30%', right: '30%', height: 3, background: C.safety, borderRadius: '0 0 3px 3px' }}/>}
                <div style={{ width: 18, height: 18, borderRadius: 4, background: active ? C.primary : C.inkDim, opacity: active ? 1 : 0.4 }}/>
                <span className="mono" style={{ fontSize: 9, fontWeight: 700, color: active ? C.primary : C.inkDim, letterSpacing: 0.8 }}>{l.toUpperCase()}</span>
              </div>
            );
          })}
        </div>
        {/* Home indicator */}
        <div style={{ height: 16, display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#fff' }}>
          <div style={{ width: 110, height: 4, borderRadius: 2, background: C.ink }}/>
        </div>
      </div>
    </div>
  );
}

function ScreenCreate() {
  return (
    <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
      <div className="mono" style={{ fontSize: 9, fontWeight: 700, color: C.inkDim, letterSpacing: 1.5 }}>
        NOUVEAU DEVIS · Q-2026-047
      </div>
      <div style={{ background: '#fff', border: '1px solid ' + C.border, borderRadius: 8, padding: 10 }}>
        <div style={{ fontSize: 10, color: C.inkMuted, marginBottom: 4 }}>Client</div>
        <div style={{ fontSize: 13, fontWeight: 700 }}>Mme Dubois</div>
        <div style={{ fontSize: 11, color: C.inkMuted, marginTop: 2 }}>14 rue des Tilleuls, Lyon 7e</div>
      </div>
      <div style={{ background: '#fff', border: '1px solid ' + C.border, borderRadius: 8, padding: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[
          { l: 'Remplacement chaudiere 24kW', q: '1', p: '2 450' },
          { l: 'Pose vanne thermostatique', q: '4', p: '320' },
          { l: "Main d'oeuvre — 1 jour", q: '8h', p: '480' },
        ].map((it, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 600, lineHeight: 1.3 }}>{it.l}</div>
              <div className="mono" style={{ fontSize: 9, color: C.inkDim, marginTop: 2 }}>QTE {it.q}</div>
            </div>
            <div className="mono" style={{ fontSize: 12, fontWeight: 700, color: C.ink, fontVariantNumeric: 'tabular-nums' }}>{it.p} EUR</div>
          </div>
        ))}
      </div>
      <div style={{ background: C.primary, color: '#fff', borderRadius: 8, padding: '10px 12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 9, opacity: 0.7, letterSpacing: 1 }} className="mono">TOTAL TTC</div>
          <div className="mono" style={{ fontSize: 20, fontWeight: 800, letterSpacing: -0.5 }}>3 906 EUR</div>
        </div>
        <div style={{
          background: C.safety, color: '#0D1520',
          padding: '10px 14px', borderRadius: 6, fontSize: 12, fontWeight: 800,
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          ENVOYER <I.Arrow size={12}/>
        </div>
      </div>
    </div>
  );
}

function ScreenSign() {
  return (
    <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 10, height: '100%' }}>
      <div className="mono" style={{ fontSize: 9, fontWeight: 700, color: C.inkDim, letterSpacing: 1.5 }}>
        SIGNATURE CLIENT · Q-2026-047
      </div>
      <div style={{
        background: '#fff', border: '1px solid ' + C.border, borderRadius: 8, padding: 12,
        display: 'flex', flexDirection: 'column', gap: 8,
      }}>
        <div style={{ fontSize: 12, color: C.inkMuted }}>Mme Dubois signe sur son telephone</div>
        <div style={{
          height: 110, borderRadius: 6, border: '1px dashed ' + C.borderStrong,
          background: 'repeating-linear-gradient(135deg, ' + C.bgSunken + ' 0, ' + C.bgSunken + ' 8px, ' + C.bg + ' 8px, ' + C.bg + ' 16px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          position: 'relative', overflow: 'hidden',
        }}>
          <svg viewBox="0 0 200 80" style={{ width: '85%', height: '70%' }}>
            <path d="M10 50 Q30 20 50 45 T90 50 Q110 30 130 55 T180 45"
                  stroke={C.primary} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          </svg>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: C.success, fontSize: 12, fontWeight: 700 }}>
          <I.Check size={14}/> Acceptation enregistree
        </div>
        <div className="mono" style={{ fontSize: 9, color: C.inkDim, letterSpacing: 0.5, lineHeight: 1.5 }}>
          HORODATAGE · 25/04/2026 · 14:32:08<br/>
          REF · sha256:9f4a...b2c1
        </div>
      </div>
      <div style={{
        background: C.bgSunken, border: '1px solid ' + C.border, borderRadius: 8, padding: 10,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <I.Lock size={18}/>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700 }}>Devis verrouille</div>
          <div style={{ fontSize: 10, color: C.inkMuted }}>Preuve d'acceptation conservee</div>
        </div>
      </div>
    </div>
  );
}

function ScreenList() {
  const items = [
    { c: 'M. Lefevre', a: '1 240 EUR', s: 'signe', d: 'Hier' },
    { c: 'Boulangerie Pain & Co', a: '4 850 EUR', s: 'envoye', d: 'Mar.' },
    { c: 'Mme Dubois', a: '3 906 EUR', s: 'signe', d: 'Lun.' },
    { c: 'M. Karim', a: '780 EUR', s: 'brouillon', d: '23/04' },
  ];
  const colors = { signe: C.success, envoye: C.primary, brouillon: C.inkMuted };
  return (
    <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
      <div className="mono" style={{ fontSize: 9, fontWeight: 700, color: C.inkDim, letterSpacing: 1.5 }}>
        VOS DEVIS · 12 CE MOIS-CI
      </div>
      <div style={{ background: '#fff', borderRadius: 8, border: '1px solid ' + C.border, overflow: 'hidden' }}>
        {items.map((it, i) => (
          <div key={i} style={{
            padding: '10px 12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            borderBottom: i < items.length - 1 ? '1px solid ' + C.border : 'none',
          }}>
            <div>
              <div style={{ fontSize: 12, fontWeight: 700 }}>{it.c}</div>
              <div className="mono" style={{ fontSize: 9, color: C.inkDim, letterSpacing: 0.5, marginTop: 2 }}>{it.d}</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div className="mono" style={{ fontSize: 11, fontWeight: 700 }}>{it.a}</div>
              <span style={{
                fontSize: 8, fontWeight: 800, padding: '2px 6px', borderRadius: 2,
                background: (colors[it.s] || C.inkMuted) + '22',
                color: colors[it.s] || C.inkMuted,
                letterSpacing: 1,
                textTransform: 'uppercase',
              }}>{it.s}</span>
            </div>
          </div>
        ))}
      </div>
      <div style={{
        background: C.safety + '15', border: '1px solid ' + C.safety + '55', borderRadius: 8,
        padding: 10, display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <I.Trend size={16}/>
        <div style={{ fontSize: 11, fontWeight: 600 }}>
          <span style={{ color: C.ink }}>+38%</span>
          <span style={{ color: C.inkMuted }}> vs mois dernier</span>
        </div>
      </div>
    </div>
  );
}

window.IDLanding_Nav = Nav;
window.IDLanding_PhoneMockup = PhoneMockup;
window.IDLanding_HEADLINES = HEADLINES;