/* Hero.jsx, top of page: nav + headline + 3D mock */

const { useState, useEffect, useRef } = React;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="container nav-inner">
        <a href="/index.html" className="logo">
          <span className="logo-mark"></span>
          <span>Aspire Sage</span>
        </a>
        <div className="nav-links">
          <a href="#features">Features</a>
          <a href="#product">Product</a>
          <a href="#pricing">Pricing</a>
          <a href="#testimonials">Customers</a>
        </div>
        <div className="nav-cta">
          <a href="app/login.html" className="btn btn-ghost">Sign in</a>
          <a href="app/onboarding.html" className="btn btn-primary">Start free <Icon.arrow /></a>
        </div>
      </div>
    </nav>
  );
}

function MockSideLeft() {
  return (
    <div className="mock mock-side left">
      <div className="side-card-1">
        <div style={{display:'flex',alignItems:'center',gap:8}}>
          <span className="ai-orb" style={{width:14,height:14}}></span>
          <span style={{fontSize:11,fontWeight:600,letterSpacing:'-0.01em'}}>Aspire Sage Copilot</span>
        </div>
        <div style={{fontSize:12,color:'var(--ink-2)',lineHeight:1.45}}>
          I drafted <b style={{color:'var(--accent)'}}>3 follow-ups</b> for stalled deals worth <b>$148k</b>.
        </div>
        <div style={{display:'flex',gap:6}}>
          <span style={{fontSize:10,padding:'4px 8px',borderRadius:6,background:'var(--ink)',color:'#fff'}}>Send all</span>
          <span style={{fontSize:10,padding:'4px 8px',borderRadius:6,background:'var(--bg-2)',border:'1px solid var(--line)'}}>Review</span>
        </div>
        <div style={{borderTop:'1px solid var(--line)',paddingTop:10,marginTop:4}}>
          <div style={{fontSize:10,textTransform:'uppercase',letterSpacing:'0.12em',color:'var(--ink-4)',marginBottom:8,fontWeight:600}}>Today</div>
          {[
            {t:'Call w/ Acme', s:'14:00', d:'•'},
            {t:'Demo • Northwind', s:'15:30', d:'•'},
            {t:'Renewal • Halycon', s:'16:45', d:'•'},
          ].map((x,i)=>(
            <div key={i} style={{display:'flex',justifyContent:'space-between',fontSize:11,padding:'5px 0',color:'var(--ink-2)'}}>
              <span>{x.t}</span><span style={{color:'var(--ink-4)'}}>{x.s}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function MockSideRight() {
  return (
    <div className="mock mock-side right">
      <div className="side-card-2">
        <div style={{fontSize:11,color:'var(--ink-4)',textTransform:'uppercase',letterSpacing:'0.12em',fontWeight:600}}>Forecast • Q2</div>
        <div style={{fontSize:28,fontWeight:700,letterSpacing:'-0.03em',lineHeight:1}}>$2.84M</div>
        <div style={{fontSize:11,color:'oklch(0.55 0.13 165)'}}>↑ 18.2% vs. plan</div>
        <svg viewBox="0 0 240 90" style={{width:'100%',height:90,marginTop:6}}>
          <defs>
            <linearGradient id="hg" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="oklch(0.55 0.22 285)" stopOpacity="0.45"/>
              <stop offset="100%" stopColor="oklch(0.55 0.22 285)" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d="M0,70 C30,60 50,68 70,55 C95,40 115,52 140,42 C170,30 195,20 240,8 L240,90 L0,90 Z" fill="url(#hg)"/>
          <path d="M0,70 C30,60 50,68 70,55 C95,40 115,52 140,42 C170,30 195,20 240,8" fill="none" stroke="oklch(0.55 0.22 285)" strokeWidth="2"/>
        </svg>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginTop:4}}>
          <div style={{padding:'8px 10px',background:'var(--bg-2)',borderRadius:8,border:'1px solid var(--line)'}}>
            <div style={{fontSize:10,color:'var(--ink-4)'}}>Win rate</div>
            <div style={{fontSize:15,fontWeight:700,letterSpacing:'-0.02em'}}>34.2%</div>
          </div>
          <div style={{padding:'8px 10px',background:'var(--bg-2)',borderRadius:8,border:'1px solid var(--line)'}}>
            <div style={{fontSize:10,color:'var(--ink-4)'}}>Avg cycle</div>
            <div style={{fontSize:15,fontWeight:700,letterSpacing:'-0.02em'}}>11d</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function MockMain() {
  return (
    <div className="mock-main">
      <div className="crm-chrome">
        <span className="crm-dot r"></span>
        <span className="crm-dot y"></span>
        <span className="crm-dot g"></span>
        <span className="crm-tab">Aspiresage.com · Pipeline</span>
      </div>
      <div className="crm-body">
        <aside className="crm-side">
          <div className="crm-section-title">Workspace</div>
          <div className="crm-nav-item active"><Icon.pipe className="ic"/> Pipeline</div>
          <div className="crm-nav-item"><Icon.inbox className="ic"/> Inbox</div>
          <div className="crm-nav-item"><Icon.wa className="ic"/> WhatsApp</div>
          <div className="crm-nav-item"><Icon.user className="ic"/> Contacts</div>
          <div className="crm-nav-item"><Icon.chart className="ic"/> Reports</div>
          <div className="crm-section-title">Automations</div>
          <div className="crm-nav-item"><Icon.bot className="ic"/> Copilot</div>
          <div className="crm-nav-item"><Icon.zap className="ic"/> Sequences</div>
          <div className="crm-nav-item"><Icon.settings className="ic"/> Settings</div>
        </aside>

        <main className="crm-main">
          <div className="crm-h">
            <div>
              <h3>Sales pipeline</h3>
              <p>Q2 · 142 active deals · $2.84M</p>
            </div>
            <div style={{display:'flex',gap:8}}>
              <div style={{padding:'6px 12px',borderRadius:8,border:'1px solid var(--line)',fontSize:12,color:'var(--ink-3)'}}>This quarter ▾</div>
              <div style={{padding:'6px 12px',borderRadius:8,background:'var(--ink)',color:'#fff',fontSize:12,fontWeight:600}}>+ New deal</div>
            </div>
          </div>

          <div className="kpis">
            <div className="kpi"><div className="kpi-label">Qualified</div><div className="kpi-value">68</div><div className="kpi-delta">↑ 12%</div></div>
            <div className="kpi"><div className="kpi-label">Pipeline</div><div className="kpi-value">$2.84M</div><div className="kpi-delta">↑ 8%</div></div>
            <div className="kpi"><div className="kpi-label">Closed won</div><div className="kpi-value">$684k</div><div className="kpi-delta">↑ 24%</div></div>
          </div>

          <div className="pipeline">
            {[
              {h:'New', n:12, items:[
                {nm:'Vector Foundry', co:'Sarah Cole', val:'$18.4k'},
                {nm:'Aperion Labs', co:'M. Reyes', val:'$6.2k'},
                {nm:'Hexa Group', co:'J. Patel', val:'$32k'},
              ]},
              {h:'Qualified', n:24, items:[
                {nm:'Indra Systems', co:'A. Tan', val:'$54k'},
                {nm:'Loma Health', co:'K. Yu', val:'$22k', win:true},
              ]},
              {h:'Proposal', n:9, items:[
                {nm:'Northwind Co.', co:'D. Park', val:'$96k', win:true},
                {nm:'Halycon AI', co:'V. Singh', val:'$148k'},
              ]},
              {h:'Won', n:17, items:[
                {nm:'Acme Robotics', co:'L. Khan', val:'$212k'},
              ]},
            ].map((col,i)=>(
              <div className="pipe-col" key={i}>
                <div className="pipe-h"><span style={{fontWeight:700,color:'var(--ink-2)'}}>{col.h}</span><span>{col.n}</span></div>
                {col.items.map((it,j)=>(
                  <div key={j} className={"pipe-card" + (it.win ? " win" : "")}>
                    <span className="nm">{it.nm}</span>
                    <span className="co">{it.co}</span>
                    <span className="val">{it.val}</span>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </main>

        <aside className="crm-aside">
          <div className="ai-card">
            <div className="ai-head"><span className="ai-orb"></span> Aspire Sage Copilot · just now</div>
            <div className="ai-msg">
              <b>Halycon AI</b> hasn't replied in 4 days. Their CTO opened your last deck 3× this week. I drafted a follow-up referencing the data-residency concern from your call.
            </div>
            <div className="ai-actions">
              <span style={{background:'var(--ink)',color:'#fff',borderColor:'transparent'}}>Send</span>
              <span>Edit</span>
              <span>Schedule</span>
            </div>
          </div>

          <div className="wa">
            <div className="wa-h">
              <span className="av">DP</span>
              <div>
                <div className="nm">Diego · Northwind</div>
                <div style={{fontSize:10,color:'var(--ink-4)'}}>via WhatsApp</div>
              </div>
            </div>
            <div className="wa-body">
              <div className="bubble them">Quick one, can you do the security review by Friday?</div>
              <div className="bubble ai">Yes, SOC2 + DPA already sent to your legal team. Slots open Thu 2pm or Fri 10am, which works?</div>
              <div className="bubble them">Thu 2pm works. Send the invite 🙏</div>
            </div>
          </div>

          <div style={{padding:'10px 12px',background:'var(--bg-2)',border:'1px solid var(--line)',borderRadius:10,fontSize:11,color:'var(--ink-3)',display:'flex',justifyContent:'space-between'}}>
            <span>Auto-follow-up sent · 11:42</span>
            <span style={{color:'oklch(0.55 0.13 165)',fontWeight:600}}>✓ Delivered</span>
          </div>
        </aside>
      </div>
    </div>
  );
}

function Hero() {
  const stageRef = useRef(null);
  useEffect(() => {
    const el = stageRef.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const cx = (e.clientX - r.left - r.width / 2) / r.width;
      const cy = (e.clientY - r.top - r.height / 2) / r.height;
      el.style.transform = `rotateX(${-cy * 4 + 6}deg) rotateY(${cx * 6}deg)`;
    };
    const onLeave = () => { el.style.transform = `rotateX(6deg) rotateY(0deg)`; };
    el.style.transform = `rotateX(6deg) rotateY(0deg)`;
    window.addEventListener('mousemove', onMove);
    el.addEventListener('mouseleave', onLeave);
    return () => {
      window.removeEventListener('mousemove', onMove);
      el.removeEventListener('mouseleave', onLeave);
    };
  }, []);

  return (
    <section className="hero">
      <div className="aurora"></div>
      <div className="grid-bg"></div>
      <div className="container">
        <div className="hero-eyebrow">
          <div className="pill">
            <span className="pill-dot"></span>
            <span>New · Aspire Sage Copilot writes your follow-ups</span>
            <Icon.arrow style={{width:12,height:12,opacity:0.6}}/>
          </div>
        </div>
        <h1>The CRM that <span className="serif">closes</span> while you sleep.</h1>
        <p className="hero-sub">
          Aspire Sage is the AI-native CRM that scores leads, drafts WhatsApp follow-ups, advances your pipeline and handles support, automatically. Spend time on customers, not on data entry.
        </p>
        <div className="hero-actions">
          <a className="btn btn-primary btn-lg" href="app/onboarding.html">Start free 14-day trial <Icon.arrow/></a>
          <a className="btn btn-ghost btn-lg" href="#">Watch 2-min demo</a>
        </div>
        <div className="hero-meta">
          <span className="hero-meta-item"><span className="check"><Icon.check/></span> No credit card</span>
          <span className="hero-meta-item"><span className="check"><Icon.check/></span> Setup in 5 minutes</span>
          <span className="hero-meta-item"><span className="check"><Icon.check/></span> Import from any CRM</span>
        </div>

        <div className="stage">
          <div className="stage-platform"></div>
          <div className="stage-deck" ref={stageRef}>
            <MockSideLeft />
            <MockMain />
            <MockSideRight />
          </div>
        </div>
      </div>
    </section>
  );
}

function Logos() {
  const logos = ['Northwind', 'Acme•Robotics', 'Halycon', 'Vector', 'Aperion', 'Indra', 'Hexa'];
  return (
    <section className="logos">
      <div className="container">
        <div className="logos-label">Trusted by 4,200+ revenue teams worldwide</div>
        <div className="logos-row">
          {logos.map((l,i)=> (
            <span className="logo-item" key={i}><span className="glyph"></span> {l}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.Logos = Logos;