// landing-sections-2.jsx — Live preview, Personas, Skill graph
const I2 = window.LandingIcons;

// ---------- Live preview screens ----------

function ScreenRiya() {
  return (
    <>
      <div className="psc-eyebrow">Tuesday, May 5</div>
      <div className="psc-title">Welcome back, Riya.</div>
      <p className="psc-sub">3 new things to look at. Profile freshness is 94%. Your skill graph re-synced 12 minutes ago.</p>
      <div className="psc-card feature">
        <div className="psc-row">
          <Ring value={0.84} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', gap: 6, marginBottom: 6 }}>
              <span className="psc-tag accent">Top match · New today</span>
              <span className="psc-tag">Internal</span>
            </div>
            <div style={{ fontFamily: 'Source Serif 4', fontSize: 17, fontWeight: 500, letterSpacing: '-0.005em' }}>Senior PM, ML Platform</div>
            <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>Bangalore · ML Platform pod · Hiring manager: Arjun Mehta</div>
            <p style={{ fontFamily: 'Source Serif 4', fontSize: 13, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 8, marginBottom: 0 }}>
              You're 2 skills short of the role — closeable in 90 days via a gig with the platform pod. The concierge has drafted the plan.
            </p>
          </div>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 10 }}>
        <div className="psc-card">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span className="psc-tag green">Gig · 8 wk</span>
            <Ring value={0.71} size={36} />
          </div>
          <div style={{ fontFamily: 'Source Serif 4', fontSize: 14, fontWeight: 500, marginTop: 8 }}>LLM Eval Harness</div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>Closes 2 of 4 gaps</div>
        </div>
        <div className="psc-card">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span className="psc-tag">Mentor</span>
            <Ring value={0.68} size={36} />
          </div>
          <div style={{ fontFamily: 'Source Serif 4', fontSize: 14, fontWeight: 500, marginTop: 8 }}>1:1 with Saanvi</div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>IC → PM transition</div>
        </div>
      </div>
    </>
  );
}

function ScreenArjun() {
  return (
    <>
      <div className="psc-eyebrow">Tuesday, May 5 · ML Platform pod</div>
      <div className="psc-title">Hi Arjun, 3 things need a decision today.</div>
      <p className="psc-sub">Riya applied to your hardest-to-fill req. 2 other candidates are mid-pipeline. Your other reqs are all green.</p>
      <div className="psc-card" style={{ marginBottom: 10 }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
          <Ring value={0.84} />
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
              <span style={{ fontFamily: 'Source Serif 4', fontSize: 16, fontWeight: 500 }}>Riya Sharma</span>
              <span className="psc-tag accent">Internal · stretch fit</span>
            </div>
            <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>Senior Data Engineer · TC3 · 4.2 yrs · Hyderabad</div>
            <p style={{ fontFamily: 'Source Serif 4', fontSize: 12, color: 'var(--ink-2)', margin: '8px 0 0', lineHeight: 1.55 }}>
              Strong on platform fundamentals; closing 2 PM-craft gaps via 90-day plan she's already started.
            </p>
          </div>
          <button className="psc-tag accent" style={{ alignSelf: 'center', padding: '6px 12px', fontSize: 11 }}>Shortlist →</button>
        </div>
      </div>
      <div className="psc-card" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <Ring value={0.79} size={44} />
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'Source Serif 4', fontSize: 14, fontWeight: 500 }}>Karan Thapar · External</div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>5.5 yrs · ex-Razorpay · 6 weeks to onboard</div>
        </div>
        <span className="psc-tag">In screening</span>
      </div>
      <div className="psc-card" style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 10 }}>
        <Ring value={0.74} size={44} />
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'Source Serif 4', fontSize: 14, fontWeight: 500 }}>Meera Krishnan · Internal</div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>Lead Eng, Payments · open to lateral</div>
        </div>
        <span className="psc-tag amber">Manager nudge</span>
      </div>
    </>
  );
}

function ScreenVikram() {
  return (
    <>
      <div className="psc-eyebrow">Board view · CHRO</div>
      <div className="psc-title">₹4.2 Cr saved YTD · 134 external reqs displaced.</div>
      <p className="psc-sub">FY26 lands at ₹6.1 Cr against a ₹16 Cr external recruiting budget — a 38% offset.</p>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 12 }}>
        <div className="psc-card" style={{ padding: '20px 22px' }}>
          <div className="psc-eyebrow" style={{ fontSize: 10 }}>Internal-fill rate</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 6 }}>
            <span style={{ fontFamily: 'Source Serif 4', fontSize: 44, fontWeight: 500, letterSpacing: '-0.02em' }}>41%</span>
            <span style={{ fontSize: 12, color: 'var(--green)', fontWeight: 600 }}>+24 pts vs. plan</span>
          </div>
          <Sparkline />
          <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 6 }}>Trailing 12 months · all BUs</div>
        </div>
        <div className="psc-card" style={{ padding: '20px 22px' }}>
          <div className="psc-eyebrow" style={{ fontSize: 10 }}>Equity lens</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
            <span style={{ fontFamily: 'Source Serif 4', fontSize: 32, fontWeight: 500 }}>2</span>
            <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>flagged pods</span>
          </div>
          <p style={{ fontSize: 11, color: 'var(--ink-2)', margin: '8px 0 0', lineHeight: 1.55 }}>
            ML Platform: women representation moved 18% → 12% over 8 weeks. 30-min review queued with Aditi.
          </p>
        </div>
      </div>
      <div className="psc-card" style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 14, padding: '14px 18px' }}>
        <div style={{ width: 38, height: 38, borderRadius: 10, background: '#FBEEE6', display: 'grid', placeItems: 'center', color: '#E85D2F' }}>
          <I2.shield size={18} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'Source Serif 4', fontSize: 14, fontWeight: 500 }}>Audit trail · 100% coverage</div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>Every move ranked, rationale on file. DPDP + EU AI Act ready.</div>
        </div>
        <span className="psc-tag green">Compliant</span>
      </div>
    </>
  );
}

function Ring({ value, size = 56 }) {
  const r = size/2 - 4;
  const c = 2 * Math.PI * r;
  const off = c - c * value;
  const pct = Math.round(value * 100);
  return (
    <div className="psc-ring" style={{ width: size, height: size }}>
      <svg viewBox={`0 0 ${size} ${size}`}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="#F0ECE2" strokeWidth="4"/>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="#E85D2F" strokeWidth="4"
                strokeDasharray={c} strokeDashoffset={off} strokeLinecap="round" />
      </svg>
      <div className="psc-ring-num" style={{ fontSize: size > 48 ? 14 : 11 }}>{pct}</div>
    </div>
  );
}

function Sparkline() {
  const pts = [22, 18, 24, 21, 26, 30, 28, 33, 35, 38, 36, 41];
  const max = 45, min = 14;
  const w = 220, h = 38;
  const path = pts.map((p, i) => {
    const x = (i / (pts.length-1)) * w;
    const y = h - ((p - min) / (max - min)) * h;
    return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(' ');
  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', marginTop: 12, height: 38 }}>
      <path d={`${path} L${w},${h} L0,${h} Z`} fill="rgba(232,93,47,0.08)"/>
      <path d={path} fill="none" stroke="#E85D2F" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
}

// ---------- Personas (live preview) ----------
function Personas() {
  const [active, setActive] = React.useState('riya');
  const personas = [
    { id: 'riya', name: 'Riya · Employee', role: 'Senior Data Engineer · TC3', q: '"How do I move into PM without a pay hit?"', marker: 'STAKEHOLDER 01' },
    { id: 'arjun', name: 'Arjun · Manager', role: 'Eng Manager, ML Platform · TC4', q: '"Who can I move into my team this quarter?"', marker: 'STAKEHOLDER 02' },
    { id: 'vikram', name: 'Vikram · CHRO', role: 'Chief Human Resources Officer', q: '"Show me the ROI of  your  product one screen."', marker: 'STAKEHOLDER 03' },
  ];
  return (
    <section id="product">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow accent">The product · live</div>
          <h2>One skill graph. Three flows. Every move ends in a decision.</h2>
          <p>
            Click between personas. Same data, three viewpoints — and three different next actions. No demo video, no sandbox login. This is the actual product.
          </p>
        </div>
        <div className="persona-tabs">
          {personas.map(p => (
            <button key={p.id} className={`persona-tab ${active === p.id ? 'active' : ''}`} onClick={() => setActive(p.id)}>
              <div className="persona-marker">{p.marker}</div>
              <div className="persona-name serif">{p.name}</div>
              <div className="persona-role">{p.role}</div>
              <div className="persona-q">{p.q}</div>
            </button>
          ))}
        </div>
        <div className="preview-wrap">
          <div className="preview-tabs">
            <div className="preview-traffic"><span></span><span></span><span></span></div>
            {personas.map(p => (
              <button key={p.id} className={`preview-tab ${active === p.id ? 'active' : ''}`} onClick={() => setActive(p.id)}>
                {p.id === 'riya' ? 'Home — Riya' : p.id === 'arjun' ? 'Shortlist — Arjun' : 'Board — Vikram'}
              </button>
            ))}
            <div className="preview-url">internalhire.work / r / {active}</div>
          </div>
          <div className="preview-body">
            <div className={`preview-screen ${active === 'riya' ? 'active' : ''}`}><ScreenRiya/></div>
            <div className={`preview-screen ${active === 'arjun' ? 'active' : ''}`}><ScreenArjun/></div>
            <div className={`preview-screen ${active === 'vikram' ? 'active' : ''}`}><ScreenVikram/></div>
            <div className="preview-toast">
              <span className="dot"></span>
              {active === 'riya' && 'Skill graph re-synced · 12s ago'}
              {active === 'arjun' && '1 new applicant · 8s ago'}
              {active === 'vikram' && 'Equity lens · auto-refreshed'}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Skill graph explainer ----------
function SkillGraph() {
  return (
    <section className="warm" id="how">
      <div className="container skillgraph-grid">
        <div>
          <div className="eyebrow accent">How it works</div>
          <h2 className="serif" style={{ fontFamily: 'Source Serif 4', fontSize: 44, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.05, margin: '14px 0 18px' }}>
            A skill graph that <span style={{ color: 'var(--accent)', fontStyle: 'italic' }}>infers continuously</span> from the work people already do.
          </h2>
          <p style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.55, margin: '0 0 36px' }}>
            We don't ask employees to fill out yet another self-assessment. We connect to the systems that already know.
          </p>
          <ul className="sg-list">
            {[
              ['01','Connect 9 sources in 21 days', 'GitHub, Jira, Greenhouse, Lattice, your HRIS, your LMS, plus 3 more. Read-only. No re-keying.'],
              ['02','Infer skills from artifacts, not surveys', 'Code reviews, ticket flows, doc authorship, sprint demos. The graph updates when work updates.'],
              ['03','Match with rationale every regulator can read', 'Each match comes with a why-this-role paragraph, the evidence behind it, and a closeable-gap plan. Audit-ready.'],
              ['04','Employees own every signal', 'Disconnect, pause, or attest at any time. DPDP and EU AI Act compliance is a starting point, not a feature.'],
            ].map(([n, t, b]) => (
              <li className="sg-item" key={n}>
                <div className="num">{n}</div>
                <div>
                  <h4>{t}</h4>
                  <p>{b}</p>
                </div>
              </li>
            ))}
          </ul>
        </div>
        <div className="sg-viz">
          <SkillGraphViz/>
        </div>
      </div>
    </section>
  );
}

function SkillGraphViz() {
  // Person at center, sources around, skills inferred outward
  const sources = [
    { x: 80, y: 50, label: 'GitHub' },
    { x: 280, y: 60, label: 'Jira' },
    { x: 320, y: 200, label: 'Greenhouse' },
    { x: 280, y: 340, label: 'Lattice' },
    { x: 80, y: 340, label: 'HRIS' },
    { x: 40, y: 200, label: 'LMS' },
  ];
  const skills = [
    { x: 200, y: 30, label: 'Python', strong: true },
    { x: 360, y: 130, label: 'LLM eval', strong: true },
    { x: 360, y: 270, label: 'Pipelines', strong: true },
    { x: 200, y: 370, label: 'Roadmap', strong: false },
    { x: 40, y: 270, label: 'Mentoring' },
    { x: 40, y: 130, label: 'Prioritization' },
  ];
  return (
    <svg viewBox="0 0 400 400" style={{ width: '100%', height: '100%' }}>
      {/* lines from sources to center */}
      {sources.map((s, i) => (
        <line key={'l1'+i} x1={s.x} y1={s.y} x2="200" y2="200" stroke="#D8D2C0" strokeWidth="1" strokeDasharray="3 3"/>
      ))}
      {/* lines from center to skills */}
      {skills.map((s, i) => (
        <line key={'l2'+i} x1="200" y1="200" x2={s.x} y2={s.y} stroke={s.strong ? '#E85D2F' : '#D8D2C0'} strokeWidth={s.strong ? 1.5 : 1} opacity={s.strong ? 0.9 : 0.5}/>
      ))}
      {/* sources */}
      {sources.map((s, i) => (
        <g key={'s'+i}>
          <circle cx={s.x} cy={s.y} r="22" fill="white" stroke="#D8D2C0"/>
          <text x={s.x} y={s.y+4} textAnchor="middle" fontSize="9" fill="#3A4046" fontFamily="Inter" fontWeight="500">{s.label}</text>
        </g>
      ))}
      {/* center person */}
      <circle cx="200" cy="200" r="34" fill="#1A1F25"/>
      <text x="200" y="195" textAnchor="middle" fontSize="10" fill="rgba(255,255,255,0.55)" fontFamily="JetBrains Mono">RIYA</text>
      <text x="200" y="210" textAnchor="middle" fontSize="9" fill="white" fontFamily="Inter">Skill graph</text>
      {/* skills */}
      {skills.map((s, i) => (
        <g key={'k'+i}>
          <rect x={s.x-30} y={s.y-9} width="60" height="18" rx="4" fill={s.strong ? '#E85D2F' : 'white'} stroke={s.strong ? '#E85D2F' : '#D8D2C0'}/>
          <text x={s.x} y={s.y+3} textAnchor="middle" fontSize="9" fill={s.strong ? 'white' : '#3A4046'} fontFamily="Inter" fontWeight="500">{s.label}</text>
        </g>
      ))}
      {/* live label */}
      <g transform="translate(200,395)">
        <rect x="-60" y="-12" width="120" height="20" rx="10" fill="#1A1F25"/>
        <circle cx="-44" cy="-2" r="3" fill="#5DBC72"/>
        <text x="-32" y="2" fontSize="9" fill="white" fontFamily="JetBrains Mono">live · 9 sources</text>
      </g>
    </svg>
  );
}

window.LandingS2 = { Personas, SkillGraph };