const Pricing = () => {
  const pc = L('pricing');
  const [annual, setAnnual] = React.useState(true);
  const mult = annual ? 0.8 : 1;

  const meta = [
    { price:0,   highlight:false },
    { price:297, highlight:false },
    { price:497, highlight:true, mostPopular:true },
    { price:997, highlight:false },
  ];
  const plans = pc.plans.map((p, i) => ({ ...p, ...meta[i] }));

  return (
    <section id="pricing" className="section-pad" style={{ position:'relative' }}>
      <div className="container">
        <div className="reveal" style={{ textAlign:'center', marginBottom:48, maxWidth:740, margin:'0 auto 48px' }}>
          <div className="eyebrow" style={{ marginBottom:14 }}>{pc.eyebrow}</div>
          <h2 className="display" style={{ fontSize:'clamp(38px, 5vw, 64px)', margin:0 }}>
            {pc.h2a}<br/>
            <span className="serif" style={{ color:'var(--green)' }}>{pc.h2b}</span>
          </h2>
          <p style={{ fontSize:16, color:'var(--ink-2)', marginTop:18 }}>
            {pc.sub}
          </p>

          {/* toggle */}
          <div style={{ display:'inline-flex', marginTop:30, padding:5, borderRadius:999, border:'1px solid var(--line)', background:'rgba(255,255,255,0.02)' }}>
            {[[pc.monthly, false],[pc.annual, true]].map(([label, val]) => (
              <button key={label} onClick={() => setAnnual(val)} style={{
                padding:'10px 22px', borderRadius:999, fontSize:13.5,
                background: annual === val ? 'var(--green)' : 'transparent',
                color: annual === val ? '#001509' : 'var(--ink-2)',
                fontWeight: annual === val ? 600 : 400,
                display:'flex', alignItems:'center', gap:8, transition:'all .2s'
              }}>
                {label}
                {val && <span style={{
                  fontSize:11, padding:'2px 7px', borderRadius:6,
                  background: annual === val ? 'rgba(0,21,9,0.18)' : 'rgba(0,228,122,0.15)',
                  color: annual === val ? '#001509' : 'var(--green)',
                  fontWeight:600
                }}>-20%</span>}
              </button>
            ))}
          </div>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16 }} className="price-grid">
          {plans.map((p, i) => (
            <div key={i} className="reveal" style={{
              transitionDelay: `${i * 80}ms`,
              position:'relative',
              borderRadius:20,
              padding:'30px 26px 32px',
              background: p.highlight
                ? 'linear-gradient(180deg, rgba(0,228,122,0.1), rgba(0,228,122,0.02))'
                : 'linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005))',
              border:'1px solid '+ (p.highlight ? 'rgba(0,228,122,0.4)' : 'var(--line)'),
              boxShadow: p.highlight ? '0 30px 80px -20px rgba(0,228,122,0.3)' : 'none',
              display:'flex', flexDirection:'column'
            }}>
              {p.mostPopular && (
                <div style={{
                  position:'absolute', top:-12, left:'50%', transform:'translateX(-50%)',
                  padding:'5px 12px', borderRadius:999,
                  background:'var(--green)', color:'#001509', fontSize:11.5, fontWeight:600,
                  letterSpacing:'0.05em', textTransform:'uppercase'
                }}>
                  {pc.mostPopular}
                </div>
              )}
              <div style={{ fontSize:14, color:p.highlight ? 'var(--green)' : 'var(--ink-3)', fontFamily:"'Geist Mono',monospace", letterSpacing:'0.05em' }}>
                {p.name.toUpperCase()}
              </div>
              <div style={{ fontSize:13, color:'var(--ink-3)', marginTop:4 }}>{p.sub}</div>

              <div style={{ marginTop:22, display:'flex', alignItems:'baseline', gap:6 }}>
                <span style={{ fontSize:18, color:'var(--ink-3)' }}>R$</span>
                <span style={{
                  fontFamily:"'Bricolage Grotesque',sans-serif", fontWeight:700,
                  fontSize:54, letterSpacing:'-0.04em', lineHeight:1
                }}>
                  {Math.round(p.price * mult).toLocaleString('pt-BR')}
                </span>
                <span style={{ fontSize:13, color:'var(--ink-3)' }}>{pc.perMonth}</span>
              </div>
              {annual && p.price > 0 && (
                <div style={{ fontSize:11.5, color:'var(--green)', marginTop:6, fontFamily:"'Geist Mono',monospace" }}>
                  {pc.save} R$ {Math.round(p.price * 0.2 * 12).toLocaleString('pt-BR')}{pc.savePerYear}
                </div>
              )}

              <div style={{
                display:'flex', flexDirection:'column', gap:6, marginTop:22, padding:'14px 14px',
                borderRadius:11, background:'rgba(255,255,255,0.025)', border:'1px solid var(--line)'
              }}>
                {p.stats.map((s, j) => (
                  <div key={j} style={{ fontSize:12.5, color:'var(--ink-2)', display:'flex', alignItems:'center', gap:8 }}>
                    <span style={{ width:4, height:4, borderRadius:'50%', background:'var(--green)' }}/>
                    {s}
                  </div>
                ))}
              </div>

              <a
                href={p.name === 'Pro' ? 'https://wa.me/5548996485048?text=Quero%20o%20plano%20Pro%20da%20ZapFlux' : `/signup?plan=${p.name.toLowerCase()}`}
                target={p.name === 'Pro' ? '_blank' : undefined}
                rel={p.name === 'Pro' ? 'noopener' : undefined}
                className={p.highlight ? 'btn btn-primary' : 'btn btn-ghost'}
                style={{ marginTop:18, width:'100%', justifyContent:'center', height:48, fontSize:14, textDecoration:'none' }}
              >
                {p.cta} <Icon name="arrow" size={14}/>
              </a>

              <ul style={{ listStyle:'none', padding:0, margin:'24px 0 0', display:'flex', flexDirection:'column', gap:10 }}>
                {p.features.map((f, j) => (
                  <li key={j} style={{ display:'flex', gap:10, fontSize:13.5, color:'var(--ink-2)' }}>
                    <span style={{ color: p.highlight ? 'var(--green)' : 'var(--ink-3)', marginTop:2 }}>
                      <Icon name="check" size={13}/>
                    </span>
                    {f}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          marginTop:24, padding:'18px 24px', borderRadius:14,
          border:'1px dashed var(--line)', display:'flex', alignItems:'center', gap:16, flexWrap:'wrap',
          background:'rgba(255,255,255,0.02)'
        }}>
          <div style={{
            width:36, height:36, borderRadius:10, background:'var(--green-soft)', color:'var(--green)',
            display:'grid', placeItems:'center', flexShrink:0
          }}>
            <Icon name="shield" size={16}/>
          </div>
          <div style={{ flex:1, fontSize:13.5, color:'var(--ink-2)' }}>
            {parseInline(pc.guarantee).map((seg, i) => {
              if (typeof seg === 'string' && seg.startsWith('|') && seg.endsWith('|')) {
                return <strong key={i} style={{ color:'var(--ink)' }}>{seg.slice(1,-1)}</strong>;
              }
              return <span key={i}>{seg}</span>;
            })}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px) { .price-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 620px)  { .price-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

window.Pricing = Pricing;