// Hero, asymmetric, with a teaser intelligence card to the right
const Hero = () => {
  return (
    <section style={{
      position: 'relative',
      paddingTop: 140, paddingBottom: 120,
      paddingLeft: 32, paddingRight: 32,
      background: T.paper,
      overflow: 'hidden',
    }}>
      {/* Subtle dot grid behind */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle, rgba(45,138,78,0.10) 1px, transparent 1px)',
        backgroundSize: '24px 24px',
        maskImage: 'radial-gradient(ellipse 70% 80% at 50% 30%, black 30%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse 70% 80% at 50% 30%, black 30%, transparent 75%)',
        pointerEvents: 'none',
      }} />
      {/* Top accent bar */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 4,
        background: `linear-gradient(90deg, ${T.green}, ${T.orange})`,
      }} />

      <div style={{
        position: 'relative',
        maxWidth: 1240, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 0.95fr)',
        gap: 56,
        alignItems: 'center',
      }}>
        {/* Left, copy */}
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 14px', borderRadius: 999,
            background: T.greenLight, color: T.greenDark,
            fontSize: 12, fontWeight: 600, letterSpacing: 0.3,
            marginBottom: 28,
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: '50%', background: T.green,
            }} className="pulse-dot" />
            New from Harmoni, built for executives, not HR
          </div>

          <h1 className="display" style={{
            fontSize: 'clamp(38px, 5.2vw, 68px)',
            fontWeight: 800,
            lineHeight: 1.05,
            letterSpacing: -1.6,
            color: T.ink,
            marginBottom: 24,
          }}>
            Your team has answers<br />
            <span style={{ color: T.greenDark }}>you haven't asked for yet.</span>
          </h1>

          <p style={{
            fontSize: 18.5, lineHeight: 1.55, color: T.ink2,
            maxWidth: 560, marginBottom: 36,
            fontWeight: 400,
          }}>
            Harmoni Spark is a thinking partner for executive innovation
            challenges. You shape each one with the AI, share a link with your
            team, and receive a ranked, synthesised report once submissions close.
          </p>

          <a href="#start" style={{
            textDecoration: 'none',
            background: T.orange, color: 'white',
            padding: '17px 30px', borderRadius: 10,
            fontWeight: 600, fontSize: 16.5,
            display: 'inline-flex', alignItems: 'center', gap: 10,
            boxShadow: '0 8px 24px rgba(255,94,0,0.25)',
            transition: 'all 200ms ease',
          }}
          onMouseEnter={e => {
            e.currentTarget.style.background = T.orangeHover;
            e.currentTarget.style.transform = 'translateY(-1px)';
            e.currentTarget.style.boxShadow = '0 12px 28px rgba(255,94,0,0.32)';
          }}
          onMouseLeave={e => {
            e.currentTarget.style.background = T.orange;
            e.currentTarget.style.transform = 'translateY(0)';
            e.currentTarget.style.boxShadow = '0 8px 24px rgba(255,94,0,0.25)';
          }}>
            Run your first challenge free
            <Icon d="M5 12h14M12 5l7 7-7 7" size={18} sw={2} />
          </a>
          <div style={{
            marginTop: 16, fontSize: 13.5, color: T.ink4, fontWeight: 500,
          }}>
            No credit card. No setup.
          </div>
        </div>

        {/* Right, teaser intelligence card */}
        <HeroIntelCard />
      </div>
    </section>
  );
};

const HeroIntelCard = () => (
  <div style={{ position: 'relative', minHeight: 480 }}>
    {/* Floating prompt above the card */}
    <div style={{
      position: 'absolute', top: -16, left: 12, zIndex: 2,
      background: T.paper,
      border: `1px solid ${T.border}`,
      borderRadius: 999,
      padding: '7px 14px 7px 10px',
      display: 'inline-flex', alignItems: 'center', gap: 10,
      boxShadow: '0 6px 18px rgba(15,43,26,0.08)',
      fontSize: 13,
    }}>
      <span style={{
        width: 22, height: 22, borderRadius: 6, background: T.greenLight,
        color: T.greenDark, display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Icon d={["M21 21l-4.35-4.35", "M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z"]} size={12} sw={2} />
      </span>
      <span className="mono" style={{ color: T.ink4, fontSize: 11, letterSpacing: 0.4 }}>YOU TYPED:</span>
      <span style={{ color: T.ink, fontWeight: 500 }}>Northwind Analytics</span>
    </div>

    {/* Main card */}
    <div style={{
      background: T.paper,
      borderRadius: 16,
      border: `1px solid ${T.border}`,
      boxShadow: '0 24px 60px rgba(15,43,26,0.10), 0 6px 18px rgba(15,43,26,0.05)',
      overflow: 'hidden',
      transform: 'rotate(0.6deg)',
      marginTop: 26,
    }}>
      <div style={{
        padding: '14px 20px',
        borderBottom: `1px solid ${T.borderSoft}`,
        background: T.paperOff,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div className="mono" style={{ fontSize: 11, color: T.ink4, letterSpacing: 0.6, textTransform: 'uppercase' }}>
          Company Intelligence
        </div>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          fontSize: 11.5, fontWeight: 600, color: T.greenDark,
        }}>
          <span style={{ width: 5, height: 5, borderRadius: '50%', background: T.green }} className="pulse-dot" />
          Researched · 47 sources
        </div>
      </div>

      <div style={{ padding: '20px 22px 22px' }}>
        <div className="mono" style={{ fontSize: 11, color: T.ink4, letterSpacing: 0.5, marginBottom: 14 }}>
          S-01 · DETECTED 12 MIN AGO
        </div>

        <div style={{
          fontSize: 16.5, fontWeight: 600, color: T.ink,
          lineHeight: 1.4, letterSpacing: -0.2, marginBottom: 10,
        }}>
          8 of your last 11 engineering hires focus on data infrastructure.
        </div>
        <div style={{
          fontSize: 14, lineHeight: 1.6, color: T.ink2, marginBottom: 16,
        }}>
          G2 reviews from the same period mention "slow reporting" 14 times.
          You're building what customers are asking for, but not fast enough,
          or not in the direction they expect.
        </div>

        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 18 }}>
          {['LinkedIn hiring', 'G2 reviews', 'Job postings'].map(src => (
            <span key={src} style={{
              fontSize: 11.5, fontWeight: 500, color: T.ink2,
              padding: '3px 9px', borderRadius: 6,
              background: T.greenTint,
              border: `1px solid ${T.borderSoft}`,
            }}>{src}</span>
          ))}
        </div>

        {/* Divider */}
        <div style={{
          height: 1,
          background: `linear-gradient(90deg, transparent, ${T.borderSoft}, transparent)`,
          marginBottom: 16,
        }} />

        {/* Drafted challenges section */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
          <span style={{
            width: 18, height: 18, borderRadius: 5,
            background: T.orange, color: 'white',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0,
          }}>
            <Icon d="M13 2L3 14h7l-1 8 10-12h-7l1-8z" size={10} sw={2} />
          </span>
          <span className="mono" style={{
            fontSize: 10.5, color: T.ink3, letterSpacing: 0.6, textTransform: 'uppercase', fontWeight: 600,
          }}>
            3 challenges drafted from this signal
          </span>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            {
              title: 'If we rebuilt reporting from scratch today, what would we leave out?',
              tag: 'Strategic', tagVariant: 'green',
              score: 'Trans 8/10', scoreVariant: 'amber',
            },
            {
              title: 'What is the slowest query our customers run, and what would 10x it?',
              tag: 'Quick Win', tagVariant: 'green',
              score: 'Inc 3/10', scoreVariant: 'mute',
            },
            {
              title: 'Which infra project, if we cancelled it tomorrow, would no customer notice?',
              tag: 'Strategic', tagVariant: 'green',
              score: '7/10', scoreVariant: 'amber',
            },
          ].map((c, i) => (
            <div key={i} style={{
              padding: '10px 12px', borderRadius: 8,
              background: 'rgba(255,94,0,0.045)',
              border: `1px solid rgba(255,94,0,0.14)`,
              transition: 'transform 200ms ease, box-shadow 200ms ease',
            }}>
              <div style={{
                fontSize: 13, fontWeight: 600, color: T.ink,
                lineHeight: 1.35, letterSpacing: -0.1,
                marginBottom: 8,
              }}>
                {c.title}
              </div>
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,
              }}>
                <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
                  <span style={{
                    fontSize: 10, fontWeight: 600, letterSpacing: 0.2,
                    padding: '2px 7px', borderRadius: 4,
                    background: T.greenLight, color: T.greenDark,
                  }}>{c.tag}</span>
                  <span style={{
                    fontSize: 10, fontWeight: 600, letterSpacing: 0.2,
                    padding: '2px 7px', borderRadius: 4,
                    background: c.scoreVariant === 'amber' ? T.amberBg : 'rgba(15,43,26,0.06)',
                    color: c.scoreVariant === 'amber' ? T.amber : T.ink3,
                  }}>{c.score}</span>
                </div>
                <button style={{
                  fontSize: 10.5, fontWeight: 600, letterSpacing: 0.2,
                  color: 'white', background: T.orange,
                  border: 'none',
                  padding: '4px 9px 4px 10px', borderRadius: 5,
                  cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'center', gap: 4,
                  flexShrink: 0,
                  boxShadow: '0 1px 2px rgba(255,94,0,0.25)',
                }}>
                  Get link
                  <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M5 12h14M13 5l7 7-7 7" />
                  </svg>
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>

    {/* Stacked second card (peek) */}
    <div aria-hidden style={{
      position: 'absolute', left: 24, right: 24, bottom: -10,
      height: 26, background: T.paper,
      border: `1px solid ${T.border}`,
      borderRadius: 12,
      boxShadow: '0 8px 20px rgba(15,43,26,0.06)',
      transform: 'rotate(-1deg)',
      zIndex: -1,
    }} />
    <div aria-hidden style={{
      position: 'absolute', left: 40, right: 40, bottom: -22,
      height: 18, background: T.paper,
      border: `1px solid ${T.border}`,
      borderRadius: 12,
      opacity: 0.7,
      transform: 'rotate(-1.6deg)',
      zIndex: -2,
    }} />

    {/* + 2 more chip */}
    <div style={{
      position: 'absolute', bottom: -40, right: 16,
      background: T.ink, color: 'white',
      padding: '7px 14px', borderRadius: 999,
      fontSize: 12, fontWeight: 600, letterSpacing: 0.2,
      boxShadow: '0 8px 20px rgba(15,43,26,0.18)',
    }}>
      + 2 more signals waiting
    </div>
  </div>
);

window.Hero = Hero;