/* Features.jsx, bento grid of features */

function Features() {
  return (
    <section className="padded" id="features">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">Features</div>
          <h2>Everything a revenue team needs, <span className="serif">on autopilot</span>.</h2>
          <p>From the first inbound message to the renewal, Aspire Sage handles the busywork so your team can focus on closing.</p>
        </div>

        <div className="feat-grid">
          <div className="feat big">
            <span className="feat-tag">Lead Intelligence</span>
            <h3>AI scores every lead the moment it lands.</h3>
            <p>Aspire Sage enriches contacts with firmographic data, scans intent signals across email & web, then ranks every lead 0–100 so your reps know exactly who to call first.</p>
            <div className="feat-art art-leads">
              {[
                {nm:'Sarah Cole', co:'Vector Foundry', sc:'94', cls:'hot', av:'SC', bg:'linear-gradient(135deg, oklch(0.78 0.16 65), oklch(0.62 0.22 285))'},
                {nm:'Marco Reyes', co:'Aperion Labs', sc:'81', cls:'hot', av:'MR', bg:'linear-gradient(135deg, oklch(0.62 0.22 285), oklch(0.78 0.12 230))'},
                {nm:'Jin Patel', co:'Hexa Group', sc:'67', cls:'warm', av:'JP', bg:'linear-gradient(135deg, oklch(0.78 0.12 230), oklch(0.82 0.1 165))'},
                {nm:'Ana Tan', co:'Indra Systems', sc:'52', cls:'warm', av:'AT', bg:'linear-gradient(135deg, oklch(0.82 0.1 165), oklch(0.78 0.13 25))'},
                {nm:'Lee Khan', co:'Acme Robotics', sc:'34', cls:'cold', av:'LK', bg:'linear-gradient(135deg, oklch(0.78 0.13 25), oklch(0.78 0.16 65))'},
              ].map((l,i)=>(
                <div className="lead-row" key={i}>
                  <span className="av" style={{background:l.bg}}>{l.av}</span>
                  <div>
                    <div style={{fontWeight:600,fontSize:13}}>{l.nm}</div>
                    <div style={{fontSize:11,color:'var(--ink-4)'}}>{l.co}</div>
                  </div>
                  <span className={"score " + l.cls}>{l.sc}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="feat">
            <span className="feat-tag">WhatsApp Native</span>
            <h3>Two-way conversations, AI replies in your tone.</h3>
            <p>Connect your number and let Aspire Sage handle FAQs, qualifying, and scheduling in under 60 seconds, round the clock.</p>
            <div className="feat-art art-chat">
              <div className="bubble them">Hi! Saw your post. Do you support EU data residency?</div>
              <div className="bubble ai">Yes, Frankfurt + Dublin regions, GDPR-DPA included. Want me to book a 15-min call with our SC team?</div>
              <div className="bubble them">Yes please 🙏</div>
            </div>
          </div>

          <div className="feat">
            <span className="feat-tag">Pipeline Velocity</span>
            <h3>Deals advance themselves.</h3>
            <p>Aspire Sage detects stage signals, meetings booked, contracts opened, NPS scores, and moves cards automatically.</p>
            <div className="feat-art art-pipeline">
              {[
                {nm:'New', w:35},
                {nm:'Qualified', w:62},
                {nm:'Proposal', w:78},
                {nm:'Negotiation', w:48},
                {nm:'Won', w:90},
              ].map((l,i)=>(
                <div className="lane" key={i}>
                  <span className="lane-name">{l.nm}</span>
                  <div className="bar" style={{'--w': l.w + '%'}}></div>
                </div>
              ))}
            </div>
          </div>

          <div className="feat">
            <span className="feat-tag">Copilot</span>
            <h3>An AI brain trained on your sales motion.</h3>
            <p>Aspire Sage Copilot learns from your won deals, then drafts emails, recaps calls, and suggests next steps that sound like you.</p>
            <div className="feat-art art-orb">
              <div className="ring"></div>
              <div className="orb"></div>
            </div>
          </div>

          <div className="feat">
            <span className="feat-tag">Support, integrated</span>
            <h3>Tickets resolved before they reach a human.</h3>
            <p>Customer questions get instant answers from your knowledge base. Aspire Sage escalates only the cases that need a human.</p>
            <div className="feat-art art-ticket">
              <div className="ticket">
                <div>
                  <div style={{fontWeight:600}}>Billing question, invoice #4218</div>
                  <div className="meta">Auto-resolved · 11s · ★ 4.9</div>
                </div>
                <span className="pri resolved">Resolved</span>
              </div>
              <div className="ticket">
                <div>
                  <div style={{fontWeight:600}}>API timeout on /v2/sync</div>
                  <div className="meta">Escalated to Maya · 2 min ago</div>
                </div>
                <span className="pri high">High</span>
              </div>
              <div className="ticket">
                <div>
                  <div style={{fontWeight:600}}>Cancel my plan, refund</div>
                  <div className="meta">Routed · Retention queue</div>
                </div>
                <span className="pri med">Save</span>
              </div>
            </div>
          </div>

          <div className="feat full">
            <div>
              <span className="feat-tag">Enterprise-grade</span>
              <h3>SOC 2 + GDPR. Private by default.</h3>
              <p>Your data never trains public models. Run Aspire Sage on your region, your encryption keys, your retention rules, with SSO, SCIM, audit logs and a 99.99% uptime SLA.</p>
              <div style={{display:'flex',gap:10,marginTop:18,flexWrap:'wrap'}}>
                <span style={{fontSize:12,padding:'6px 12px',borderRadius:999,border:'1px solid var(--line-2)',background:'#fff',color:'var(--ink-2)'}}>SSO / SCIM</span>
                <span style={{fontSize:12,padding:'6px 12px',borderRadius:999,border:'1px solid var(--line-2)',background:'#fff',color:'var(--ink-2)'}}>Audit logs</span>
                <span style={{fontSize:12,padding:'6px 12px',borderRadius:999,border:'1px solid var(--line-2)',background:'#fff',color:'var(--ink-2)'}}>Region pinning</span>
                <span style={{fontSize:12,padding:'6px 12px',borderRadius:999,border:'1px solid var(--line-2)',background:'#fff',color:'var(--ink-2)'}}>BYO keys</span>
              </div>
            </div>
            <div className="feat-art" style={{display:'grid',placeItems:'center',background:'linear-gradient(180deg, var(--bg-2), oklch(0.55 0.22 285 / 0.04))'}}>
              <div style={{display:'flex',gap:22,alignItems:'center'}}>
                {[
                  {l:'SOC 2', t:'Type II'},
                  {l:'GDPR', t:'Compliant'},
                  {l:'HIPAA', t:'Ready'},
                  {l:'ISO', t:'27001'},
                ].map((b,i)=>(
                  <div key={i} style={{textAlign:'center'}}>
                    <div style={{width:56,height:56,borderRadius:16,background:'#fff',border:'1px solid var(--line)',display:'grid',placeItems:'center',marginBottom:10, boxShadow:'var(--shadow-sm)'}}>
                      <Icon.shield style={{width:24,height:24,color:'var(--accent)'}}/>
                    </div>
                    <div style={{fontSize:12,fontWeight:700}}>{b.l}</div>
                    <div style={{fontSize:10.5,color:'var(--ink-4)'}}>{b.t}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Features = Features;