// lp-hero.jsx — Dark hero section with full-fidelity product scene

function ProductScene() {
  const AVATAR_COLORS = { MC: '#8b82ff', LR: '#7be7c4', PS: '#ffb86b' };

  const s = {
    scene: {
      background: 'var(--ci-card)',
      border: '1px solid var(--ci-border)',
      borderRadius: 'calc(var(--ci-radius) * 2)',
      overflow: 'hidden',
      width: '100%',
      maxWidth: '480px',
      fontSize: '12px',
      fontFamily: 'var(--ci-font-sans)',
      boxShadow: 'none',
    },
    sceneHeader: {
      background: 'var(--ci-muted)',
      borderBottom: '1px solid var(--ci-border)',
      padding: '10px 14px',
      display: 'flex', alignItems: 'center', gap: '8px',
    },
    trafficDot: (c) => ({
      width: '8px', height: '8px', borderRadius: '50%', background: c,
    }),
    sceneBody: {
      padding: '16px',
      display: 'flex', flexDirection: 'column', gap: '12px',
    },
    opportunityCard: {
      background: 'var(--ci-muted)',
      border: '1px solid var(--ci-border)',
      borderRadius: 'var(--ci-radius)',
      padding: '12px 14px',
      display: 'flex', flexDirection: 'column', gap: '8px',
    },
    oppTop: {
      display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
    },
    oppRole: {
      fontSize: '13px', fontWeight: '600',
      color: 'var(--ci-foreground)', letterSpacing: '-0.2px',
    },
    oppCompany: {
      fontSize: '11px', color: 'var(--ci-muted-foreground)', marginTop: '1px',
    },
    badge: (color) => ({
      display: 'inline-flex', alignItems: 'center',
      height: '20px', padding: '0 8px',
      background: `color-mix(in srgb, ${color} 16%, transparent)`,
      color: color,
      border: `1px solid color-mix(in srgb, ${color} 28%, transparent)`,
      borderRadius: 'var(--ci-radius)',
      fontSize: '10px', fontWeight: '500',
      letterSpacing: '0.02em', whiteSpace: 'nowrap',
    }),
    deadlineRow: {
      display: 'flex', alignItems: 'center', gap: '6px',
    },
    deadlineDot: {
      width: '5px', height: '5px', borderRadius: '50%',
      background: 'var(--ci-warning)', flexShrink: 0,
    },
    deadlineText: {
      fontSize: '11px', color: 'var(--ci-muted-foreground)',
    },
    sectionLabel: {
      fontSize: '9px', fontWeight: '500',
      textTransform: 'uppercase', letterSpacing: '0.12em',
      color: 'var(--ci-muted-foreground)',
      marginBottom: '4px',
    },
    personRow: {
      display: 'flex', alignItems: 'flex-start', gap: '8px',
      padding: '8px 10px',
      background: 'var(--ci-muted)',
      border: '1px solid var(--ci-border)',
      borderRadius: 'var(--ci-radius)',
    },
    avatar: (key) => ({
      width: '26px', height: '26px',
      borderRadius: 'var(--ci-radius)',
      background: `color-mix(in srgb, ${AVATAR_COLORS[key]} 20%, transparent)`,
      color: AVATAR_COLORS[key],
      fontSize: '9px', fontWeight: '600',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
      border: `1px solid color-mix(in srgb, ${AVATAR_COLORS[key]} 30%, transparent)`,
    }),
    personInfo: { flex: 1 },
    personName: {
      fontSize: '11px', fontWeight: '500',
      color: 'var(--ci-foreground)', lineHeight: 1.2,
    },
    personContext: {
      fontSize: '10px', color: 'var(--ci-muted-foreground)',
      marginTop: '1px', lineHeight: 1.4,
    },
    journalEntry: {
      display: 'flex', gap: '7px', alignItems: 'flex-start',
      padding: '6px 0',
      borderBottom: '1px solid var(--ci-border)',
    },
    journalDot: {
      width: '4px', height: '4px', borderRadius: '50%',
      background: 'var(--ci-primary)',
      marginTop: '5px', flexShrink: 0,
    },
    journalText: {
      fontSize: '11px', color: 'var(--ci-foreground)',
      lineHeight: 1.5,
    },
    actionRow: {
      display: 'flex', alignItems: 'flex-start', gap: '8px',
      padding: '5px 0',
    },
    actionBox: {
      width: '12px', height: '12px',
      border: '1px solid var(--ci-border)',
      borderRadius: '2px', flexShrink: 0, marginTop: '2px',
      background: 'transparent',
    },
    actionText: {
      fontSize: '11px', color: 'var(--ci-foreground)', lineHeight: 1.4,
    },
  };

  const people = [
    { key: 'MC', name: 'Maya Chen', context: 'Former teammate · Can explain VP priorities' },
    { key: 'LR', name: 'Luis Romero', context: 'Coffee chat · Hiring manager concern flagged' },
    { key: 'PS', name: 'Priya Shah', context: 'Second-degree · Warm intro path available' },
  ];

  const journal = [
    'Recruiter asked for evidence of enterprise launch experience',
    'Maya flagged decision speed as the hiring team\'s biggest risk',
    'Luis said the team values crisp, specific customer examples',
  ];

  const actions = [
    'Draft intro ask to Maya',
    'Follow up with Luis on Thursday',
    'Attach enterprise launch story to application',
  ];

  return (
    <div style={s.scene}>
      {/* Window chrome */}
      <div style={s.sceneHeader}>
        <div style={s.trafficDot('#f87aa0')}></div>
        <div style={s.trafficDot('#ffb86b')}></div>
        <div style={s.trafficDot('#7be7c4')}></div>
        <span style={{ marginLeft: '8px', fontSize: '10px', fontWeight: '500', color: 'var(--ci-muted-foreground)', letterSpacing: '0.04em' }}>
          Pipeline · Northstar AI
        </span>
      </div>

      <div style={s.sceneBody}>
        {/* Opportunity card */}
        <div style={s.opportunityCard}>
          <div style={s.oppTop}>
            <div>
              <div style={s.oppRole}>Product Lead</div>
              <div style={s.oppCompany}>Northstar AI</div>
            </div>
            <span style={s.badge('var(--ci-primary)')}>Intro requested</span>
          </div>
          <div style={s.deadlineRow}>
            <div style={s.deadlineDot}></div>
            <span style={s.deadlineText}>Deadline: Thursday · 3 days remaining</span>
          </div>
        </div>

        {/* People */}
        <div>
          <div style={s.sectionLabel}>People in this search</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
            {people.map(p => (
              <div key={p.key} style={s.personRow}>
                <div style={s.avatar(p.key)}>{p.key}</div>
                <div style={s.personInfo}>
                  <div style={s.personName}>{p.name}</div>
                  <div style={s.personContext}>{p.context}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Journal */}
        <div>
          <div style={s.sectionLabel}>Journal context</div>
          <div style={{ border: '1px solid var(--ci-border)', borderRadius: 'var(--ci-radius)', padding: '8px 10px', background: 'var(--ci-muted)' }}>
            {journal.map((entry, i) => (
              <div key={i} style={{ ...s.journalEntry, borderBottom: i < journal.length - 1 ? '1px solid var(--ci-border)' : 'none', paddingBottom: i < journal.length - 1 ? '6px' : '0', marginBottom: i < journal.length - 1 ? '6px' : '0' }}>
                <div style={s.journalDot}></div>
                <span style={s.journalText}>{entry}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Next actions */}
        <div>
          <div style={s.sectionLabel}>Next actions</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
            {actions.map((a, i) => (
              <div key={i} style={s.actionRow}>
                <div style={s.actionBox}></div>
                <span style={s.actionText}>{a}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function LPHero({ ctaCopy }) {
  const s = {
    section: {
      background: 'var(--ci-background)',
      paddingTop: '120px',
      paddingBottom: '80px',
      position: 'relative',
      overflow: 'hidden',
    },
    inner: {
      maxWidth: 'var(--ci-container-max)',
      margin: '0 auto',
      padding: '0 var(--ci-container-pad)',
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: '64px',
      alignItems: 'center',
    },
    left: {
      display: 'flex', flexDirection: 'column', gap: '24px',
    },
    eyebrow: {
      display: 'inline-block',
      fontSize: '10px', fontWeight: '500',
      textTransform: 'uppercase', letterSpacing: '0.14em',
      color: 'var(--ci-primary)',
      background: 'color-mix(in srgb, var(--ci-primary) 12%, transparent)',
      border: '1px solid color-mix(in srgb, var(--ci-primary) 22%, transparent)',
      borderRadius: 'var(--ci-radius)',
      padding: '4px 10px',
      alignSelf: 'flex-start',
    },
    h1: {
      fontSize: 'clamp(28px, 4vw, 48px)',
      fontWeight: '500',
      lineHeight: 1.15,
      letterSpacing: '-0.6px',
      color: 'var(--ci-foreground)',
      margin: 0,
      textWrap: 'pretty',
    },
    subhead: {
      fontSize: '16px',
      fontWeight: '400',
      lineHeight: 1.65,
      color: 'var(--ci-muted-foreground)',
      margin: 0,
      maxWidth: '480px',
      textWrap: 'pretty',
    },
    ctaRow: {
      display: 'flex', alignItems: 'center', gap: '12px', flexWrap: 'wrap',
    },
    btnPrimary: {
      display: 'inline-flex', alignItems: 'center',
      height: '44px', padding: '0 20px',
      background: 'var(--ci-primary)',
      color: 'var(--ci-primary-foreground)',
      border: 'none', borderRadius: 'var(--ci-radius)',
      fontSize: '14px', fontWeight: '500',
      cursor: 'pointer', fontFamily: 'var(--ci-font-sans)',
      textDecoration: 'none',
      transition: 'opacity var(--ci-t-fast) var(--ci-ease)',
    },
    btnGhost: {
      display: 'inline-flex', alignItems: 'center',
      height: '44px', padding: '0 20px',
      background: 'transparent',
      color: 'var(--ci-muted-foreground)',
      border: '1px solid var(--ci-border)',
      borderRadius: 'var(--ci-radius)',
      fontSize: '14px', fontWeight: '500',
      cursor: 'pointer', fontFamily: 'var(--ci-font-sans)',
      textDecoration: 'none',
    },
    trustLine: {
      fontSize: '12px',
      color: 'var(--ci-muted-foreground)',
      lineHeight: 1.5,
      display: 'flex', alignItems: 'flex-start', gap: '6px',
    },
    lockIcon: { fontSize: '11px', marginTop: '1px', flexShrink: 0 },
    right: {
      display: 'flex', justifyContent: 'flex-end', alignItems: 'center',
      position: 'relative',
    },
    // Subtle glow behind scene
    glow: {
      position: 'absolute',
      width: '300px', height: '300px',
      borderRadius: '50%',
      background: 'color-mix(in srgb, var(--ci-primary) 8%, transparent)',
      filter: 'blur(80px)',
      top: '50%', left: '50%',
      transform: 'translate(-50%, -50%)',
      pointerEvents: 'none',
      zIndex: 0,
    },
    sceneWrap: { position: 'relative', zIndex: 1, width: '100%' },
    scrollHint: {
      position: 'absolute',
      bottom: '-48px',
      left: '50%', transform: 'translateX(-50%)',
      fontSize: '11px', color: 'var(--ci-muted-foreground)',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '6px',
    },
    scrollLine: {
      width: '1px', height: '32px',
      background: 'linear-gradient(to bottom, var(--ci-muted-foreground), transparent)',
    },
  };

  return (
    <section style={s.section} id="hero">
      <div style={s.inner} className="hero-inner">
        <div style={s.left} className="ci-hero-left">
          <span style={s.eyebrow}>Private career workspace for serious job searches</span>

          <h1 style={s.h1}>
            Run your job search through the people, notes, and follow-ups that actually move it.
          </h1>

          <p style={s.subhead}>
            ContextualIntel connects every application to the relationship context behind it: who you talked to, what they said, what you promised, and what needs to happen next.
          </p>

          <div style={s.ctaRow}>
            <a href="#trial-access" style={s.btnPrimary} className="ci-cta"
              onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
              onMouseLeave={e => e.currentTarget.style.opacity = '1'}>
              {ctaCopy} →
            </a>
            <a href="https://crm.contextualintel.com/sign-in" style={s.btnGhost} className="ci-cta">Sign In</a>
          </div>

          <div style={s.trustLine}>
            <span style={s.lockIcon}>▲</span>
            <span>No social feed. No public profile. Your applications, notes, contacts, and outreach stay private.</span>
          </div>
        </div>

        <div style={s.right} className="hero-right ci-hero-right">
          <div style={s.glow} className="ci-glow"></div>
          <div style={s.sceneWrap}>
            <ProductScene />
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LPHero, ProductScene });