// =============================================================
// Homepage — Hero
// Two-column on desktop: left = copy + AI command bar + CTA;
// right = scaled product mockup. Stacks on mobile.
// =============================================================

const HomeHero = () => {
  const data = {
    eyebrow: 'AI PEOPLEOS · BUILT FOR GLOBAL TEAMS',
    h1a: 'Your people ops,',
    h1b: 'run by AI agents.',
    h1c: 'Approved by you.',
    lead: 'Remote& is an AI operating system for hiring, paying, and supporting global teams. Specialist agents prepare the work; you stay in control.',
    cmdQuery: 'Run payroll readiness for April · 12 entities · 8 countries',
    cmdResult: { icon: 'sparkles', label: 'Payla · Payroll Agent · ready', meta: '428 payees · 8 countries' },
  };

  return (
    <section className="rmh-hero">
      <style>{`
        .rmh-hero { background:#E2F1D2; position:relative; overflow:hidden; }
        .rmh-hero-amp {
          position:absolute; right:-120px; top:-200px;
          font-family:var(--font-serif); font-style:italic;
          font-size:1000px; color:rgba(46,81,25,0.07); line-height:1;
          pointer-events:none; user-select:none; z-index:0;
        }
        .rmh-hero-radial {
          position:absolute; inset:0;
          background:radial-gradient(120% 70% at 18% 0%, rgba(255,255,255,0.50), transparent 55%);
          pointer-events:none; z-index:0;
        }
        .rmh-hero-grid {
          display:grid;
          grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr);
          gap:56px; align-items:center;
          max-width: var(--max-w-wide); margin:0 auto;
          padding:72px 40px 96px;
          position:relative; z-index:1;
        }
        .rmh-hero-left, .rmh-hero-right { min-width:0; }
        .rmh-hero-h1 {
          font-size: clamp(34px, 4.4vw, 60px);
          line-height:1.02; letter-spacing:-0.035em;
          font-weight:500; margin:14px 0 0;
          color:#111210; font-family:var(--font-display);
        }
        .rmh-hero-lead {
          margin-top:20px; max-width:540px;
          font-size: clamp(15px, 1.1vw, 18px);
          color:#353833; line-height:1.5;
        }
        .rmh-hero-cta {
          display:flex; gap:12px; margin-top:24px;
          align-items:center; flex-wrap:wrap;
        }
        .rmh-btn {
          text-decoration:none; padding:13px 24px;
          border-radius:14px; font-weight:500; font-size:15px;
          display:inline-flex; align-items:center; gap:8px;
        }
        .rmh-btn-primary { background:#2E5119; color:#FAFAF7; box-shadow:0 16px 40px rgba(46,81,25,0.30); }
        .rmh-btn-secondary { background:#FFFFFF; color:#2E5119; border:1px solid #CDE8B0; box-shadow:0 4px 14px rgba(46,81,25,0.06); }
        .rmh-hero-mock-wrap {
          transform: scale(0.62); transform-origin: top left;
          width: 161.3%;
          margin-bottom: -38%;
        }
        @media (max-width: 980px) {
          .rmh-hero-grid { grid-template-columns: 1fr; padding:56px 20px 64px; gap:36px; }
          .rmh-hero-mock-wrap { transform: scale(0.7); transform-origin: top left; width: 143%; margin-bottom: -30%; }
          .rmh-hero-h1 { font-size: clamp(30px, 7vw, 44px); }
          .rmh-hero-amp { font-size:560px; right:-80px; top:-120px; }
        }
        @media (max-width: 720px) {
          .rmh-hero-right { display: none; }
          .rmh-hero-grid { padding: 48px 16px 56px; }
        }
        @media (max-width: 600px) {
          .rmh-hero-grid { padding:40px 16px 48px; }
          .rmh-hero-cta .rmh-btn { padding:12px 20px; font-size:14px; }
          .rmh-hero-h1 { font-size: clamp(28px, 8.5vw, 38px); }
        }
      `}</style>

      <span className="rmh-hero-amp">&amp;</span>
      <div className="rmh-hero-radial" />

      <div className="rmh-hero-grid">
        <div className="rmh-hero-left">
          <Eyebrow>{data.eyebrow}</Eyebrow>
          <h1 className="rmh-hero-h1">
            {data.h1a}<br />
            {data.h1b}<br />
            <span style={{ color: '#2E5119' }}>{data.h1c}</span>
          </h1>

          <p className="rmh-hero-lead">{data.lead}</p>

          <HomeCommandBar query={data.cmdQuery} result={data.cmdResult} />

          <div className="rmh-hero-cta">
            <a href="/book-a-demo" className="rmh-btn rmh-btn-primary">Book a demo</a>
          </div>
        </div>

        <div className="rmh-hero-right">
          <div className="rmh-hero-mock-wrap">
            <ProductMockupFrame />
          </div>
        </div>
      </div>
    </section>
  );
};

// AI command bar shown in hero
const HomeCommandBar = ({ query, result }) => (
  <div style={{
    marginTop: 28, maxWidth: 560,
    background: '#FFFFFF', border: '1px solid rgba(17,18,16,0.06)',
    borderRadius: 16, boxShadow: '0 20px 48px rgba(46,81,25,0.16), 0 4px 12px rgba(17,18,16,0.05)',
    overflow: 'hidden',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 18px' }}>
      <i data-lucide="sparkles" style={{ width: 18, height: 18, color: '#2E8C7D', flexShrink: 0 }}></i>
      <input
        defaultValue={query}
        style={{ flex: 1, border: 'none', outline: 'none', fontFamily: 'var(--font-body)', fontSize: 14, color: '#111210', background: 'transparent', minWidth: 0 }}
      />
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, padding: '3px 8px', background: '#F6F7F2', borderRadius: 6, color: '#6B6F65', border: '1px solid #E3E8DD', flexShrink: 0 }}>⌘K</span>
    </div>
    <div style={{ padding: 8, borderTop: '1px solid #E3E8DD', background: '#FAFAF7' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px', borderRadius: 10, background: '#E2F1D2' }}>
        <i data-lucide={result.icon} style={{ width: 14, height: 14, color: '#2E5119', flexShrink: 0 }}></i>
        <span style={{ fontSize: 13, fontWeight: 500, color: '#111210' }}>{result.label}</span>
        <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#6B6F65' }}>{result.meta}</span>
      </div>
    </div>
  </div>
);

// Product mockup — mini admin app rendered as a browser frame.
const ProductMockupFrame = () => {
  const navItems = [
    { label: 'Home', emoji: '🏠' },
    { label: 'People', emoji: '👥', count: 428 },
    { label: 'Payroll', emoji: '💸', active: true },
    { label: 'Payments', emoji: '🔁' },
    { label: 'Time off', emoji: '🌴' },
    { label: 'Documents', emoji: '📄' },
    { label: 'Reports', emoji: '📊' },
  ];
  const kpis = [
    { l: 'Gross', v: '$1,247,300', s: '+8% vs Feb', accent: '#74B144' },
    { l: 'Net', v: '$1,089,420', s: '12 currencies', accent: '#2E8C7D' },
    { l: 'Headcount', v: '428', s: '12 countries', accent: '#5A9233' },
  ];
  const rows = [
    { name: 'Camille Dubois', flag: 'FR', country: 'FRA', type: 'EMPLOYEE', gross: '4,800.00', status: { label: 'Paid', bg: '#E2F1D2', c: '#2E5119', dot: '#5A9233' }, avatar: '#2E5119' },
    { name: 'Hannah Schmidt', flag: 'DE', country: 'DEU', type: 'EMPLOYEE', gross: '5,300.00', status: { label: 'Pending review', bg: '#FDE9B7', c: '#8A5800', dot: '#E0941C' }, avatar: '#427025' },
    { name: 'Maya Park',     flag: 'KR', country: 'KOR', type: 'EOR', gross: '6,200.00', status: { label: 'Paid', bg: '#E2F1D2', c: '#2E5119', dot: '#5A9233' }, avatar: '#2E8C7D' },
    { name: 'Lucas Mendes', flag: 'BR', country: 'BRA', type: 'EMPLOYEE', gross: '4,100.00', status: { label: 'Paid', bg: '#E2F1D2', c: '#2E5119', dot: '#5A9233' }, avatar: '#5A9233' },
  ];
  return (
    <div style={{
      borderRadius: 24, overflow: 'hidden',
      border: '1px solid rgba(17,18,16,0.08)',
      boxShadow: '0 36px 80px rgba(17,18,16,0.18), 0 4px 12px rgba(17,18,16,0.06)',
      background: '#fff', position: 'relative',
    }}>
      <div style={{ background: '#F6F7F2', padding: '10px 16px', borderBottom: '1px solid #E3E8DD', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#CFD6C7' }}></span>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#CFD6C7' }}></span>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#CFD6C7' }}></span>
        </div>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#6B6F65' }}>app.remoteand.com/workforce/april</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', minHeight: 580, background: '#FAFAF7' }}>
        {/* Sidebar */}
        <aside style={{ background: '#FAFAF7', borderRight: '1px solid #E3E8DD', padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 4 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 8px 14px' }}>
            <img src="/assets/mark-mint-v2.svg" style={{ width: 26, height: 26, borderRadius: 7, flexShrink: 0 }} alt="" />
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: 13, letterSpacing: '-0.01em' }}>Acme Global</div>
              <div style={{ fontSize: 10, color: '#6B6F65' }}>London · Admin</div>
            </div>
            <i data-lucide="chevrons-up-down" style={{ width: 12, height: 12, color: '#6B6F65', flexShrink: 0 }}></i>
          </div>
          <div style={{ position: 'relative', marginBottom: 6 }}>
            <i data-lucide="search" style={{ position: 'absolute', left: 10, top: 8, width: 12, height: 12, color: '#6B6F65' }}></i>
            <input placeholder="Search · ⌘K" style={{ width: '100%', padding: '6px 10px 6px 30px', borderRadius: 8, border: '1px solid #E3E8DD', background: '#fff', fontSize: 12, outline: 'none' }} />
          </div>
          {navItems.map(it => (
            <a key={it.label} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '7px 10px', borderRadius: 8, fontSize: 12,
              background: it.active ? '#E2F1D2' : 'transparent',
              color: it.active ? '#2E5119' : '#111210',
              fontWeight: it.active ? 500 : 400, textDecoration: 'none',
            }}>
              <span style={{ fontSize: 13, width: 16, display: 'inline-flex', justifyContent: 'center' }}>{it.emoji}</span>
              <span style={{ flex: 1 }}>{it.label}</span>
              {it.count && <span style={{ fontSize: 10, color: '#6B6F65' }}>{it.count}</span>}
            </a>
          ))}
          <div style={{ marginTop: 'auto', padding: 10, background: 'linear-gradient(135deg, #E2F1D2 0%, #C6E8E0 100%)', border: '1px solid #CDE8B0', borderRadius: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
              <span style={{ fontSize: 12 }}>✨</span>
              <span style={{ fontSize: 9, fontFamily: 'var(--font-mono)', color: '#2E5119', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>PAYLA · ACTIVE</span>
            </div>
            <div style={{ fontSize: 11, lineHeight: 1.35, color: '#1B3210' }}>Reconciling 12 batches. ETA 2 min.</div>
          </div>
        </aside>

        {/* Main */}
        <div style={{ padding: 22, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
            <div>
              <p style={{ fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em', color: '#6B6F65', margin: '0 0 4px' }}>PAYROLL · APRIL 2026</p>
              <h3 style={{ margin: 0, fontSize: 24, letterSpacing: '-0.025em' }}>Run payroll <Amp /> reconcile</h3>
              <p style={{ margin: '4px 0 0', fontSize: 12, color: '#6B6F65' }}>428 payees · 12 countries · cycle closes 28 Apr</p>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <button style={{ background: 'transparent', color: '#111210', border: '1px solid #CFD6C7', borderRadius: 9, padding: '7px 11px', fontSize: 11, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 5, cursor: 'pointer' }}><i data-lucide="download" style={{ width: 12, height: 12 }}></i>Export</button>
              <button style={{ background: '#2E5119', color: '#FAFAF7', border: 'none', borderRadius: 9, padding: '7px 14px', fontSize: 11, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 5, cursor: 'pointer', boxShadow: '0 6px 14px rgba(46,81,25,0.30)' }}><i data-lucide="play" style={{ width: 12, height: 12 }}></i>Run payroll</button>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 14 }}>
            {kpis.map(c => (
              <div key={c.l} style={{ background: '#fff', border: '1px solid #E3E8DD', borderLeft: `3px solid ${c.accent}`, borderRadius: 12, padding: 12 }}>
                <div style={{ fontSize: 10, color: '#6B6F65', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>{c.l}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 500, letterSpacing: '-0.02em' }}>{c.v}</div>
                <div style={{ fontSize: 10, marginTop: 3, color: '#5A9233' }}>{c.s}</div>
              </div>
            ))}
          </div>

          {/* AI banner */}
          <div style={{ background: 'linear-gradient(120deg, #E2F1D2 0%, #C6E8E0 100%)', borderRadius: 12, padding: '12px 14px', color: '#1B3210', display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14, border: '1px solid #CDE8B0', boxShadow: '0 8px 20px rgba(46,81,25,0.10)', position: 'relative', overflow: 'hidden' }}>
            <span style={{ position: 'absolute', right: 16, top: -10, fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 78, color: 'rgba(46,81,25,0.10)', lineHeight: 1, pointerEvents: 'none' }}>&amp;</span>
            <div style={{ width: 30, height: 30, borderRadius: 8, background: '#FFFFFF', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 14, boxShadow: '0 3px 8px rgba(46,81,25,0.12)' }}>✨</div>
            <div style={{ flex: 1, position: 'relative', minWidth: 0 }}>
              <div style={{ fontSize: 12, fontWeight: 500, color: '#111210' }}>Payla reconciled 11 of 12 entities. Brazil batch needs your approval.</div>
              <div style={{ fontSize: 10, opacity: 0.7, marginTop: 2, fontFamily: 'var(--font-mono)', color: '#2E5119' }}>Started 09:42 · 38 events · explainable trail</div>
            </div>
            <button style={{ background: '#2E5119', color: '#FAFAF7', border: 'none', padding: '7px 12px', borderRadius: 8, fontSize: 11, fontWeight: 600, cursor: 'pointer', boxShadow: '0 4px 10px rgba(46,81,25,0.30)', whiteSpace: 'nowrap' }}>Review</button>
          </div>

          {/* Table */}
          <div style={{ background: '#fff', border: '1px solid #E3E8DD', borderRadius: 12, overflow: 'hidden' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 0.8fr 0.9fr 1fr 1.1fr', padding: '8px 12px', background: '#F6F7F2', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', fontSize: 9, letterSpacing: '0.06em', color: '#6B6F65', borderBottom: '1px solid #E3E8DD', gap: 8 }}>
              <div>Payee</div><div>Country</div><div>Type</div><div style={{ textAlign: 'right' }}>Gross</div><div>Status</div>
            </div>
            {rows.map((r, i) => (
              <div key={r.name} style={{ display: 'grid', gridTemplateColumns: '2fr 0.8fr 0.9fr 1fr 1.1fr', padding: '10px 12px', alignItems: 'center', borderBottom: i < rows.length - 1 ? '1px solid #F2F3F1' : 'none', fontSize: 12, gap: 8 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
                  <div style={{ width: 22, height: 22, borderRadius: 999, background: r.avatar, color: '#E2F1D2', fontSize: 9, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{r.name.split(' ').map(x => x[0]).join('').slice(0, 2)}</div>
                  <span style={{ fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.name}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 16, height: 16, borderRadius: 3, background: '#F6F7F2', fontSize: 8, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid #E3E8DD' }}>{r.flag}</span>{r.country}</div>
                <div><span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, padding: '2px 5px', borderRadius: 3, background: r.type === 'EMPLOYEE' ? '#E2F1D2' : '#E0F2EE', color: r.type === 'EMPLOYEE' ? '#2E5119' : '#15554B' }}>{r.type}</span></div>
                <div style={{ textAlign: 'right', fontFamily: 'var(--font-mono)', fontSize: 11, paddingRight: 12 }}>{r.gross}</div>
                <div><span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '2px 8px', borderRadius: 999, background: r.status.bg, color: r.status.c, fontSize: 10 }}><span style={{ width: 5, height: 5, borderRadius: 999, background: r.status.dot }}></span>{r.status.label}</span></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

window.HomeHero = HomeHero;