// landing-sections-1.jsx — Nav, Hero, Problem rails
const I1 = window.LandingIcons;

function Nav({ onPrimary }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.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="#top" className="brand">
          <div className="brand-mark">ih</div>
          <div className="brand-name">internalhire<span>.work</span></div>
        </a>
        <div className="nav-links">
          <a href="#product" className="nav-link">Product</a>
          <a href="#how" className="nav-link">How it works</a>
          <a href="#compare" className="nav-link">vs. legacy</a>
          <a href="#pricing" className="nav-link">Pricing</a>
          <a href="#security" className="nav-link">Security</a>
        </div>
        <div className="nav-cta">
          <a href="/sign-in.html" className="btn ghost sm">Sign in</a>
          <button className="btn accent sm" onClick={onPrimary}>Book a 30-min walkthrough</button>
        </div>
      </div>
    </nav>
  );
}

function Hero({ headline, onPrimary }) {
  // headline is array of segments; supports plain / accent / strike
  const renderHeadline = () => headline.map((seg, i) => {
    if (typeof seg === 'string') return <React.Fragment key={i}>{seg}</React.Fragment>;
    return <span key={i} className={seg.kind}>{seg.text}</span>;
  });
  return (
    <section className="hero" id="top">
      <div className="container hero-grid">
        <div>
          <div className="hero-eyebrow">
            <span className="dot"></span>
            India-built · Made for global enterprises
          </div>
          <h1>{renderHeadline()}</h1>
          <p className="hero-sub serif">
            LinkedIn's 2026 Top Companies — JPMorgan, Microsoft, Bank of America — all share one move: filling thousands of roles from the inside. internalhire.work gives the other 95% of enterprises the skill graph, concierge, and audit trail to do the same — in 21 days, not 21 months.
          </p>
          <div className="hero-cta-row">
            <button className="btn accent lg" onClick={onPrimary}>
              Book a 30-min walkthrough <I1.arrow size={15} />
            </button>
            <a href="#product" className="btn lg">See it move →</a>
          </div>
          <div className="hero-trust">
            <div className="hero-trust-item"><I1.shield size={13} color="#2F8F5F" /> SOC 2 Type II · ISO 27001</div>
            <div className="hero-trust-item"><I1.lock size={13} color="#2F8F5F" /> Data residency: Mumbai · Frankfurt · Virginia</div>
            <div className="hero-trust-item"><I1.zap size={13} color="#E85D2F" /> Live in 21 days</div>
          </div>
        </div>
        <div className="hero-visual">
          <div style={{ position: 'absolute', inset: 0 }}>
            <HeroVisual />
          </div>
        </div>
      </div>
    </section>
  );
}

// Stylized hero illustration: skill-graph + match-ring + concierge bubble
function HeroVisual() {
  const chips = [
    ['Python', '#1A1F25', 'white'],
    ['LLM eval', '#E85D2F', 'white'],
    ['Pipelines', '#1A1F25', 'white'],
    ['Roadmap', '#F0ECE2', '#3A4046'],
    ['Prioritization', '#F0ECE2', '#3A4046'],
    ['+12', '#FAFAF7', '#9AA1AB'],
  ];
  return (
    <div className="hero-visual-inner">
      {/* match ring — anchored top-right */}
      <div className="hv-ring">
        <svg viewBox="0 0 200 200" className="hv-ring-svg">
          <circle cx="100" cy="100" r="88" fill="none" stroke="#F0ECE2" strokeWidth="14"/>
          <circle cx="100" cy="100" r="88" fill="none" stroke="#E85D2F" strokeWidth="14"
                  strokeDasharray={`${0.84 * 553} 553`} strokeLinecap="round"
                  transform="rotate(-90 100 100)" />
        </svg>
        <div className="hv-ring-label">
          <div className="hv-ring-eyebrow">MATCH SCORE</div>
          <div className="hv-ring-num">84</div>
          <div className="hv-ring-cap">Riya → ML Platform PM</div>
        </div>
      </div>

      {/* concierge card — bottom-left, slight tilt */}
      <div className="hv-concierge">
        <div className="hv-concierge-head">
          <div className="hv-concierge-icon">
            <I1.sparkles size={13} />
          </div>
          <div className="hv-concierge-title">Concierge</div>
          <div className="hv-concierge-time">0.6s</div>
        </div>
        <div className="hv-concierge-body">
          "She's 2 skills short — closeable in 90 days via a gig with the platform pod."
        </div>
      </div>

      {/* skill chips card — top-left */}
      <div className="hv-skills">
        <div className="hv-skills-eyebrow">Skill graph · Riya</div>
        <div className="hv-skills-chips">
          {chips.map((c, i) => (
            <span key={i} className="hv-chip" style={{
              background: c[1], color: c[2],
              border: c[1] === '#FAFAF7' ? '1px dashed #D8D2C0' : 'none'
            }}>{c[0]}</span>
          ))}
        </div>
      </div>

      {/* +1 hire ping */}
      <div className="hv-ping">
        <span className="hv-ping-dot"></span>
        +1 internal hire
      </div>
    </div>
  );
}

function Problem() {
  const rails = [
    {
      visual: <Vis15Percent />,
      title: 'Only 15% of your employees feel encouraged to move inside.',
      body: 'Yet 73% want visibility into open roles. The gap between what people want and what they can see is the gap your competitors are recruiting through, on LinkedIn, every Tuesday.',
      stat: ['LinkedIn 2023 Workplace Learning Report', '15%', 'employees encouraged to move internally'],
    },
    {
      visual: <VisCeiling />,
      title: 'The invisible ceiling is the #1 driver of high attrition.',
      body: 'When an person is hired for a role a high performer was qualified for, the message lands unmistakably: to grow, you must go. Replacing them runs 50–200% of salary.',
      stat: ['SHRM · Deloitte', '50–200%', 'of salary to replace one departure'],
    },
    {
      visual: <VisHoard />,
      title: 'Managers hoard the talent that should be moving.',
      body: 'LinkedIn research names manager reluctance to release high performers as the top barrier to internal mobility. So your best people leave the company, because they can\'t leave the team.',
      stat: ['Surveyed talent leaders · LinkedIn', '#1', 'barrier to internal recruiting'],
    },
    {
      visual: <VisSkillsShift />,
      title: 'Skills shifted 25% since 2015. You evaluate only once a year.',
      body: 'Skill requirements are projected to change 65% by 2030. Self-attested surveys can\'t keep up. The skill graph has to infer continuously, from the systems people already work in.',
      stat: ['LinkedIn skills research', '65%', 'projected job-skill change by 2030'],
    },
    {
      visual: <VisReskillCost />,
      title: 'Reskilling is 2.5× cheaper than hiring outside. Almost no one does it.',
      body: 'Only 38% of recruiters search inside before going external. Internal hires reach full productivity in 3 months versus 6, and stay 41% longer when there\'s a real path.',
      stat: ['Wharton · SHRM · LinkedIn', '2.5×', 'cheaper to reskill than to hire externally'],
    },
    {
      visual: <VisEquity />,
      title: 'Equity becomes a quarterly slide instead of a live signal.',
      body: 'Underrepresented employees consistently name “lack of career opportunities” as the #1 reason they leave. You learn the skew of a pod when it\'s already on the board pack, six hires and three promotions too late.',
      stat: ['Cited in LinkedIn · Delta · OneTen reporting', '#1', 'reason underrepresented talent leaves'],
    },
  ];
  return (
    <section className="warm" id="problem">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow accent">Why now</div>
          <h2>Career growth is being rewritten. Most companies haven't noticed.</h2>
          <p>
            LinkedIn's 2026 Top Companies share one trait: internal mobility is no longer a perk, it's the primary growth path. Bank of America fills thousands of roles internally each year. JPMorgan and Microsoft thread training and movement into everyday work. Everyone else is paying a recruitment premium for talent they already employ — in six predictable ways.
          </p>
        </div>
        <div className="rails-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
          {rails.map((r, i) => (
            <div className="rail-card" key={i}>
              <div className="rail-visual">{r.visual}</div>
              <div className="rail-num">0{i+1} / 06</div>
              <h3 className="serif">{r.title}</h3>
              <p>{r.body}</p>
              <div className="rail-stat">
                <strong>{r.stat[1]}</strong> · {r.stat[2]}<br/>
                <span style={{ color: 'var(--ink-4)' }}>{r.stat[0]}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.LandingS1 = { Nav, Hero, Problem };

// ==========================================
// Problem-rail visuals — 6 distinct SVG dataviz pieces
// each ~ full-width × 110-128px, sits in the rail-visual band
// palette: accent #E85D2F · ink #1A1F25 · ink-3 #6B7280 · band #FAF6EC · soft #E8E2D0
// ==========================================

// 1. Only 15% encouraged → 6 figures, 1 highlighted moving up, 5 grayed-stuck
function Vis15Percent() {
  return (
    <svg viewBox="0 0 320 128" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
      {[0,1,2,3,4,5].map(i => {
        const x = 32 + i * 50;
        const lit = i === 0;
        const c = lit ? '#E85D2F' : '#C8C2B0';
        return (
          <g key={i}>
            {/* head */}
            <circle cx={x} cy={lit ? 50 : 70} r="7.5" fill={c} />
            {/* body */}
            <rect x={x-9} y={lit ? 60 : 80} width="18" height="22" rx="3" fill={c} />
            {/* arrow up for the lit one */}
            {lit && (
              <g stroke="#E85D2F" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round">
                <path d={`M ${x} 38 L ${x} 26`} />
                <path d={`M ${x-5} 31 L ${x} 26 L ${x+5} 31`} />
              </g>
            )}
            {/* baseline tick */}
            <line x1={x-12} y1="100" x2={x+12} y2="100" stroke={lit ? '#E85D2F' : '#D8D2C0'} strokeWidth="1.5" />
          </g>
        );
      })}
      <text x="32" y="118" fontSize="9.5" fill="#9AA1AB" fontFamily="JetBrains Mono" letterSpacing="0.05em">1 OF 6 · MOVING</text>
    </svg>
  );
}

// 2. Invisible ceiling → arrow ascending, hits a hard ceiling line, falls back
function VisCeiling() {
  return (
    <svg viewBox="0 0 320 128" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
      {/* ceiling line */}
      <line x1="20" y1="34" x2="300" y2="34" stroke="#1A1F25" strokeWidth="2" strokeDasharray="2 4" />
      <text x="20" y="26" fontSize="9.5" fill="#1A1F25" fontFamily="JetBrains Mono" letterSpacing="0.04em">CEILING</text>
      {/* upward arrow that bounces */}
      <path d="M 60 110 Q 100 55 140 40" fill="none" stroke="#E85D2F" strokeWidth="2.5" strokeLinecap="round" />
      {/* impact burst */}
      <g transform="translate(140 38)">
        <circle r="3" fill="#E85D2F" />
        {[0,1,2,3,4].map(i => {
          const a = (i * 72 - 90) * Math.PI / 180;
          const x1 = Math.cos(a) * 6, y1 = Math.sin(a) * 6;
          const x2 = Math.cos(a) * 11, y2 = Math.sin(a) * 11;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#E85D2F" strokeWidth="2" strokeLinecap="round" />;
        })}
      </g>
      {/* deflection — falling away */}
      <path d="M 145 45 Q 200 80 260 102" fill="none" stroke="#C8C2B0" strokeWidth="2" strokeLinecap="round" strokeDasharray="3 4" />
      <g stroke="#C8C2B0" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" transform="translate(258 100)">
        <path d="M -5 -3 L 0 2 L 5 -3" />
      </g>
      <text x="220" y="120" fontSize="9.5" fill="#9AA1AB" fontFamily="JetBrains Mono" letterSpacing="0.04em">EXIT →</text>
    </svg>
  );
}

// 3. Manager hoarding → a closed box with people-dots inside, lock symbol
function VisHoard() {
  return (
    <svg viewBox="0 0 320 128" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
      {/* manager box */}
      <rect x="60" y="32" width="160" height="68" rx="4" fill="#FAF6EC" stroke="#1A1F25" strokeWidth="2" />
      {/* trapped dots */}
      {[
        [92, 56], [120, 56], [148, 56], [176, 56],
        [92, 80], [120, 80], [148, 80], [176, 80],
      ].map(([x,y], i) => (
        <circle key={i} cx={x} cy={y} r="6" fill="#C8C2B0" />
      ))}
      {/* lock at top */}
      <g transform="translate(140 24)">
        <path d="M -5 0 V -4 a 5 5 0 0 1 10 0 V 0" fill="none" stroke="#1A1F25" strokeWidth="1.8" />
        <rect x="-7" y="0" width="14" height="9" rx="1.5" fill="#1A1F25" />
      </g>
      {/* one trying to escape on the right */}
      <g transform="translate(244 66)">
        <circle cx="0" cy="-3" r="6" fill="#E85D2F" />
        <rect x="-7" y="5" width="14" height="14" rx="2" fill="#E85D2F" />
        <g stroke="#E85D2F" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round">
          <path d="M -22 1 L -10 1" />
          <path d="M -15 -4 L -10 1 L -15 6" />
        </g>
      </g>
      <text x="60" y="118" fontSize="9.5" fill="#9AA1AB" fontFamily="JetBrains Mono" letterSpacing="0.04em">TEAM · LOCKED</text>
      <text x="246" y="118" fontSize="9.5" fill="#E85D2F" fontFamily="JetBrains Mono" letterSpacing="0.04em">QUITS</text>
    </svg>
  );
}

// 4. Skills shifted → line chart 25% (2015) → 65% (2030), shaded area
function VisSkillsShift() {
  // y-axis: 0 at bottom (108), 100% at top (28)
  const y = (pct) => 108 - (pct / 100) * 80;
  // points along time
  const pts = [
    [40, y(0)],   // 2015 baseline
    [85, y(10)],
    [130, y(25)],
    [175, y(40)],
    [220, y(55)],
    [270, y(65)],
  ];
  const path = pts.map((p,i) => (i===0?'M':'L') + p[0] + ' ' + p[1]).join(' ');
  const areaPath = path + ` L ${pts[pts.length-1][0]} 108 L ${pts[0][0]} 108 Z`;
  return (
    <svg viewBox="0 0 320 128" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
      {/* baseline */}
      <line x1="40" y1="108" x2="290" y2="108" stroke="#D8D2C0" strokeWidth="1" />
      {/* gridline at 65% */}
      <line x1="40" y1={y(65)} x2="290" y2={y(65)} stroke="#E5E1D6" strokeWidth="1" strokeDasharray="2 3" />
      {/* shaded area */}
      <path d={areaPath} fill="#E85D2F" fillOpacity="0.12" />
      {/* line */}
      <path d={path} fill="none" stroke="#E85D2F" strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
      {/* end dot */}
      <circle cx={pts[pts.length-1][0]} cy={pts[pts.length-1][1]} r="4.5" fill="#E85D2F" />
      {/* labels */}
      <text x="40" y="122" fontSize="9.5" fill="#9AA1AB" fontFamily="JetBrains Mono" letterSpacing="0.04em">2015</text>
      <text x="263" y="122" fontSize="9.5" fill="#9AA1AB" fontFamily="JetBrains Mono" letterSpacing="0.04em">2030</text>
      <text x="280" y={y(65)-6} fontSize="11" fill="#1A1F25" fontWeight="600" fontFamily="JetBrains Mono" textAnchor="end">+65%</text>
      <text x="148" y={y(25)-6} fontSize="9.5" fill="#9AA1AB" fontFamily="JetBrains Mono" textAnchor="middle">+25%</text>
    </svg>
  );
}

// 5. Reskill 2.5× cheaper → two bars, one tall (external) one short (internal)
function VisReskillCost() {
  return (
    <svg viewBox="0 0 320 128" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
      {/* baseline */}
      <line x1="20" y1="104" x2="300" y2="104" stroke="#D8D2C0" strokeWidth="1" />
      {/* External bar — tall, gray */}
      <rect x="48" y="22" width="80" height="82" fill="#1A1F25" />
      <text x="88" y="14" fontSize="10" fill="#1A1F25" fontWeight="600" fontFamily="JetBrains Mono" textAnchor="middle">₹100</text>
      <text x="88" y="120" fontSize="9.5" fill="#9AA1AB" fontFamily="JetBrains Mono" textAnchor="middle" letterSpacing="0.04em">EXTERNAL</text>
      {/* Internal bar — short, accent */}
      <rect x="194" y="71" width="80" height="33" fill="#E85D2F" />
      <text x="234" y="63" fontSize="10" fill="#E85D2F" fontWeight="600" fontFamily="JetBrains Mono" textAnchor="middle">₹40</text>
      <text x="234" y="120" fontSize="9.5" fill="#9AA1AB" fontFamily="JetBrains Mono" textAnchor="middle" letterSpacing="0.04em">RESKILL</text>
      {/* multiplier connector */}
      <g stroke="#1A1F25" strokeWidth="1.2" fill="none">
        <path d="M 134 50 L 154 50" strokeLinecap="round" />
        <path d="M 168 50 L 188 50" strokeLinecap="round" />
      </g>
      <text x="161" y="54" fontSize="13" fill="#1A1F25" fontWeight="700" fontFamily="JetBrains Mono" textAnchor="middle">2.5×</text>
    </svg>
  );
}

// 6. Equity quarterly vs live → 4 sparse blocks (quarterly) vs continuous heartbeat line (live)
function VisEquity() {
  // top: quarterly — 4 wide rectangles separated
  // bottom: live — continuous heartbeat
  const heartbeat = "M 22 96 L 60 96 L 70 80 L 80 110 L 90 78 L 100 96 L 140 96 L 150 86 L 160 102 L 170 96 L 220 96 L 230 82 L 240 110 L 250 80 L 260 96 L 298 96";
  return (
    <svg viewBox="0 0 320 128" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
      {/* quarterly row */}
      <text x="22" y="22" fontSize="9.5" fill="#9AA1AB" fontFamily="JetBrains Mono" letterSpacing="0.04em">QUARTERLY</text>
      {[0,1,2,3].map(i => (
        <g key={i}>
          <rect x={22 + i*72} y="32" width="58" height="14" rx="2" fill="#C8C2B0" />
          <text x={51 + i*72} y="42.5" fontSize="9" fill="#FAF6EC" fontFamily="JetBrains Mono" textAnchor="middle" fontWeight="600">Q{i+1}</text>
        </g>
      ))}
      {/* divider */}
      <line x1="22" y1="62" x2="298" y2="62" stroke="#E5E1D6" strokeWidth="1" strokeDasharray="2 4" />
      {/* live row */}
      <text x="22" y="78" fontSize="9.5" fill="#E85D2F" fontFamily="JetBrains Mono" letterSpacing="0.04em">LIVE</text>
      <path d={heartbeat} fill="none" stroke="#E85D2F" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
    </svg>
  );
}