/* =============================================================
   Hans — DossierPanel (the live activation brief on the right)
   ============================================================= */

function DossierPanel({ ip }) {
  return (
    <aside className="hans-dossier">
      <div className="hans-dossier__head">
        <div className="ll-tag" style={{ color: 'var(--ll-stone)' }}>ACTIVATION BRIEF</div>
        <button className="hans-iconbtn" aria-label="Expand"><i className="ph ph-arrow-square-out" /></button>
      </div>

      <h3 className="hans-dossier__title">{ip.title}</h3>
      <div className="hans-dossier__url">{ip.url}</div>

      <Section title="AUDIENCE" right={<span className="hans-dossier__pill hans-dossier__pill--ok">Confirmed</span>}>
        <Row label="Size" value="218K · 12% deeply engaged" />
        <Row label="Demo" value="22–35 · global · LA / SG / Berlin" />
        <Row label="Theme" value="Dark fantasy · sketchwave · indie horror" />
      </Section>

      <Section title="FORM FACTOR" right={<span className="hans-dossier__pill">Drafted</span>}>
        <Row label="Type" value="Popup residency · 7 nights" />
        <Row label="Capacity" value="200–300 / night" />
        <Row label="Window" value="June 8–14, 2026" />
      </Section>

      <Section title="ECONOMICS" right={<span className="hans-dossier__pill hans-dossier__pill--warn">Modeling</span>}>
        <Row label="Budget band" value="$ 85k–120k" />
        <Row label="Ticket projection" value="$ 62k @ 78% sell" />
        <Row label="Merch projection" value="$ 24k · low-vol drop" />
        <Row label="Sponsor potential" value="$ 35k–60k · 2 brands" />
      </Section>

      <Section title="VENUE">
        <Row label="Top match" value="The Projector · 94" />
        <Row label="Shortlisted" value="3 of 12 reviewed" />
      </Section>

      <div className="hans-dossier__footer">
        <button className="hans-btn hans-btn--gradient">
          Hand off to Worldbldr <i className="ph ph-arrow-right" />
        </button>
        <div className="hans-dossier__updated">UPDATED 14:32 · LIVE</div>
      </div>
    </aside>
  );
}

function Section({ title, right, children }) {
  return (
    <div className="hans-dossier__section">
      <div className="hans-dossier__sectionhead">
        <span className="ll-tag" style={{ color: 'var(--ll-ink)' }}>{title}</span>
        {right}
      </div>
      <div className="hans-dossier__rows">{children}</div>
    </div>
  );
}

function Row({ label, value }) {
  return (
    <div className="hans-dossier__row">
      <span className="hans-dossier__rowlabel">{label}</span>
      <span className="hans-dossier__rowvalue">{value}</span>
    </div>
  );
}

Object.assign(window, { DossierPanel });