// ScrollJob v2 — Company detail with reviews (public)

function V2CompanyDetailScreen() {
  const co = {
    name: 'Lavender House Care',
    cat: 'Healthcare',
    industry: 'Residential care · 24-bedroom home',
    hq: 'Bristol, UK',
    size: '32 staff',
    founded: '2008',
    rating: 4.2, reviewCount: 47, openJobs: 12,
  };
  const tabs = [
    ['about',    'About',         null],
    ['jobs',     'Open jobs',     co.openJobs],
    ['reviews',  'Reviews',       co.reviewCount, true],
    ['salaries', 'Salaries',      null],
  ];
  const breakdown = [
    ['Work-life balance', 4.5],
    ['Compensation',      3.9],
    ['Management',        4.0],
    ['Career growth',     3.7],
    ['Culture',           4.3],
  ];
  const reviews = [
    { role: 'Care Assistant', tenure: '2 years', verdict: 'Friendly home, supportive seniors', stars: 5,
      body: "I started with no experience and Lavender put me through NVQ Level 2 in my first year. The senior carers genuinely care about training new starters. Pay isn't the highest in the city but the team makes the difference.",
      helpful: 18, unhelpful: 2, when: '3 weeks ago' },
    { role: 'Senior Care Assistant', tenure: '4 years', verdict: 'Solid, but pay needs to catch up', stars: 4,
      body: 'The home itself is well-run and the residents are lovely. Management listens to feedback. The only complaint is pay has lagged behind the wider sector for the last two years — I had to push hard for my last rise.',
      helpful: 24, unhelpful: 4, when: '2 months ago' },
    { role: 'Night Care Assistant', tenure: '1 year', verdict: 'Quiet shifts, good for studying', stars: 5,
      body: "Night shifts here are calmer than the last home I worked in. The team rotates fairly, breaks are protected, and you can usually do a bit of reading on a quiet night. Family-feel home.",
      helpful: 9, unhelpful: 1, when: '4 months ago' },
  ];
  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <V2Header active="" />

      {/* Hero */}
      <section style={{
        background: V2.bgAlt, padding: '40px 0 28px',
        borderBottom: `1px solid ${V2.line}`,
      }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 32px' }}>
          <nav style={{ fontSize: 13, color: V2.muted, marginBottom: 14 }}>
            <a style={{ color: V2.muted, textDecoration: 'none' }}>Discover</a>
            <span style={{ margin: '0 8px' }}>·</span>
            <a style={{ color: V2.muted, textDecoration: 'none' }}>Companies</a>
            <span style={{ margin: '0 8px' }}>·</span>
            <span>{co.name}</span>
          </nav>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 22, marginBottom: 20 }}>
            <V2CompanyAvatar name={co.name} category={co.cat} size={96} radius={20} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8, flexWrap: 'wrap' }}>
                <h1 style={{ margin: 0, fontSize: 36, fontWeight: 800, color: V2.ink, letterSpacing: '-0.03em' }}>
                  {co.name}
                </h1>
                <VerifiedInline />
              </div>
              <div style={{ fontSize: 14.5, color: V2.text, marginBottom: 14, display: 'flex', flexWrap: 'wrap', gap: '6px 18px' }}>
                <V2CatPill name={co.cat} size="md" />
                <span>{co.industry}</span>
                <span>·  {co.hq}</span>
                <span>·  {co.size}</span>
                <span>·  Founded {co.founded}</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <StarRating value={co.rating} size="md" />
                <span style={{ fontSize: 15, fontWeight: 700, color: V2.ink }}>{co.rating}</span>
                <span style={{ fontSize: 13.5, color: V2.muted }}>
                  · {co.reviewCount} reviews · {co.openJobs} open jobs
                </span>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
              <V2Button variant="secondary" size="md" icon="share">Share</V2Button>
              <V2Button variant="primary" size="md" iconRight="arrow-right">See open jobs</V2Button>
            </div>
          </div>
          {/* Tabs */}
          <div style={{ display: 'flex', gap: 6, borderBottom: `1px solid ${V2.line}` }}>
            {tabs.map(([k, l, n, active]) => (
              <a key={k} style={{
                padding: '12px 18px', borderRadius: '8px 8px 0 0',
                borderBottom: `2px solid ${active ? V2.primary : 'transparent'}`,
                color: active ? V2.primary : V2.muted,
                fontWeight: active ? 700 : 500, fontSize: 14, marginBottom: -1,
                textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>
                {l}
                {n != null && <span style={{ fontSize: 12, color: active ? V2.primary : V2.faint }}>{n}</span>}
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Reviews tab content */}
      <main style={{ maxWidth: 1280, margin: '0 auto', padding: '28px 32px 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '380px minmax(0, 1fr)', gap: 28, alignItems: 'start' }}>
          {/* Sidebar: aggregate breakdown + CTA */}
          <aside style={{ position: 'sticky', top: 86, display: 'grid', gap: 14 }}>
            <div style={{
              background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 22,
              textAlign: 'center',
            }}>
              <div style={{ fontSize: 56, fontWeight: 800, color: V2.ink, letterSpacing: '-0.04em', lineHeight: 1 }}>
                {co.rating}
              </div>
              <div style={{ marginTop: 8, marginBottom: 6 }}>
                <StarRating value={co.rating} size="lg" />
              </div>
              <div style={{ fontSize: 13, color: V2.muted }}>Based on {co.reviewCount} verified reviews</div>
            </div>

            <div style={{
              background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 22,
            }}>
              <h3 style={{ margin: '0 0 14px', fontSize: 14, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
                Score breakdown
              </h3>
              {breakdown.map(([label, score]) => (
                <div key={label} style={{ marginBottom: 12 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5, fontSize: 13 }}>
                    <span style={{ color: V2.text, fontWeight: 500 }}>{label}</span>
                    <span style={{ color: V2.ink, fontWeight: 700 }}>{score}</span>
                  </div>
                  <div style={{ height: 6, background: V2.bgAlt, borderRadius: 999 }}>
                    <div style={{ width: `${(score / 5) * 100}%`, height: '100%', background: V2.primary, borderRadius: 999 }} />
                  </div>
                </div>
              ))}
            </div>

            <div style={{
              background: V2.primarySoft, border: `1px solid ${V2.primaryRing}`,
              borderRadius: V2.rLg, padding: 18,
            }}>
              <h3 style={{ margin: '0 0 8px', fontSize: 14, fontWeight: 700, color: V2.primaryInk }}>
                Worked here?
              </h3>
              <p style={{ margin: '0 0 14px', fontSize: 13, color: V2.text, lineHeight: 1.55 }}>
                Reviews are open to people who applied to {co.name} in the last 12 months. Sign in to write one.
              </p>
              <V2Button variant="primary" size="sm" icon="edit" full>Write a review</V2Button>
              <div style={{ marginTop: 10, fontSize: 11.5, color: V2.muted, lineHeight: 1.5 }}>
                Reviews are anonymous. We never show your name to the employer.
              </div>
            </div>
          </aside>

          {/* Reviews list */}
          <div>
            <header style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, flexWrap: 'wrap', gap: 12,
            }}>
              <h2 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
                Reviews · {co.reviewCount}
              </h2>
              <div style={{ display: 'flex', gap: 6 }}>
                {['Most recent', 'Most helpful', 'Highest', 'Lowest'].map((t, i) => (
                  <button key={t} style={{
                    padding: '7px 12px', borderRadius: 999, fontSize: 12.5, fontWeight: 600,
                    border: `1px solid ${i === 0 ? V2.ink : V2.line}`,
                    background: i === 0 ? V2.ink : '#fff', color: i === 0 ? '#fff' : V2.text,
                    cursor: 'pointer', fontFamily: V2.font,
                  }}>{t}</button>
                ))}
              </div>
            </header>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {reviews.map((r, i) => (
                <article key={i} style={{
                  background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 22,
                }}>
                  <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 14, marginBottom: 12 }}>
                    <div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
                        <StarRating value={r.stars} size="md" />
                        <span style={{ fontSize: 14, fontWeight: 700, color: V2.ink }}>{r.verdict}</span>
                      </div>
                      <div style={{ fontSize: 12.5, color: V2.muted }}>
                        {r.role} (anonymous) · {r.tenure} at {co.name} · {r.when}
                      </div>
                    </div>
                    <V2Badge tone="success" size="sm" icon="check">Verified applicant</V2Badge>
                  </header>
                  <p style={{ margin: '0 0 14px', fontSize: 14.5, color: V2.text, lineHeight: 1.65 }}>{r.body}</p>
                  <footer style={{
                    paddingTop: 12, borderTop: `1px solid ${V2.lineSoft}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8,
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: V2.muted }}>
                      <button style={voteBtn(true)}>
                        <Icon name="check" size={13} /> Helpful · {r.helpful}
                      </button>
                      <button style={voteBtn()}>
                        Not helpful · {r.unhelpful}
                      </button>
                    </div>
                    <a style={{ color: V2.muted, fontSize: 12.5, textDecoration: 'underline' }}>
                      Report
                    </a>
                  </footer>
                </article>
              ))}
            </div>

            <V2InfiniteSentinel loaded={3} total={47} />
            <V2EndOfResults />
          </div>
        </div>
      </main>

      <V2Footer />
    </div>
  );
}

function voteBtn(on) {
  return {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    padding: '6px 12px', borderRadius: 999,
    background: on ? V2.successBg : '#fff',
    color: on ? V2.success : V2.text,
    border: `1px solid ${on ? V2.successLine : V2.line}`,
    fontSize: 12.5, fontWeight: 600, cursor: 'pointer', fontFamily: V2.font,
  };
}

window.V2CompanyDetailScreen = V2CompanyDetailScreen;