// Opalus — Browse grid + project detail
const BR = window.OpalusDesignSystem_1dce4b;

function Heart({ filled }) {
  return (
    <svg viewBox="0 0 24 24" width="18" height="18" fill={filled ? 'var(--bronze-600)' : 'none'} stroke={filled ? 'var(--bronze-600)' : 'currentColor'} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 20s-7-4.35-9.3-8.5C1.2 8.7 2.6 5.5 5.7 5.2 7.7 5 9.2 6.1 12 8.8c2.8-2.7 4.3-3.8 6.3-3.6 3.1.3 4.5 3.5 3 6.3C19 15.65 12 20 12 20z"/>
    </svg>
  );
}

function fundingPct(p) { return Math.round((p.raised / p.target) * 100); }

/* ---------------- property card (2 tweakable styles) ---------------- */
function OpalusCard({ p, style, onOpen, elig }) {
  const { Badge, Button, ProgressBar } = BR;
  const [fav, setFav] = useState(false);
  const pctv = fundingPct(p);
  const ret = `${window.pct(p.returnLow)} – ${window.pct(p.returnHigh)}`;
  const data = style === 'data';
  return (
    <div onClick={onOpen} style={{ cursor: 'pointer', background: '#fff', border: '1px solid var(--border-faint)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-card)', transition: 'transform .2s var(--ease-out), box-shadow .2s var(--ease-out)', display: 'flex', flexDirection: 'column' }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = 'var(--shadow-lg)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'var(--shadow-card)'; }}>
      <div style={{ position: 'relative', height: data ? 150 : 196 }}>
        <img src={p.image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        <div style={{ position: 'absolute', top: 12, left: 12, display: 'flex', gap: 6 }}>
          <Badge tone="bronzeSolid" size="sm">{p.assetType}</Badge>
          {p.status !== 'Live' && <window.StatusBadge status={p.status} />}
        </div>
        <button type="button" onClick={(e) => { e.stopPropagation(); setFav(!fav); }} style={{ position: 'absolute', top: 10, right: 10, width: 34, height: 34, borderRadius: '50%', background: 'rgba(255,255,255,0.92)', border: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'var(--gray-500)' }}><Heart filled={fav} /></button>
        <div style={{ position: 'absolute', left: 12, bottom: 12 }}><window.RiskBadge level={p.risk} /></div>
      </div>
      {elig && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, background: 'var(--surface-inset)', borderBottom: '1px solid var(--border-faint)', padding: '8px 16px' }}>
          <BR.IconlyRegularLightLock style={{ width: 13, height: 13, color: 'var(--text-muted)', flex: '0 0 auto' }} />
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, fontWeight: 500, color: 'var(--text-muted)' }}>{elig.copy}</span>
        </div>
      )}
      <div style={{ padding: data ? '14px 16px 16px' : '18px 18px 18px', display: 'flex', flexDirection: 'column', gap: data ? 10 : 13, flex: 1 }}>
        <div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: data ? 16 : 18, color: 'var(--ink)', margin: 0, letterSpacing: 'var(--ls-tight)' }}>{p.title}</h3>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginTop: 4, color: 'var(--text-muted)', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-xs)' }}>
            <BR.IconlyRegularLightLocation style={{ width: 14, height: 14 }} />{p.location}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 0, background: data ? 'transparent' : 'var(--cream-100)', borderRadius: 'var(--radius-md)', padding: data ? 0 : '12px 14px' }}>
          {[['Projected return', ret, 'var(--bronze-600)'], ['Term', `${p.term} mo`, 'var(--ink)'], ['Min', window.eur(p.min), 'var(--ink)']].map(([l, v, c], i) => (
            <div key={l} style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2, borderLeft: i ? '1px solid var(--border-faint)' : 'none', paddingLeft: i ? 12 : 0 }}>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 10.5, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{l}</span>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: i === 0 ? 14 : 13, fontWeight: 600, color: c }}>{v}</span>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 'auto' }}>
          <ProgressBar value={pctv} height={7} track="gray" showPercent={false} />
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 7, fontFamily: 'var(--font-body)', fontSize: 12 }}>
            <span style={{ color: 'var(--text-strong)', fontWeight: 600 }}>{window.compact(p.raised)} <span style={{ color: 'var(--text-muted)', fontWeight: 400 }}>of {window.compact(p.target)}</span></span>
            <span style={{ color: 'var(--text-muted)' }}>{p.investors} investors</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------------- browse screen ---------------- */
function BrowseScreen() {
  const { state, go, t } = window.useOpalus();
  const [asset, setAsset] = useState('All');
  const [risk, setRisk] = useState('All');
  const [eligibleOnly, setEligibleOnly] = useState(false);
  const [sort, setSort] = useState('featured');
  const assets = ['All', 'Residential', 'Commercial', 'Mixed Use', 'Land'];
  const risks = ['All', 'Low', 'Medium'];
  // Logged-out visitors see every project with marketing-level info and NO eligibility markers (BRD §7.5);
  // markers appear only once the user has registered and completed KYC.
  const guest = !state.signedIn;
  const elig = (p) => (guest ? null : window.projectEligibility(state, p));
  let list = window.OPALUS_PROJECTS.filter((p) => (asset === 'All' || p.assetType === asset) && (risk === 'All' || p.risk === risk) && (!eligibleOnly || !elig(p)));
  // Sort options per BRD §7.5 — projected return, minimum investment, term.
  const SORTS = { return: (a, b) => b.returnHigh - a.returnHigh, min: (a, b) => a.min - b.min, term: (a, b) => a.term - b.term };
  if (SORTS[sort]) list = [...list].sort(SORTS[sort]);

  const Chip = ({ active, children, onClick }) => (
    <button type="button" onClick={onClick} style={{ cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-xs)', fontWeight: active ? 600 : 400, padding: '8px 15px', borderRadius: 'var(--radius-pill)', border: `1px solid ${active ? 'var(--bronze-500)' : 'var(--border-subtle)'}`, background: active ? 'var(--bronze-600)' : '#fff', color: active ? '#fff' : 'var(--text-body)', transition: 'all .15s var(--ease-out)' }}>{children}</button>
  );

  return (
    <div className="opx-container opx-fade">
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16, marginBottom: 8, flexWrap: 'wrap' }}>
        <div>
          <window.Eyebrow>Our Investment Properties · Paris, France</window.Eyebrow>
          <h1 className="opx-section-title" style={{ marginTop: 8 }}>Explore opportunities</h1>
        </div>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>{list.length} live & recently funded</span>
      </div>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', color: 'var(--text-body)', maxWidth: 640, margin: '0 0 22px' }}>A curated selection of high-performing real estate opportunities, each vetted by the Opalus credit committee and offered with a Key Investment Information Sheet.</p>

      {guest && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap', background: 'var(--cream-100)', border: '1px solid var(--bronze-300)', borderRadius: 'var(--radius-lg)', padding: '14px 18px', marginBottom: 22 }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-body)', lineHeight: 1.55, flex: 1, minWidth: 260 }}>You're browsing as a visitor. Every project is shown with public marketing information; the Key Investment Information Sheet, full disclosures and investing require a verified account. <span className="opx-link" onClick={(e) => { e.stopPropagation(); go('register'); }}>Conflicts-of-interest register (Art 8(2))</span></span>
          <BR.Button variant="primary" size="sm" onClick={() => go('welcome')}>Sign in or create an account</BR.Button>
        </div>
      )}

      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginBottom: 26, alignItems: 'center' }}>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>{assets.map((a) => <Chip key={a} active={asset === a} onClick={() => setAsset(a)}>{a}</Chip>)}</div>
        <div style={{ width: 1, background: 'var(--border-faint)', alignSelf: 'stretch' }} />
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>{risks.map((r) => <Chip key={r} active={risk === r} onClick={() => setRisk(r)}>{r === 'All' ? 'All risk' : r + ' risk'}</Chip>)}</div>
        <select value={sort} onChange={(e) => setSort(e.target.value)} style={{ cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-xs)', padding: '8px 12px', borderRadius: 'var(--radius-pill)', border: '1px solid var(--border-subtle)', background: '#fff', color: 'var(--text-body)', outline: 'none' }}>
          <option value="featured">Sort · Featured</option>
          <option value="return">Highest projected return</option>
          <option value="min">Lowest minimum</option>
          <option value="term">Shortest term</option>
        </select>
        {!guest && (
          <label style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 9, cursor: 'pointer' }} onClick={() => setEligibleOnly(!eligibleOnly)}>
            <span style={{ width: 42, height: 24, borderRadius: 999, background: eligibleOnly ? 'var(--bronze-600)' : 'var(--gray-300)', position: 'relative', transition: 'background .15s', flex: '0 0 auto' }}><span style={{ position: 'absolute', top: 3, left: eligibleOnly ? 21 : 3, width: 18, height: 18, borderRadius: '50%', background: '#fff', transition: 'left .15s' }} /></span>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600, color: 'var(--text-body)' }}>Eligible for me</span>
          </label>
        )}
      </div>

      {list.length === 0 ? (
        <div style={{ padding: '48px 0', textAlign: 'center', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>No projects are currently open to you. <span className="opx-link" onClick={() => setEligibleOnly(false)}>Clear the filter</span> to see everything that's listed.</div>
      ) : (
        <div className="opx-grid-3">
          {list.map((p) => <OpalusCard key={p.id} p={p} style={t.cardStyle} elig={elig(p)} onOpen={() => go('project', { id: p.id })} />)}
        </div>
      )}
    </div>
  );
}

/* ---------------- project detail ---------------- */
function ProjectScreen() {
  const { state, go } = window.useOpalus();
  const { Button, Badge, Card, ProgressBar } = BR;
  const p = window.OPALUS_PROJECTS.find((x) => x.id === state.route.params.id) || window.OPALUS_PROJECTS[0];
  const [hero, setHero] = useState(p.gallery[0]);
  const [trModal, setTrModal] = useState(false);
  const [trState, setTrState] = useState('idle'); // idle | sent | declined
  const [trLang, setTrLang] = useState('German');
  const pctv = fundingPct(p);
  const funded = p.status === 'Funded';
  // Guests see public marketing info with no eligibility marker; KIIS, documents and investing
  // require a signed-in, verified account (BRD §7.5/§7.6).
  const guest = !state.signedIn;
  const gate = guest ? null : window.projectEligibility(state, p);
  const remaining = Math.max(0, p.target - p.raised);
  const belowMin = !funded && remaining > 0 && remaining < p.min;
  const riskFactors = [
    ['Loss of capital', 'Crowdfunding investments can fail entirely. You may lose all of the money you invest.'],
    ['Illiquidity', 'There is no secondary market at v1. You may be unable to exit before the project ends.'],
    ['No compensation scheme', 'Your investment is not covered by any deposit-guarantee or investor-compensation scheme.'],
    ['Construction & market risk', 'Build costs, timelines and property values can move against the project.'],
  ];
  const terms = [
    ['Projected return', `${window.pct(p.returnLow)} – ${window.pct(p.returnHigh)}`, 'var(--bronze-600)'],
    ['Term', `${p.term} months`, 'var(--ink)'],
    ['Equity offered', `${p.equityOffered}%`, 'var(--ink)'],
    ['Instrument', p.instrument, 'var(--ink)'],
    ['Returns', p.payout, 'var(--ink)'],
    ['Minimum', window.eur(p.min), 'var(--ink)'],
  ];

  return (
    <div className="opx-container opx-fade">
      <button type="button" onClick={() => go('browse')} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-body)', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', marginBottom: 18, padding: 0 }}>
        <BR.IconlyRegularOutlineArrowLeft style={{ width: 18, height: 18 }} /> All opportunities
      </button>

      <div className="opx-detail opx-stack">
        {/* LEFT */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <div>
            <div style={{ borderRadius: 'var(--radius-xl)', overflow: 'hidden', height: 380, position: 'relative' }}>
              <img src={hero} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              <div style={{ position: 'absolute', top: 16, left: 16, display: 'flex', gap: 8 }}>
                <Badge tone="bronzeSolid">{p.assetType}</Badge>
                <Badge tone="cream">{p.nature}</Badge>
                <window.RiskBadge level={p.risk} size="md" />
              </div>
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 10 }}>
              {p.gallery.map((g) => (
                <button type="button" key={g} onClick={() => setHero(g)} style={{ width: 92, height: 64, borderRadius: 'var(--radius-md)', overflow: 'hidden', border: `2px solid ${hero === g ? 'var(--bronze-600)' : 'transparent'}`, cursor: 'pointer', padding: 0, background: 'none' }}>
                  <img src={g} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                </button>
              ))}
            </div>
          </div>

          <div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-h1)', color: 'var(--ink)', margin: 0, letterSpacing: 'var(--ls-tight)' }}>{p.title}</h1>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 8, color: 'var(--text-body)', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)' }}>
              <BR.IconlyRegularLightLocation style={{ width: 16, height: 16 }} />{p.location}
            </div>
          </div>

          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', lineHeight: 1.7, color: 'var(--text-body)', margin: 0, textWrap: 'pretty' }}>{p.summary}</p>

          <Card padding="lg" radius="lg" shadow="sm">
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-h4)', color: 'var(--ink)', margin: '0 0 16px' }}>Key terms</h3>
            <div className="opx-grid-3" style={{ gap: 18 }}>
              {terms.map(([l, v, c]) => (
                <div key={l} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{l}</span>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 600, color: c }}>{v}</span>
                </div>
              ))}
            </div>
          </Card>

          <div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-h4)', color: 'var(--ink)', margin: '0 0 14px' }}>Why this opportunity</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {p.highlights.map((h) => (
                <div key={h} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <span style={{ width: 26, height: 26, borderRadius: '50%', background: 'var(--cream-100)', color: 'var(--bronze-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto', fontSize: 13, fontWeight: 700 }}>✓</span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', color: 'var(--text-body)', lineHeight: 1.55, paddingTop: 3 }}>{h}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Risk factors (INV-14) */}
          <div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-h4)', color: 'var(--ink)', margin: '0 0 14px' }}>Risk factors</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {riskFactors.map(([t2, d]) => (
                <div key={t2} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '12px 14px', border: '1px solid var(--border-faint)', borderRadius: 'var(--radius-md)', background: 'var(--surface-inset)' }}>
                  <span style={{ color: 'var(--danger-600)', fontWeight: 700, flex: '0 0 auto', marginTop: 1 }}>!</span>
                  <div><div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, fontWeight: 600, color: 'var(--ink)' }}>{t2}</div><div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-body)', lineHeight: 1.5 }}>{d}</div></div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* RIGHT · sticky invest panel */}
        <div style={{ position: 'sticky', top: 104, display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Card padding="lg" radius="xl" shadow="card" border style={{ padding: 26 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
              <window.Eyebrow>Projected annual return</window.Eyebrow>
              <window.StatusBadge status={p.status} size="md" />
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 40, color: 'var(--bronze-600)', letterSpacing: 'var(--ls-tight)', margin: '4px 0 18px' }}>{window.pct(p.returnLow)}–{window.pct(p.returnHigh)}</div>

            <ProgressBar value={pctv} label="Funding progress" track="cream" />
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, marginBottom: 18 }}>
              <div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--ink)' }}>{window.compact(p.raised)}</div><div style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--text-muted)' }}>raised of {window.compact(p.target)}</div></div>
              <div style={{ textAlign: 'right' }}><div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--ink)' }}>{p.investors}</div><div style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--text-muted)' }}>investors</div></div>
            </div>

            <Button variant="primary" block disabled={funded || (gate && !gate.step)} onClick={() => { if (guest) go('welcome'); else if (!gate) go('invest', { id: p.id }); else if (gate.step) go(gate.step); }} trailingIcon={!funded && !gate && <BR.IconlyRegularLightArrowRight style={{ width: 18, height: 18 }} />}>{funded ? 'Fully funded' : guest ? 'Sign in to invest' : gate ? gate.copy : 'Invest in this project'}</Button>
            {funded
              ? <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)', textAlign: 'center', marginTop: 10 }}>This project is fully funded and no longer accepting investments.</div>
              : belowMin
              ? <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)', textAlign: 'center', marginTop: 10 }}>The remaining allocation is below this project's minimum investment. The offer is effectively fully subscribed.</div>
              : <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)', textAlign: 'center', marginTop: 10 }}>From {window.eur(p.min)} · EUR · 4-day reflection period applies</div>}
          </Card>

          {/* KIIS block (INV-14) — guests see a sign-in gate; KIIS requires a verified account (BRD §7.5) */}
          <Card padding="lg" radius="lg" shadow="sm">
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-micro)', fontWeight: 600, letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--gray-600)', marginBottom: 6 }}>Key Investment Information Sheet</div>
            {guest ? (
              <>
                <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', background: 'var(--surface-inset)', border: '1px solid var(--border-faint)', borderRadius: 'var(--radius-md)', padding: '13px 15px' }}>
                  <BR.IconlyRegularLightLock style={{ width: 17, height: 17, color: 'var(--text-muted)', flex: '0 0 auto', marginTop: 1 }} />
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-body)', lineHeight: 1.55 }}>The KIIS and full disclosures are available to signed-in, verified investors.</span>
                </div>
                <div style={{ marginTop: 12, textAlign: 'center' }}><span className="opx-link" style={{ fontSize: 12.5 }} onClick={() => go('welcome')}>Sign in to read the KIIS</span></div>
              </>
            ) : (
              <>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-body)', marginBottom: 14, lineHeight: 1.5 }}>Version 3 · 14 May 2026. Read it in full before investing. The Lithuanian original is the authoritative version (Art 23(2)); English and French are translations.</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <Button variant="soft" size="sm" block leadingIcon={<BR.IconlyRegularLightDownload style={{ width: 16, height: 16, color: 'var(--bronze-700)' }} />}>Download KIIS — Lietuvių (original)</Button>
                  <Button variant="soft" size="sm" block leadingIcon={<BR.IconlyRegularLightDownload style={{ width: 16, height: 16, color: 'var(--bronze-700)' }} />}>Download KIIS (English)</Button>
                  <Button variant="soft" size="sm" block leadingIcon={<BR.IconlyRegularLightDownload style={{ width: 16, height: 16, color: 'var(--bronze-700)' }} />}>Download KIIS (Français)</Button>
                </div>
                {trState === 'idle' && <div style={{ marginTop: 12, textAlign: 'center' }}><span className="opx-link" style={{ fontSize: 12.5 }} onClick={() => setTrModal(true)}>Request the KIIS in another language</span></div>}
                {trState === 'sent' && <div style={{ marginTop: 12 }}><window.Note tone="success" title="Request sent">We'll respond within 3 business days and notify you either way.</window.Note></div>}
                {trState === 'declined' && <div style={{ marginTop: 12 }}><window.Note tone="warn" title="Translation unavailable" icon={<span style={{ fontWeight: 700 }}>!</span>}>We are unable to arrange this translation. <b>We advise you to refrain from investing in this project</b> if you cannot fully understand the Key Investment Information Sheet.</window.Note></div>}
              </>
            )}
          </Card>

          <Card padding="lg" radius="lg" shadow="sm">
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-micro)', fontWeight: 600, letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--gray-600)', marginBottom: 12 }}>Documents</div>
            {guest ? (
              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', background: 'var(--surface-inset)', border: '1px solid var(--border-faint)', borderRadius: 'var(--radius-md)', padding: '13px 15px' }}>
                <BR.IconlyRegularLightLock style={{ width: 17, height: 17, color: 'var(--text-muted)', flex: '0 0 auto', marginTop: 1 }} />
                <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-body)', lineHeight: 1.55 }}>Project documents are available to signed-in, verified investors.</span>
              </div>
            ) : (
              [['Independent valuation report', 'PDF · 2.1 MB'], ['Share subscription & SPV terms', 'PDF · 760 KB']].map(([t2, m], i) => (
                <div key={t2} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 0', borderTop: i ? '1px solid var(--border-faint)' : 'none' }}>
                  <span style={{ width: 36, height: 36, borderRadius: 'var(--radius-md)', background: 'var(--cream-100)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}><BR.IconlyRegularLightPaper style={{ width: 18, height: 18, color: 'var(--bronze-600)' }} /></span>
                  <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600, color: 'var(--text-strong)' }}>{t2}</div><div style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: 'var(--text-muted)' }}>{m}</div></div>
                  <BR.IconlyRegularLightDownload style={{ width: 18, height: 18, color: 'var(--bronze-600)', cursor: 'pointer' }} />
                </div>
              ))
            )}
          </Card>
        </div>
      </div>

      {/* Translation request modal (INV-14) */}
      {trModal && (
        <div onClick={() => setTrModal(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(1,5,32,0.5)', zIndex: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
          <div onClick={(e) => e.stopPropagation()} style={{ background: '#fff', borderRadius: 'var(--radius-xl)', padding: 30, width: '100%', maxWidth: 440, boxShadow: 'var(--shadow-lg)' }}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, color: 'var(--ink)', margin: '0 0 18px' }}>Request the KIIS in another language</h3>
            <window.Field label="Which language do you need?">
              <select className="opx-amount" style={{ fontSize: 15, fontWeight: 500 }} value={trLang} onChange={(e) => setTrLang(e.target.value)}>
                {['German', 'Spanish', 'Italian', 'Dutch', 'Portuguese', 'Polish'].map((l) => <option key={l}>{l}</option>)}
              </select>
            </window.Field>
            <div style={{ marginTop: 14 }}>
              <window.Field label="Anything we should know? (optional)">
                <textarea className="opx-amount" style={{ fontSize: 14, fontWeight: 400, minHeight: 72, resize: 'vertical', fontFamily: 'var(--font-body)' }} />
              </window.Field>
            </div>
            <div style={{ display: 'flex', gap: 12, marginTop: 20 }}>
              <Button variant="primary" onClick={() => { setTrModal(false); setTrState(trLang === 'Polish' ? 'declined' : 'sent'); }}>Send request</Button>
              <Button variant="ghost" onClick={() => setTrModal(false)}>Cancel</Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { BrowseScreen, ProjectScreen, opalusFundingPct: fundingPct });