/* Section C. 7 distinct handoff routes per spec.
   C.1 Triage-based · C.2 In-workflow consult · C.3 Document review (LegalZoom pathway)
   C.4 Limited-scope · C.5 Full representation · C.6 A2A referral · C.7 Crisis routing */

const HANDOFF_ROUTES = [
  {
    id: 'consult', code: 'C.2',
    title: 'In-workflow attorney consult',
    short: 'Pause and get an attorney\'s read',
    desc: 'Available from any workflow step. 15-minute initial chat is free; longer consults are priced.',
    options: [
      { label: '15-min initial chat', price: 'Free', time: 'Same-day', highlight: true },
      { label: '30-min consult', price: '$79', time: 'Within 24h' },
      { label: '60-min strategy session', price: '$149', time: 'Scheduled' },
    ],
    icon: Icons.user, tone: THEME.blue,
  },
  {
    id: 'review', code: 'C.3',
    title: 'Document review',
    short: 'Have an attorney review before you file',
    desc: 'The LegalZoom-settlement pathway. Reviewing attorney provides written feedback. You decide what to incorporate. Attorney does not file or appear.',
    options: [
      { label: '5-day standard review', price: '$99', time: '5 business days' },
      { label: '48-hour rush', price: '$179', time: '48 hours', highlight: true },
      { label: '24-hour priority', price: '$249', time: '24 hours' },
    ],
    icon: Icons.doc, tone: THEME.success, sla: true,
  },
  {
    id: 'limited', code: 'C.4',
    title: 'Limited-scope representation',
    short: 'Hire an attorney for part of the case',
    desc: 'Attorney handles a defined slice (e.g., just the hearing, just discovery). Engagement letter and scope defined in-platform.',
    options: [
      { label: 'Hearing representation only', price: 'From $450', time: 'By hearing date' },
      { label: 'Discovery only', price: 'From $750', time: 'Per scope' },
      { label: 'Settlement negotiation only', price: 'From $350', time: 'Per scope' },
    ],
    icon: Icons.scale, tone: THEME.accent,
  },
  {
    id: 'full', code: 'C.5',
    title: 'Full representation',
    short: 'Hand off the entire matter',
    desc: 'Attorney takes over. Files appearance, takes over communications. Your account converts to "represented" status.',
    options: [
      { label: 'Flat-fee small claims', price: 'From $899', time: 'To resolution' },
      { label: 'Hourly engagement', price: '$185–$450/hr', time: 'Retainer' },
      { label: 'Contingency (eligible matters)', price: '25–40%', time: 'On recovery' },
    ],
    icon: Icons.shield, tone: THEME.blue,
  },
  {
    id: 'referral', code: 'C.6',
    title: 'Attorney-to-attorney referral',
    short: 'When the right attorney isn\'t the one you have',
    desc: 'Reviewing attorney recognizes the matter is beyond their expertise or jurisdiction. Refers to another verified attorney. Referral fee handling per jurisdictional rules.',
    options: [
      { label: 'In-network referral', price: 'Per jurisdiction', time: '24h match' },
    ],
    icon: Icons.link, tone: THEME.textDim,
  },
  {
    id: 'crisis', code: 'C.7',
    title: 'Escalation & crisis routing',
    short: 'When speed matters most',
    desc: 'Triggered automatically by keyword and pattern detection: imminent deadlines, criminal exposure, domestic violence, ICE detention, custody emergencies. Workflow pauses; specialized resources surfaced.',
    options: [
      { label: 'Crisis-matter intake', price: 'Free', time: 'Same-day', highlight: true },
      { label: 'National DV Hotline', price: '1-800-799-7233', time: '24/7' },
      { label: 'Specialized attorney directory', price: 'Curated', time: 'Same-day' },
    ],
    icon: Icons.alert, tone: THEME.danger, urgent: true,
  },
];

const HandoffV2 = ({ jx, onBack, initialRoute }) => {
  const [active, setActive] = React.useState(initialRoute || HANDOFF_ROUTES[0].id);
  const route = HANDOFF_ROUTES.find(r => r.id === active);

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      {/* Header */}
      <div style={{ padding: '24px 32px 16px', borderBottom: `1px solid ${THEME.line}` }}>
        <div onClick={onBack} style={{ fontSize: 12, color: THEME.textDim, marginBottom: 8, cursor: 'pointer' }}>← Back to my matter</div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 600 }}>
              Section C · The Handoff Layer
            </div>
            <div style={{ fontFamily: 'Fraunces', fontSize: 30, color: THEME.text, fontWeight: 500, letterSpacing: -0.6, lineHeight: 1.1, marginTop: 4 }}>
              Get attorney help. Seven ways
            </div>
            <div style={{ fontSize: 13, color: THEME.textDim, marginTop: 6, maxWidth: 640, lineHeight: 1.5 }}>
              The handoff layer is the connective tissue between you and a verified attorney. Pick the right kind of help -
              from a 15-minute free chat to full representation. <span style={{ color: THEME.text, fontWeight: 500 }}>You decide; we route.</span>
            </div>
          </div>
        </div>
      </div>

      <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
        {/* Route list */}
        <div style={{
          width: 320, padding: 18, borderRight: `1px solid ${THEME.line}`,
          overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 6,
        }}>
          {HANDOFF_ROUTES.map(r => {
            const a = active === r.id;
            return (
              <div key={r.id} onClick={() => setActive(r.id)} style={{
                padding: '11px 13px', borderRadius: 10, cursor: 'pointer',
                background: a ? (THEME.mode === 'dark' ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.6)') : 'transparent',
                border: `1px solid ${a ? r.tone + '50' : 'transparent'}`,
                display: 'flex', alignItems: 'flex-start', gap: 11,
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 9, flexShrink: 0,
                  background: r.tone + '20', border: `1px solid ${r.tone}40`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon d={r.icon} size={14} stroke={r.tone}/>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                    <div style={{ fontSize: 9.5, color: THEME.textMute, letterSpacing: 0.6, fontWeight: 700 }}>{r.code}</div>
                    {r.urgent && <div style={{ fontSize: 9, padding: '1px 5px', borderRadius: 3, background: r.tone, color: '#fff', fontWeight: 700, letterSpacing: 0.5 }}>CRISIS</div>}
                  </div>
                  <div style={{ fontSize: 13, color: THEME.text, fontWeight: 600, marginBottom: 3 }}>{r.title}</div>
                  <div style={{ fontSize: 11.5, color: THEME.textDim, lineHeight: 1.4 }}>{r.short}</div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Detail */}
        <div style={{ flex: 1, padding: 28, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: route.tone + '20', border: `1px solid ${route.tone}40`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon d={route.icon} size={20} stroke={route.tone}/>
              </div>
              <div>
                <div style={{ fontSize: 10.5, color: THEME.textMute, letterSpacing: 1.2, fontWeight: 600 }}>HANDOFF · {route.code}</div>
                <div style={{ fontFamily: 'Fraunces', fontSize: 22, color: THEME.text, fontWeight: 500, letterSpacing: -0.3 }}>
                  {route.title}
                </div>
              </div>
            </div>
            <div style={{ fontSize: 13.5, color: THEME.textDim, lineHeight: 1.6, marginTop: 12 }}>
              {route.desc}
            </div>
          </div>

          {/* Options */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {route.options.map((opt, i) => (
              <div key={i} style={{
                padding: '14px 16px', borderRadius: 11, cursor: 'pointer',
                background: opt.highlight
                  ? (THEME.mode === 'dark' ? 'rgba(105,134,191,0.10)' : 'rgba(105,134,191,0.08)')
                  : THEME.surface,
                border: `1.5px solid ${opt.highlight ? THEME.blue : THEME.line}`,
                display: 'flex', alignItems: 'center', gap: 14,
              }}>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
                    <div style={{ fontSize: 13.5, color: THEME.text, fontWeight: 600 }}>{opt.label}</div>
                    {opt.highlight && <div style={{ fontSize: 9.5, padding: '2px 6px', borderRadius: 3, background: THEME.blue, color: '#fff', fontWeight: 700, letterSpacing: 0.4 }}>RECOMMENDED</div>}
                  </div>
                  <div style={{ fontSize: 11.5, color: THEME.textDim }}>SLA: {opt.time}</div>
                </div>
                <div style={{ fontFamily: 'Fraunces', fontSize: 18, color: THEME.text, fontWeight: 500 }}>{opt.price}</div>
                <Icon d={Icons.arrowRight} size={15} stroke={THEME.textDim}/>
              </div>
            ))}
          </div>

          {/* SLA / sandbox notes for review route */}
          {route.sla && (
            <div style={{
              padding: '12px 14px', borderRadius: 10,
              background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.025)' : 'rgba(0,0,0,0.025)',
              border: `1px dashed ${THEME.line}`,
              fontSize: 11.5, color: THEME.textDim, lineHeight: 1.55,
            }}>
              <div style={{ color: THEME.text, fontWeight: 600, marginBottom: 4 }}>How document review works</div>
              The reviewing attorney receives your intake, evidence, and the document with your specific concerns.
              They return written feedback with suggested edits. <span style={{ color: THEME.text, fontWeight: 500 }}>You decide what to incorporate.</span>
              The attorney does not file on your behalf and does not enter appearance. This is a limited-scope engagement under most state bar rules.
            </div>
          )}

          <NonAttorneyDisclosure jx={jx}/>
        </div>
      </div>
    </div>
  );
};

window.HANDOFF_ROUTES = HANDOFF_ROUTES;
window.HandoffV2 = HandoffV2;