const Features = () => {
  const fx = L('features');
  const icons = ['ai','chat','bolt','shield','users','trend'];
  const features = fx.items.map((it, i) => ({ ...it, icon: icons[i] }));

  return (
    <section id="features" className="section-pad" style={{ background:'linear-gradient(180deg, transparent, rgba(0,228,122,0.025), transparent)' }}>
      <div className="container">
        <div className="reveal" style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', flexWrap:'wrap', gap:24, marginBottom:64 }}>
          <div style={{ maxWidth:620 }}>
            <div className="eyebrow" style={{ marginBottom:14 }}>{fx.eyebrow}</div>
            <h2 className="display" style={{ fontSize:'clamp(38px, 5vw, 64px)', margin:0 }}>
              {fx.h2a} <span className="serif" style={{ color:'var(--green)' }}>{fx.word1}</span> {fx.h2b}<br/>
              {fx.h2c} <span className="serif" style={{ color:'var(--green)' }}>{fx.word2}</span> {fx.h2d}
            </h2>
          </div>
          <p style={{ maxWidth:380, color:'var(--ink-2)', fontSize:16, lineHeight:1.6 }}>
            {fx.sub}
          </p>
        </div>

        <div style={{
          display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20
        }} className="feat-grid">
          {features.map((f, i) => (
            <div key={i} className="card reveal" style={{
              transitionDelay: `${i * 70}ms`,
              padding:'28px 28px 32px', minHeight:240,
              display:'flex', flexDirection:'column', gap:14, position:'relative', overflow:'hidden'
            }}>
              <div style={{
                position:'absolute', top:-40, right:-40, width:160, height:160, borderRadius:'50%',
                background:'radial-gradient(circle, rgba(0,228,122,0.06), transparent 70%)',
                pointerEvents:'none'
              }}/>
              <div style={{
                width:42, height:42, borderRadius:11,
                background:'var(--green-soft)', color:'var(--green)',
                display:'grid', placeItems:'center',
                boxShadow:'inset 0 0 0 1px rgba(0,228,122,0.2)'
              }}>
                <Icon name={f.icon} size={20}/>
              </div>
              <h3 style={{ margin:'8px 0 0', fontSize:19, fontWeight:600, letterSpacing:'-0.01em' }}>
                {f.title}
              </h3>
              <p style={{ margin:0, color:'var(--ink-2)', fontSize:14.5, lineHeight:1.55, flex:1 }}>
                {f.desc}
              </p>
              <div className="tag" style={{ alignSelf:'flex-start' }}>
                <span style={{ color:'var(--green)' }}>●</span> {f.tag}
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1000px) { .feat-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 640px)  { .feat-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

window.Features = Features;