// Pricing — live calculator with volume-based dégressif tiers
const { useState: useStateP, useMemo: useMemoP } = React;

const priceStyles = {
  wrap: { padding: '140px 0', borderBottom: '1px solid var(--line)', background: 'linear-gradient(180deg, transparent, rgba(var(--accent-rgb),.025), transparent)' },
  head: { marginBottom: 60, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 40 },
  title: {
    fontFamily: "'Instrument Serif', serif",
    fontSize: 72, lineHeight: 0.95, letterSpacing: '-0.02em',
    margin: 0,
  },
  kicker: { maxWidth: 320, fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.5 },

  card: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    border: '1px solid var(--line-2)',
    borderRadius: 'var(--radius)',
    background: 'var(--panel)',
    overflow: 'hidden',
  },

  left: { padding: 40, borderRight: '1px solid var(--line)' },
  sectorRow: { display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 28 },
  sectorChip: {
    padding: '8px 14px', borderRadius: 999,
    border: '1px solid var(--line-2)', background: 'transparent',
    fontSize: 13, color: 'var(--ink-2)', cursor: 'pointer',
    transition: 'all .15s',
  },
  sectorChipActive: {
    background: 'var(--accent)', color: 'var(--accent-fg)', borderColor: 'var(--accent)',
  },
  sliderLabel: { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 10 },
  sliderValue: {
    fontFamily: "'Instrument Serif', serif", fontSize: 56,
    letterSpacing: '-0.02em', lineHeight: 1,
  },
  slider: {
    width: '100%', accentColor: 'var(--accent)',
    marginTop: 18, marginBottom: 8,
  },
  tierBar: {
    display: 'flex', justifyContent: 'space-between',
    fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
    color: 'var(--ink-3)', letterSpacing: '.1em',
  },

  right: { padding: 40, display: 'flex', flexDirection: 'column', gap: 20 },
  bigPrice: {
    fontFamily: "'Instrument Serif', serif",
    fontSize: 88, lineHeight: .95, letterSpacing: '-0.03em',
    display: 'flex', alignItems: 'baseline', gap: 6,
  },
  perlead: { fontFamily: "'JetBrains Mono', monospace", fontSize: 14, color: 'var(--ink-3)' },
  lineRow: {
    display: 'flex', justifyContent: 'space-between',
    padding: '14px 0', borderTop: '1px solid var(--line)',
    fontSize: 14,
  },
  total: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
    padding: '20px 0 4px', borderTop: '1px solid var(--line-2)',
  },
  totalLabel: { fontSize: 14, color: 'var(--ink-2)' },
  totalValue: {
    fontFamily: "'Instrument Serif', serif", fontSize: 44,
    color: 'var(--accent)', letterSpacing: '-0.02em',
  },
  savings: {
    marginTop: 8,
    padding: '12px 14px', borderRadius: 10,
    background: 'rgba(var(--accent-rgb),.08)',
    border: '1px solid rgba(var(--accent-rgb),.2)',
    fontSize: 13, color: 'var(--accent)',
    fontFamily: "'JetBrains Mono', monospace",
  },
  note: { fontSize: 12, color: 'var(--ink-3)', marginTop: 8, lineHeight: 1.5 },
};

const PRICE_SECTORS = [
  { id: 'btp',   t: 'BTP',       base: 26 },
  { id: 'immo',  t: 'Immobilier',base: 32 },
  { id: 'ass',   t: 'Assurance', base: 38 },
  { id: 'sante', t: 'Santé',     base: 54 },
  { id: 'edu',   t: 'Éducation', base: 14 },
  { id: 'nrj',   t: 'Énergie',   base: 31 },
];

function tierDiscount(vol) {
  if (vol < 50)   return 0;
  if (vol < 500)  return 0.08;
  if (vol < 1500)  return 0.15;
  if (vol < 4000)  return 0.22;
  return 0.30;
}
function tierLabel(vol) {
  if (vol < 50)   return 'Starter';
  if (vol < 500)  return 'Tier 1';
  if (vol < 1500)  return 'Tier 2';
  if (vol < 4000)  return 'Tier 3';
  return 'Enterprise';
}

function Pricing() {
  const [sector, setSector] = useStateP('btp');
  const [vol, setVol] = useStateP(120);

  const { base, disc, unit, total } = useMemoP(() => {
    const s = PRICE_SECTORS.find((x) => x.id === sector);
    const base = s.base;
    const disc = tierDiscount(vol);
    const unit = base * (1 - disc);
    const total = unit * vol;
    return { base, disc, unit, total };
  }, [sector, vol]);

  return (
    <section id="tarifs" style={priceStyles.wrap} className="section-pad">
      <div className="wrap">
        <div style={priceStyles.head}>
          <div>
            <div className="eyebrow" style={{marginBottom: 20}}>Tarif PPL</div>
            <h2 style={priceStyles.title} className="h-display-2">
              Simulez votre <span className="serif italic" style={{color:'var(--accent)'}}>volume</span>.
            </h2>
          </div>
          <p style={priceStyles.kicker}>
            Modèle dégressif transparent. Plus vous commandez, moins le lead coûte. Pas de minimum contraignant, pas d'engagement.
          </p>
        </div>

        <div style={priceStyles.card} className="pricing-card">
          <div style={priceStyles.left} className="pricing-left">
            <div style={priceStyles.sliderLabel}>Secteur</div>
            <div style={priceStyles.sectorRow}>
              {PRICE_SECTORS.map((s) => (
                <button
                  key={s.id}
                  onClick={() => setSector(s.id)}
                  style={{...priceStyles.sectorChip, ...(sector === s.id ? priceStyles.sectorChipActive : {})}}>
                  {s.t}
                </button>
              ))}
            </div>

            <div style={priceStyles.sliderLabel}>Volume mensuel</div>
            <div style={priceStyles.sliderValue} className="pricing-slider-value">
              {formatNumberFR(vol)} <span style={{fontFamily:"'JetBrains Mono', monospace", fontSize: 15, color:'var(--ink-3)'}}>leads/mois</span>
            </div>
            <input
              type="range" min="100" max="6000" step="100"
              value={vol} onChange={(e) => setVol(+e.target.value)}
              style={priceStyles.slider}
            />
            <div style={priceStyles.tierBar} className="pricing-tier-bar">
              <span>100</span><span>1000</span><span>2000</span><span>3000</span><span>4000</span><span>5000</span><span>6000</span>
            </div>

            <div style={{marginTop: 32, padding: '16px 18px', borderRadius: 10, background: 'var(--bg)', border: '1px solid var(--line)'}}>
              <div style={{display:'flex', justifyContent:'space-between', fontFamily:"'JetBrains Mono', monospace", fontSize: 12}}>
                <span style={{color:'var(--ink-3)', letterSpacing:'.14em'}}>PALIER ACTUEL</span>
                <span style={{color:'var(--accent)'}}>{tierLabel(vol)}</span>
              </div>
              <div style={{marginTop: 8, fontSize: 13, color: 'var(--ink-2)'}}>
                Remise volume&nbsp;: <span style={{color:'var(--ink)'}}>{(disc*100).toFixed(0)}%</span> · Prochain palier à&nbsp;
                <span style={{color:'var(--ink)'}}>
                  {vol < 500 ? 500 : vol < 1500 ? 1500 : vol < 4000 ? 4000 : 'max'}
                </span> leads
              </div>
            </div>
          </div>

          <div style={priceStyles.right} className="pricing-right">
            <div>
              <div style={priceStyles.perlead}>PRIX / LEAD</div>
              <div style={priceStyles.bigPrice} className="pricing-big-price">
                <span>{unit.toFixed(0)}</span>
                <span className="mono" style={{fontSize: 22, color:'var(--accent)'}}>€</span>
                {disc > 0 && <span className="mono" style={{fontSize:13, color:'var(--ink-3)', textDecoration:'line-through', marginLeft: 10}}>{base} €</span>}
              </div>
            </div>

            <div>
              <div style={priceStyles.lineRow}>
                <span style={{color:'var(--ink-2)'}}>Prix de base (secteur)</span>
                <span className="mono">{base} €</span>
              </div>
              <div style={priceStyles.lineRow}>
                <span style={{color:'var(--ink-2)'}}>Remise volume</span>
                <span className="mono" style={{color: disc > 0 ? 'var(--accent)':'var(--ink)'}}>−{(disc*100).toFixed(0)}%</span>
              </div>
              <div style={priceStyles.lineRow}>
                <span style={{color:'var(--ink-2)'}}>Volume mensuel</span>
                <span className="mono">× {formatNumberFR(vol)}</span>
              </div>

              <div style={priceStyles.total}>
                <span style={priceStyles.totalLabel}>Budget mensuel estimé</span>
                <span style={priceStyles.totalValue}>{formatNumberFR(Math.round(total))} €</span>
              </div>
              {disc > 0 && (
                <div style={priceStyles.savings}>
                  ✓ Vous économisez {formatNumberFR(Math.round(base * vol - total))} € /mois vs tarif starter
                </div>
              )}
              <div style={priceStyles.note}>
                Estimation HT, ajustable selon zone de chalandise et qualification. Pas d'engagement de durée — vous pouvez arrêter, baisser ou monter le volume chaque mois.
              </div>
            </div>

            <a href="#contact" className="btn btn-primary" style={{alignSelf:'flex-start', marginTop: 8}}>
              Valider cette simulation
              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pricing });