const heroStyles = {
  wrap: {
    position: 'relative',
    padding: '72px 32px 72px',
    overflow: 'hidden',
  },
  bg: {
    position: 'absolute', inset: 0, pointerEvents: 'none',
    background: 'radial-gradient(60% 50% at 80% 30%, rgba(29,78,137,0.06) 0%, transparent 60%), radial-gradient(40% 40% at 10% 80%, rgba(232,220,196,0.35) 0%, transparent 70%)',
  },
  inner: {
    maxWidth: 1280, margin: '0 auto',
    display: 'grid', gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 1fr)',
    gap: 80, alignItems: 'center',
    position: 'relative',
  },
  eyebrow: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    fontSize: 13, color: 'var(--coral-ink)', fontWeight: 500,
    padding: '6px 12px', borderRadius: 999,
    background: 'var(--coral-soft)', border: '1px solid rgba(242,107,92,0.18)',
    marginBottom: 28,
  },
  dot: { width: 6, height: 6, borderRadius: 3, background: 'var(--coral)' },
  h1: {
    fontFamily: "'Outfit', sans-serif",
    fontSize: 64, lineHeight: 1.05, letterSpacing: '-0.04em',
    fontWeight: 600,
    color: 'var(--ink)',
    marginBottom: 24,
    minHeight: 'calc(2 * 64px * 1.05)',
  },
  italic: { color: 'var(--blue)', fontWeight: 600 },
  sub: {
    fontSize: 19, lineHeight: 1.5, color: 'var(--ink-muted)',
    maxWidth: 520, marginBottom: 36,
  },
  ctas: { display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 },
  trustRow: { display: 'flex', alignItems: 'center', gap: 18, marginBottom: 32, flexWrap: 'wrap' },
  trustItem: { display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13, color: 'var(--ink-soft)', fontWeight: 500 },
  trustCheck: { width: 16, height: 16, borderRadius: '50%', background: 'var(--coral-soft)', color: 'var(--coral-ink)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 700, flex: 'none' },
  primary: {
    background: 'var(--ink)', color: 'var(--paper)',
    padding: '16px 24px', borderRadius: 12,
    fontSize: 15, fontWeight: 500,
    display: 'inline-flex', alignItems: 'center', gap: 8,
    transition: 'background .2s, transform .15s',
  },
  secondary: {
    background: 'transparent', color: 'var(--ink)',
    padding: '16px 20px', borderRadius: 12,
    fontSize: 15, fontWeight: 500,
    display: 'inline-flex', alignItems: 'center', gap: 8,
    border: '1px solid var(--line)',
    transition: 'background .2s',
  },
  microProof: {
    display: 'flex', alignItems: 'center', gap: 16,
    fontSize: 13, color: 'var(--ink-muted)',
  },
  stars: { display: 'flex', gap: 2, color: '#E4A72B' },
  avatars: { display: 'flex' },
  avatar: (i) => ({
    width: 28, height: 28, borderRadius: 14,
    border: '2px solid #fff',
    background: ['#C5D4E8', '#E8DCC4', '#B8C9DC', '#D4C4A8', '#C5D4E8'][i],
    marginLeft: i === 0 ? 0 : -8,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontSize: 9.5, fontWeight: 600, color: 'var(--ink-soft)',
    letterSpacing: '-0.02em',
  }),

  // Match card
  cardWrap: { position: 'relative' },
  card: {
    background: '#fff',
    border: '1px solid var(--line-soft)',
    borderRadius: 20,
    padding: 28,
    boxShadow: 'var(--shadow-lg)',
    position: 'relative',
  },
  cardHeader: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    paddingBottom: 20, borderBottom: '1px solid var(--line-soft)',
    marginBottom: 20,
  },
  cardTitle: { fontSize: 13, color: 'var(--ink-muted)', fontWeight: 500, letterSpacing: '0.02em', textTransform: 'uppercase' },
  matchBadge: {
    display: 'flex', alignItems: 'center', gap: 6,
    fontSize: 12, fontWeight: 500, color: 'var(--coral-ink)',
    padding: '4px 10px', borderRadius: 999,
    background: 'var(--coral-soft)',
  },
  pulse: {
    width: 6, height: 6, borderRadius: 3, background: 'var(--coral)',
    boxShadow: '0 0 0 0 rgba(242,107,92,0.5)', animation: 'pulse 2s infinite',
  },
  profile: {
    display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20,
  },
  profileImg: {
    width: 64, height: 64, borderRadius: 32,
    background: 'linear-gradient(135deg, #C5D4E8, #E8DCC4)',
    flexShrink: 0,
    position: 'relative', overflow: 'hidden',
  },
  name: { fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 3 },
  role: { fontSize: 13, color: 'var(--ink-muted)' },
  meta: {
    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 20,
    padding: '16px 0', borderTop: '1px solid var(--line-soft)', borderBottom: '1px solid var(--line-soft)',
  },
  metaLabel: { fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--ink-muted)', marginBottom: 4, fontWeight: 500 },
  metaValue: { fontSize: 14, color: 'var(--ink)', fontWeight: 500 },
  skills: { display: 'flex', flexWrap: 'wrap', gap: 6 },
  skill: {
    fontSize: 12, padding: '5px 10px', borderRadius: 999,
    background: 'var(--paper-deep)', color: 'var(--ink-soft)',
    border: '1px solid var(--line-soft)',
  },
  skillMatch: {
    background: 'var(--blue-soft)', color: 'var(--blue-deep)',
    border: '1px solid rgba(29,78,137,0.18)',
  },

  floatCard: {
    position: 'absolute',
    background: '#fff',
    border: '1px solid var(--line-soft)',
    borderRadius: 14,
    padding: '14px 16px',
    boxShadow: 'var(--shadow-md)',
    fontSize: 13,
    display: 'flex', alignItems: 'center', gap: 10,
  },
};

const ROTATING_WORDS = [
  'you.',
  'your team.',
  'your sales.',
  'your marketing.',
  'your client success.',
  'your inbox.',
  'your operations.',
  'your free time.',
];

function RotatingWord({ words, interval = 2600 }) {
  const [idx, setIdx] = React.useState(0);
  const [prevIdx, setPrevIdx] = React.useState(null);

  React.useEffect(() => {
    const id = setInterval(() => {
      setIdx((i) => {
        setPrevIdx(i);
        return (i + 1) % words.length;
      });
    }, interval);
    return () => clearInterval(id);
  }, [words.length, interval]);

  React.useEffect(() => {
    if (prevIdx === null) return;
    const t = setTimeout(() => setPrevIdx(null), 700);
    return () => clearTimeout(t);
  }, [prevIdx, idx]);

  const slot = {
    position: 'absolute', left: 0, top: 0,
    whiteSpace: 'nowrap',
    willChange: 'transform, opacity, filter',
  };

  return (
    <span style={{
      display: 'inline-block',
      position: 'relative',
      verticalAlign: 'baseline',
      whiteSpace: 'nowrap',
    }}>
      <span aria-hidden="true" style={{ visibility: 'hidden' }}>{words[idx]}</span>
      {prevIdx !== null && (
        <span
          key={`out-${prevIdx}`}
          aria-hidden="true"
          style={{ ...slot, animation: 'bmWordOut 650ms cubic-bezier(0.4, 0, 0.2, 1) forwards' }}
        >
          {words[prevIdx]}
        </span>
      )}
      <span
        key={`in-${idx}`}
        style={{ ...slot, animation: 'bmWordIn 650ms cubic-bezier(0.4, 0, 0.2, 1)' }}
      >
        {words[idx]}
      </span>
    </span>
  );
}

function Hero() {
  const t = React.useContext(window.TweakCtx);
  return (
    <section id="top" style={heroStyles.wrap} className="bm-section">
      <div style={heroStyles.bg} />
      <style>{`
        @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(242,107,92,0.45); } 70% { box-shadow: 0 0 0 8px rgba(242,107,92,0); } 100% { box-shadow: 0 0 0 0 rgba(242,107,92,0); } }
        @keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(0,-6px); } }
        @keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(0,-4px); } }
        @keyframes bmWordIn {
          0%   { transform: translateY(0.45em); opacity: 0; filter: blur(8px); }
          55%  { filter: blur(0); }
          100% { transform: translateY(0); opacity: 1; filter: blur(0); }
        }
        @keyframes bmWordOut {
          0%   { transform: translateY(0); opacity: 1; filter: blur(0); }
          45%  { filter: blur(0); }
          100% { transform: translateY(-0.45em); opacity: 0; filter: blur(8px); }
        }
        @media (prefers-reduced-motion: reduce) {
          @keyframes bmWordIn  { 0%, 100% { transform: none; opacity: 1; filter: none; } }
          @keyframes bmWordOut { 0% { opacity: 1; } 100% { opacity: 0; } }
        }
      `}</style>
      <div style={heroStyles.inner} className="bm-hero-grid">
        <div>
          <div style={heroStyles.eyebrow}>
            <span style={heroStyles.dot}></span>
            Delegate the work. Take back your time now.
          </div>
          <h1 className="serif bm-hero-title" style={heroStyles.h1}>
            The team behind<br/>
            <span style={heroStyles.italic}>
              <RotatingWord words={ROTATING_WORDS} />
            </span>
          </h1>
          <p style={heroStyles.sub}>
            {t.heroSub}
          </p>
          <div style={heroStyles.trustRow}>
            <span style={heroStyles.trustItem}><span style={heroStyles.trustCheck}>✓</span> Vetted, top 1%</span>
            <span style={heroStyles.trustItem}><span style={heroStyles.trustCheck}>✓</span> Matched to you</span>
            <span style={heroStyles.trustItem}><span style={heroStyles.trustCheck}>✓</span> No long contracts</span>
          </div>
          <div style={heroStyles.microProof}>
            <div style={heroStyles.avatars}>
              {[0,1,2,3,4].map(i => <div key={i} style={heroStyles.avatar(i)}>{['MI','CH','MC','RH','JB'][i]}</div>)}
            </div>
            <div>
              <div style={heroStyles.stars}>
                {[0,1,2,3,4].map(i => <span key={i}>★</span>)}
              </div>
              <span>Trusted by 100+ business owners worldwide</span>
            </div>
          </div>
        </div>

        <div style={heroStyles.cardWrap}>
          <CalculatorCard />
          <div style={{ ...heroStyles.floatCard, top: -22, left: -28, animation: 'float1 5s ease-in-out infinite' }}>
            <Icon name="sparkle" size={14} color="var(--blue)" />
            <span style={{ fontWeight: 500 }}>See what your time's worth</span>
          </div>
          <div style={{ ...heroStyles.floatCard, bottom: -22, right: -28, animation: 'float2 6s ease-in-out infinite' }}>
            <Icon name="shield" size={16} color="var(--blue)" />
            <span><strong style={{fontWeight: 600}}>Vetted</strong> &nbsp;<span style={{color:'var(--ink-muted)'}}>top 1%</span></span>
          </div>
        </div>
      </div>
    </section>
  );
}

function MatchCard() {
  return (
    <div style={heroStyles.card}>
      <div style={heroStyles.cardHeader}>
        <span className="mono" style={heroStyles.cardTitle}>Your match</span>
        <div style={heroStyles.matchBadge}>
          <span style={heroStyles.pulse}></span>
          98% fit
        </div>
      </div>
      <div style={heroStyles.profile}>
        <div style={heroStyles.profileImg}>
          <div style={{
            position:'absolute', inset:0,
            backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.18) 0 1px, transparent 1px 6px)'
          }}/>
          <div style={{
            position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center',
            fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 28, color: 'var(--blue-deep)'
          }}>M</div>
        </div>
        <div>
          <div style={heroStyles.name}>Maya R.</div>
          <div style={heroStyles.role}>Executive Assistant · 6 yrs</div>
        </div>
      </div>
      <div style={heroStyles.meta}>
        <div>
          <div style={heroStyles.metaLabel}>Work style</div>
          <div style={heroStyles.metaValue}>Proactive, detail-led</div>
        </div>
        <div>
          <div style={heroStyles.metaLabel}>Time zone overlap</div>
          <div style={heroStyles.metaValue}>6 hrs with EST</div>
        </div>
      </div>
      <div style={{ marginBottom: 14 }}>
        <div style={{ ...heroStyles.metaLabel, marginBottom: 8 }}>Matched on</div>
        <div style={heroStyles.skills}>
          {[
            { label: 'Inbox triage', match: true },
            { label: 'Calendar', match: true },
            { label: 'Client comms', match: true },
            { label: 'Notion', match: false },
            { label: 'SOP writing', match: false },
          ].map(s => (
            <span key={s.label} style={{ ...heroStyles.skill, ...(s.match ? heroStyles.skillMatch : {}) }}>
              {s.match && <span style={{ marginRight: 4, fontSize: 10 }}>●</span>}
              {s.label}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Hero });