// TechniqueDetail — full guide panel
function TechniqueDetail({ technique, onClose, inCart, onToggleCart, ctx, isMobile }) {
  const [tab, setTab] = React.useState('overview');
  const [proposalLen, setProposalLen] = React.useState('s80');
  const c = technique.color || COLORS.indigo[600];
  const s = technique.sections;
  const p = technique.proposal;
  const extras = window.PROPOSAL_EXTRAS ? window.PROPOSAL_EXTRAS[technique.id] : null;
  const fill = txt => window.fillProposalTokens ? window.fillProposalTokens(txt, ctx) : txt;

  const tabs = [
    { id:'overview', label:'Overview' },
    { id:'questionnaire', label:'Questionnaire' },
    { id:'data', label:'Sample Data' },
    { id:'analysis', label:'Analysis' },
    { id:'decisions', label:'Decisions' },
    { id:'proposal', label:'Proposal' },
  ];

  return (
    <div style={{ display:'flex', flexDirection:'column', height:'100%', overflow:'hidden' }}>
      {/* Header */}
      <div style={{ padding: isMobile ? '12px 16px 0' : '24px 28px 0', flexShrink:0, background:COLORS.slate[100] }}>
        {/* On mobile the detail replaces the list entirely, so it needs a way back */}
        {isMobile && onClose && (
          <button onClick={onClose}
            style={{ border:'none', background:'none', cursor:'pointer', padding:'4px 0',
              marginBottom:8, color:COLORS.indigo[700], fontSize:13.5, fontWeight:700,
              display:'flex', alignItems:'center', gap:6 }}>
            ← Back to techniques
          </button>
        )}
        <div style={{ display:'flex', alignItems:'flex-start', gap:16, marginBottom:16 }}>
          <div style={{
            width: isMobile ? 42 : 52, height: isMobile ? 42 : 52, borderRadius:16, background:`${c}18`,
            display:'flex', alignItems:'center', justifyContent:'center',
            fontSize: isMobile ? 20 : 24, color:c, flexShrink:0
          }}>{technique.icon}</div>
          <div style={{ flex:1, minWidth:0 }}>
            <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap', marginBottom:4 }}>
              <h2 style={{ margin:0, fontSize: isMobile ? 17 : 20, fontWeight:800, color:COLORS.slate[900] }}>{technique.name}</h2>
              <Badge label={technique.family} color={c} />
            </div>
            <div style={{ fontSize:13, color:COLORS.slate[500] }}>{technique.tagline}</div>
          </div>
          {onClose && !isMobile && (
            <button onClick={onClose} aria-label="Close" style={{ border:'none', background:COLORS.slate[100], cursor:'pointer',
              borderRadius:8, width:32, height:32, display:'flex', alignItems:'center',
              justifyContent:'center', color:COLORS.slate[500], fontSize:18, flexShrink:0 }}>×</button>
          )}
        </div>
        {/* Tags row */}
        <div style={{ display:'flex', flexWrap:'wrap', gap:5, marginBottom:16 }}>
          {(technique.tags.businessProblems||[]).slice(0,5).map((t,i) => <Badge key={i} label={t} color={c} small />)}
          <Badge label={`Budget: ${technique.tags.budgetLevel}`} small />
        </div>
        <TabBar tabs={tabs} active={tab} onChange={setTab} />
      </div>

      {/* Scrollable body */}
      <div style={{ flex:1, overflowY:'auto', WebkitOverflowScrolling:'touch',
        padding: isMobile ? '16px' : '24px 28px',
        paddingBottom: isMobile ? 'calc(24px + env(safe-area-inset-bottom))' : undefined }}>

        {/* OVERVIEW TAB */}
        {tab === 'overview' && (
          <div>
            <SectionLabel>What It Is</SectionLabel>
            <p style={{ fontSize:13.5, color:COLORS.slate[700], lineHeight:1.75, marginBottom:20, whiteSpace:'pre-line' }}>{s.whatItIs}</p>

            <div style={{ display:'flex', gap:12, marginBottom:20, flexWrap:'wrap' }}>
              <div style={{ flex:1, minWidth:260, background:COLORS.indigo[50], borderRadius:10,
                padding:'16px', border:`1px solid ${COLORS.indigo[100]}` }}>
                <SectionLabel>When to Use</SectionLabel>
                <ul style={{ margin:0, paddingLeft:16 }}>
                  {(s.whenToUse||[]).map((item,i) => (
                    <li key={i} style={{ fontSize:12.5, color:COLORS.slate[700], marginBottom:6, lineHeight:1.55 }}>{item}</li>
                  ))}
                </ul>
              </div>
              <div style={{ flex:1, minWidth:260, background:TOKENS.warnBg, borderRadius:10,
                padding:'16px', border:`1px solid ${TOKENS.warnBorder}` }}>
                <SectionLabel>When Not to Use</SectionLabel>
                <ul style={{ margin:0, paddingLeft:16 }}>
                  {(s.whenNotToUse||[]).map((item,i) => (
                    <li key={i} style={{ fontSize:12.5, color:COLORS.slate[700], marginBottom:6, lineHeight:1.55 }}>{item}</li>
                  ))}
                </ul>
              </div>
            </div>

            <Divider />
            <SectionLabel>Business Questions It Answers</SectionLabel>
            <div style={{ display:'flex', flexDirection:'column', gap:8, marginBottom:20 }}>
              {(s.businessQuestions||[]).map((q,i) => (
                <div key={i} style={{ display:'flex', gap:10, padding:'10px 14px',
                  background:COLORS.slate[50], borderRadius:10, border:`1px solid ${COLORS.slate[200]}` }}>
                  <span style={{ color:c, fontWeight:800, fontSize:13, flexShrink:0 }}>Q</span>
                  <span style={{ fontSize:13, color:COLORS.slate[700], lineHeight:1.55 }}>{q}</span>
                </div>
              ))}
            </div>

            <Divider />
            <SectionLabel>Ideal Problem Statements</SectionLabel>
            <div style={{ display:'flex', flexDirection:'column', gap:8, marginBottom:20 }}>
              {(s.idealProblemStatements||[]).map((ps,i) => (
                <div key={i} style={{ padding:'12px 16px', background:`${c}08`, borderRadius:10,
                  borderLeft:`3px solid ${c}`, fontSize:13, color:COLORS.slate[700], lineHeight:1.6 }}>
                  "{ps}"
                </div>
              ))}
            </div>

            <Divider />
            <SectionLabel>Input Data Required</SectionLabel>
            <div style={{ display:'flex', gap:12, flexWrap:'wrap', marginBottom:20 }}>
              <div style={{ flex:1, minWidth:200 }}>
                <div style={{ fontSize:11, fontWeight:700, color:COLORS.slate[500], marginBottom:6 }}>REQUIRED</div>
                {(s.inputData?.required||[]).map((item,i) => (
                  <div key={i} style={{ display:'flex', gap:6, marginBottom:5 }}>
                    <span style={{ color:COLORS.green[500], fontWeight:800, fontSize:12 }}>✓</span>
                    <span style={{ fontSize:12.5, color:COLORS.slate[700] }}>{item}</span>
                  </div>
                ))}
              </div>
              {(s.inputData?.optional||[]).length > 0 && (
                <div style={{ flex:1, minWidth:200 }}>
                  <div style={{ fontSize:11, fontWeight:700, color:COLORS.slate[500], marginBottom:6 }}>OPTIONAL / ENHANCES</div>
                  {(s.inputData?.optional||[]).map((item,i) => (
                    <div key={i} style={{ display:'flex', gap:6, marginBottom:5 }}>
                      <span style={{ color:COLORS.amber[500], fontWeight:800, fontSize:12 }}>+</span>
                      <span style={{ fontSize:12.5, color:COLORS.slate[700] }}>{item}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>

            <Divider />
            <SectionLabel>Caveats &amp; Assumptions</SectionLabel>
            <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
              {(s.caveats||[]).map((item,i) => (
                <div key={i} style={{ display:'flex', gap:8, fontSize:12.5, color:COLORS.slate[600], lineHeight:1.55 }}>
                  <span style={{ color:COLORS.amber[500], flexShrink:0 }}>⚠</span>
                  <span>{item}</span>
                </div>
              ))}
            </div>

            {technique.alternatives?.length > 0 && (
              <>
                <Divider />
                <SectionLabel>Use This Instead Of…</SectionLabel>
                <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                  {technique.alternatives.map((alt,i) => (
                    <div key={i} style={{ padding:'12px 16px', background:COLORS.slate[100],
                      borderRadius:10, border:`1px solid ${COLORS.slate[200]}` }}>
                      <div style={{ fontWeight:700, fontSize:12.5, color:COLORS.indigo[700], marginBottom:4 }}>{alt.technique}</div>
                      <div style={{ fontSize:12, color:COLORS.slate[600] }}>{alt.reason}</div>
                    </div>
                  ))}
                </div>
              </>
            )}
          </div>
        )}

        {/* QUESTIONNAIRE TAB */}
        {tab === 'questionnaire' && s.questionnaire && (
          <div>
            <SectionLabel>Question Stem</SectionLabel>
            <div style={{ padding:'14px 16px', background:COLORS.slate[50], borderRadius:10,
              borderLeft:`3px solid ${c}`, marginBottom:20 }}>
              <p style={{ margin:0, fontSize:13, color:COLORS.slate[700], lineHeight:1.65, fontStyle:'italic' }}>
                "{s.questionnaire.stem}"
              </p>
            </div>

            <SectionLabel>Sample Task / Question Format</SectionLabel>
            <div style={{ background:TOKENS.code, borderRadius:10, padding:'20px',
              fontFamily:"'JetBrains Mono', monospace", fontSize:12, color:TOKENS.codeText,
              lineHeight:1.7, marginBottom:20, overflowX:'auto', whiteSpace:'pre-wrap' }}>
              {s.questionnaire.sampleTask}
            </div>

            <div style={{ display:'flex', justifyContent:'flex-end', marginBottom:24 }}>
              <CopyBtn text={s.questionnaire.stem + '\n\n' + s.questionnaire.sampleTask} label="Copy Question Wording" />
            </div>

            <div style={{ display:'flex', gap:12, flexWrap:'wrap', marginBottom:20 }}>
              <div style={{ flex:1, minWidth:260 }}>
                <SectionLabel>Variations by Use Case</SectionLabel>
                {(s.questionnaire.variations||[]).map((v,i) => (
                  <div key={i} style={{ display:'flex', gap:8, marginBottom:8 }}>
                    <span style={{ color:c, fontWeight:800, fontSize:14, flexShrink:0 }}>→</span>
                    <span style={{ fontSize:12.5, color:COLORS.slate[700], lineHeight:1.55 }}>{v}</span>
                  </div>
                ))}
              </div>
              <div style={{ flex:1, minWidth:260 }}>
                <SectionLabel>Modifiable Parts</SectionLabel>
                {(s.questionnaire.modifiableParts||[]).map((m,i) => (
                  <div key={i} style={{ display:'flex', gap:8, marginBottom:8 }}>
                    <span style={{ color:COLORS.green[500], fontWeight:800, fontSize:12, flexShrink:0 }}>✎</span>
                    <span style={{ fontSize:12.5, color:COLORS.slate[700], lineHeight:1.55 }}>{m}</span>
                  </div>
                ))}
              </div>
            </div>

            <Divider />
            <SectionLabel>Healthcare / Pharma Adaptation Notes</SectionLabel>
            <div style={{ padding:'14px 16px', background:TOKENS.okBg, borderRadius:10,
              border:`1px solid ${TOKENS.okBorder}`, fontSize:13, color:COLORS.slate[700], lineHeight:1.65 }}>
              {s.questionnaire.healthcareAdaptation}
            </div>
          </div>
        )}

        {/* SAMPLE DATA TAB */}
        {tab === 'data' && s.sampleData && (
          <div>
            <div style={{ padding:'12px 16px', background:COLORS.amber[500]+'15', borderRadius:10,
              border:`1px solid ${COLORS.amber[500]}30`, marginBottom:20, fontSize:12.5, color:COLORS.slate[700] }}>
              <strong>Note:</strong> All data below is fictional and for illustrative purposes only. It does not represent any real study, product, or organisation.
            </div>

            <SectionLabel>Study Description</SectionLabel>
            <p style={{ fontSize:13, color:COLORS.slate[700], marginBottom:20 }}>{s.sampleData.description}</p>

            {/* Conjoint-specific */}
            {s.sampleData.table && technique.id === 'conjoint' && (
              <>
                <SectionLabel>Utility Scores (Part-Worth Estimates)</SectionLabel>
                <DataTable
                  headers={['Attribute', 'Level', 'Utility']}
                  rows={s.sampleData.table.map(r => [r.attribute, r.level,
                    <span style={{ fontWeight:700, color: r.utility > 0 ? COLORS.green[600] : COLORS.rose[600] }}>
                      {r.utility > 0 ? '+' : ''}{r.utility}
                    </span>
                  ])}
                />
                <div style={{ height:20 }} />
                <SectionLabel>Relative Attribute Importance</SectionLabel>
                <HorizBarChart items={s.sampleData.importance} valueKey="importance" labelKey="attribute" maxValue={100} unit="%" />
              </>
            )}

            {/* MaxDiff-specific */}
            {s.sampleData.table && technique.id === 'maxdiff' && (
              <>
                <SectionLabel>MaxDiff Importance Scores (0–100 scale)</SectionLabel>
                <HorizBarChart items={s.sampleData.table.map(r => ({ ...r, score: r.score }))
                  .sort((a,b) => b.score - a.score)}
                  valueKey="score" labelKey="item" maxValue={100} />
              </>
            )}

            {/* TURF-specific */}
            {s.sampleData.table && technique.id === 'turf' && (
              <>
                <SectionLabel>Reach Curve — Unduplicated Reach by Bundle Size</SectionLabel>
                <HorizBarChart items={s.sampleData.table.map(r => ({ label: r.bundle, reach: r.reach }))}
                  valueKey="reach" labelKey="label" maxValue={100} unit="%" />
                <div style={{ marginTop:16 }}>
                  <DataTable
                    headers={['Bundle Size', 'Optimal Messages', 'Unduplicated Reach']}
                    rows={s.sampleData.table.map(r => [r.bundle, r.messages.join(', '), `${r.reach}%`])}
                  />
                </div>
              </>
            )}

            {/* Van Westendorp-specific */}
            {s.sampleData.keyPoints && technique.id === 'vanwestendorp' && (
              <>
                <SectionLabel>Key Price Points</SectionLabel>
                <div style={{ display:'flex', gap:10, flexWrap:'wrap', marginBottom:20 }}>
                  {s.sampleData.keyPoints.map((kp,i) => (
                    <div key={i} style={{ flex:1, minWidth:200, background:COLORS.slate[100],
                      borderRadius:10, border:`1px solid ${COLORS.slate[200]}`,
                      padding:'14px 16px', borderTop:`3px solid ${c}` }}>
                      <div style={{ fontSize:22, fontWeight:800, color:c, marginBottom:4 }}>{kp.value}</div>
                      <div style={{ fontSize:11, fontWeight:700, color:COLORS.slate[700], marginBottom:6 }}>{kp.label}</div>
                      <div style={{ fontSize:11.5, color:COLORS.slate[500], lineHeight:1.55 }}>{kp.description}</div>
                    </div>
                  ))}
                </div>
              </>
            )}

            {/* KDA-specific */}
            {s.sampleData.table && technique.id === 'keydriver' && (
              <>
                <SectionLabel>Driver Importance vs Performance</SectionLabel>
                <DataTable
                  headers={['Driver', 'Derived Importance (%)', 'Performance (7-pt scale)', 'Priority']}
                  rows={s.sampleData.table.map(r => {
                    const priority = r.derivedImportance >= 20 && r.performance < 5 ? '🔴 High priority' :
                                     r.derivedImportance >= 20 ? '🟡 Defend strength' :
                                     r.performance >= 5.5 ? '🟢 Low priority' : '⚪ Monitor';
                    return [r.driver, `${r.derivedImportance}%`, r.performance, priority];
                  })}
                />
              </>
            )}

            {/* Cluster-specific */}
            {s.sampleData.table && technique.id === 'cluster' && (
              <>
                <SectionLabel>Segment Solution (4 Clusters)</SectionLabel>
                <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                  {s.sampleData.table.map((seg,i) => (
                    <div key={i} style={{ display:'flex', gap:14, padding:'14px 16px',
                      borderRadius:10, border:`1px solid ${COLORS.slate[200]}`, background:COLORS.slate[100] }}>
                      <div style={{ width:4, borderRadius:999, background:seg.colour, flexShrink:0 }} />
                      <div style={{ flex:1 }}>
                        <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:6 }}>
                          <span style={{ fontWeight:700, fontSize:13, color:COLORS.slate[800] }}>{seg.segment}</span>
                          <Badge label={`${seg.size}%`} color={seg.colour} />
                        </div>
                        <div style={{ fontSize:12.5, color:COLORS.slate[600] }}>{seg.profile}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </>
            )}

            {/* Logistic-specific */}
            {s.sampleData.table && technique.id === 'logistic' && (
              <>
                <SectionLabel>Model Output — Odds Ratios</SectionLabel>
                <DataTable
                  headers={['Predictor', 'Odds Ratio', '95% CI', 'p-value', 'Significance']}
                  rows={s.sampleData.table.map(r => [
                    r.predictor, 
                    <span style={{ fontWeight:700, color:COLORS.indigo[700] }}>{r.OR}</span>,
                    r.CI,
                    r.pValue,
                    parseFloat(r.pValue) < 0.05 || r.pValue === '<0.001' 
                      ? <Badge label="Significant" color={COLORS.green[600]} small />
                      : <Badge label="n.s." small />
                  ])}
                />
              </>
            )}

            {/* CHAID-specific */}
            {s.sampleData.tree && technique.id === 'chaid' && (
              <>
                <SectionLabel>Decision Tree Path Summary</SectionLabel>
                <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                  {s.sampleData.tree.map((node,i) => (
                    <div key={i} style={{ padding:'12px 16px', borderRadius:10,
                      background: i===0 ? `${c}10` : COLORS.slate[50],
                      border:`1px solid ${i===0 ? c+'30' : COLORS.slate[200]}`,
                      paddingLeft: `${16 + i*20}px` }}>
                      <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:4 }}>
                        {i > 0 && <span style={{ color:COLORS.slate[400], fontSize:12 }}>↳</span>}
                        <span style={{ fontWeight:700, fontSize:12.5, color:COLORS.slate[800] }}>
                          Split on: {node.variable}
                        </span>
                      </div>
                      <div style={{ fontSize:12, color:COLORS.slate[600], marginBottom:4 }}>Split: {node.split}</div>
                      <div style={{ display:'flex', gap:16, fontSize:12 }}>
                        <span>High group: <strong style={{ color:COLORS.green[600] }}>{node.adoptionHigh}%</strong> adoption</span>
                        <span>Low group: <strong style={{ color:COLORS.rose[600] }}>{node.adoptionLow}%</strong> adoption</span>
                      </div>
                    </div>
                  ))}
                </div>
              </>
            )}

            <Divider />
            <SectionLabel>How to Interpret These Results</SectionLabel>
            <div style={{ fontSize:13, color:COLORS.slate[700], lineHeight:1.75, whiteSpace:'pre-line' }}>
              {s.interpretation}
            </div>
          </div>
        )}

        {/* ANALYSIS TAB */}
        {tab === 'analysis' && (
          <div>
            <SectionLabel>Step-by-Step Analysis Process</SectionLabel>
            <div style={{ marginBottom:24 }}>
              {(s.analysisProcess||[]).map((step,i) => (
                <ProcessStep key={i} step={step.step} title={step.title} detail={step.detail} color={c} />
              ))}
            </div>
            <Divider />
            <SectionLabel>Outputs Delivered to Client</SectionLabel>
            <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
              {(s.outputs||[]).map((output,i) => (
                <div key={i} style={{ display:'flex', gap:8, padding:'10px 14px',
                  background:COLORS.slate[50], borderRadius:10, border:`1px solid ${COLORS.slate[200]}`,
                  fontSize:13, color:COLORS.slate[700] }}>
                  <span style={{ color:c, fontWeight:800, flexShrink:0 }}>→</span>
                  {output}
                </div>
              ))}
            </div>
          </div>
        )}

        {/* DECISIONS TAB */}
        {tab === 'decisions' && (
          <div>
            <SectionLabel>Interpretation Guide</SectionLabel>
            <div style={{ padding:'16px', background:COLORS.slate[50], borderRadius:10,
              border:`1px solid ${COLORS.slate[200]}`, fontSize:13, color:COLORS.slate[700],
              lineHeight:1.75, marginBottom:20, whiteSpace:'pre-line' }}>
              {s.interpretation}
            </div>
            <Divider />
            <SectionLabel>Business Decisions Enabled</SectionLabel>
            <div style={{ display:'flex', flexDirection:'column', gap:8, marginBottom:20 }}>
              {(s.businessDecisions||[]).map((d,i) => (
                <div key={i} style={{ display:'flex', gap:12, padding:'12px 16px',
                  background:COLORS.slate[100], borderRadius:10, border:`1px solid ${COLORS.slate[200]}` }}>
                  <div style={{ width:24, height:24, borderRadius:999, background:`${c}18`,
                    color:c, fontWeight:800, fontSize:11, display:'flex', alignItems:'center',
                    justifyContent:'center', flexShrink:0 }}>{i+1}</div>
                  <span style={{ fontSize:13, color:COLORS.slate[700], lineHeight:1.55 }}>{d}</span>
                </div>
              ))}
            </div>
            {technique.alternatives?.length > 0 && (
              <>
                <Divider />
                <SectionLabel>Method Comparison Guidance</SectionLabel>
                {technique.alternatives.map((alt,i) => (
                  <div key={i} style={{ padding:'12px 16px', background:COLORS.indigo[50],
                    borderRadius:10, border:`1px solid ${COLORS.indigo[100]}`, marginBottom:8 }}>
                    <div style={{ fontWeight:700, fontSize:12.5, color:COLORS.indigo[700], marginBottom:4 }}>
                      vs {alt.technique}
                    </div>
                    <div style={{ fontSize:12.5, color:COLORS.slate[700] }}>{alt.reason}</div>
                  </div>
                ))}
              </>
            )}
          </div>
        )}

        {/* PROPOSAL TAB */}
        {tab === 'proposal' && (
          <div>
            {/* Add to builder banner */}
            {onToggleCart && (
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:12,
                padding:'12px 16px', borderRadius:10, marginBottom:20,
                background: inCart ? COLORS.green[500]+'12' : c+'0D',
                border:`1px solid ${inCart ? COLORS.green[500]+'40' : c+'30'}` }}>
                <div style={{ fontSize:12.5, color:COLORS.slate[700] }}>
                  {inCart
                    ? <><strong>Added to your proposal.</strong> Open the Proposal Builder to assemble a client-ready document.</>
                    : <>Build a client-ready proposal — add this method and combine it with others.</>}
                </div>
                <button onClick={() => onToggleCart(technique.id)}
                  style={{ padding:'7px 14px', borderRadius:8, border:'none', whiteSpace:'nowrap',
                    background: inCart ? 'white' : c, color: inCart ? COLORS.rose[600] : 'white',
                    fontSize:12, fontWeight:700, cursor:'pointer',
                    boxShadow: inCart ? 'none' : `0 2px 6px ${c}40`,
                    border: inCart ? `1px solid ${COLORS.slate[200]}` : 'none' }}>
                  {inCart ? '− Remove from proposal' : '+ Add to proposal'}
                </button>
              </div>
            )}

            {/* Sample size + timeline */}
            {extras && (
              <div style={{ display:'flex', gap:12, flexWrap:'wrap', marginBottom:24 }}>
                <div style={{ flex:1, minWidth:240, background:COLORS.slate[100], borderRadius:10,
                  border:`1px solid ${COLORS.slate[200]}`, padding:'16px', borderTop:`3px solid ${c}` }}>
                  <SectionLabel>Sample Size Guidance</SectionLabel>
                  <div style={{ display:'flex', gap:18, marginBottom:10 }}>
                    <div>
                      <div style={{ fontSize:22, fontWeight:800, color:c, lineHeight:1 }}>{extras.sampleSize.recommended}</div>
                      <div style={{ fontSize:10.5, color:COLORS.slate[400], fontWeight:600, marginTop:3 }}>RECOMMENDED</div>
                    </div>
                    <div style={{ borderLeft:`1px solid ${COLORS.slate[200]}`, paddingLeft:18 }}>
                      <div style={{ fontSize:22, fontWeight:800, color:COLORS.slate[400], lineHeight:1 }}>{extras.sampleSize.min}</div>
                      <div style={{ fontSize:10.5, color:COLORS.slate[400], fontWeight:600, marginTop:3 }}>MINIMUM</div>
                    </div>
                  </div>
                  <div style={{ fontSize:11.5, color:COLORS.slate[500], lineHeight:1.55 }}>{extras.sampleSize.note}</div>
                </div>
                <div style={{ flex:1, minWidth:240, background:COLORS.slate[100], borderRadius:10,
                  border:`1px solid ${COLORS.slate[200]}`, padding:'16px', borderTop:`3px solid ${c}` }}>
                  <SectionLabel>Indicative Timeline · ~{extras.timeline.reduce((s,p)=>s+p.weeks,0)} weeks</SectionLabel>
                  <div style={{ display:'flex', flexDirection:'column', gap:5, marginTop:6 }}>
                    {extras.timeline.map((p,i) => {
                      const total = extras.timeline.reduce((s,x)=>s+x.weeks,0);
                      return (
                        <div key={i} style={{ display:'flex', alignItems:'center', gap:8 }}>
                          <div style={{ width:80, fontSize:10.5, color:COLORS.slate[600], textAlign:'right', flexShrink:0 }}>{p.weeks} wk</div>
                          <div style={{ flex:1, height:14, background:COLORS.slate[100], borderRadius:4, overflow:'hidden' }}>
                            <div style={{ width:`${(p.weeks/total)*100}%`, height:'100%', background:c, opacity:0.55+i*0.06, borderRadius:4 }} />
                          </div>
                          <div style={{ width:130, fontSize:10.5, color:COLORS.slate[500], flexShrink:0, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{p.phase}</div>
                        </div>
                      );
                    })}
                  </div>
                  <div style={{ fontSize:11, color:COLORS.slate[500], marginTop:10, paddingTop:10, borderTop:`1px solid ${COLORS.slate[100]}` }}>
                    <strong>Fieldwork:</strong> {extras.fieldwork}
                  </div>
                </div>
              </div>
            )}

            <SectionLabel>Proposal-Ready Text {ctx && (ctx.productName || ctx.indication) ? '· auto-filled with your project context' : ''}</SectionLabel>
            <div style={{ display:'flex', gap:6, marginBottom:16, flexWrap:'wrap' }}>
              {[
                { id:'s30', label:'30-word' },
                { id:'s80', label:'80-word' },
                { id:'s150', label:'150-word' },
                { id:'full', label:'Full Method' },
              ].map(opt => (
                <button key={opt.id} onClick={() => setProposalLen(opt.id)}
                  style={{
                    padding:'5px 12px', borderRadius:16, border:`1px solid ${proposalLen===opt.id ? c : COLORS.slate[200]}`,
                    background: proposalLen===opt.id ? c : COLORS.slate[100],
                    color: proposalLen===opt.id ? 'white' : COLORS.slate[600],
                    fontSize:12, fontWeight:600, cursor:'pointer', transition:'all 0.12s'
                  }}>{opt.label}
                </button>
              ))}
            </div>
            <div style={{ position:'relative', background:COLORS.slate[50], borderRadius:10,
              padding:'20px', border:`1px solid ${COLORS.slate[200]}`, marginBottom:16 }}>
              <div style={{ fontSize:13.5, color:COLORS.slate[800], lineHeight:1.75, whiteSpace:'pre-wrap' }}>
                {fill(p[proposalLen])}
              </div>
              <div style={{ marginTop:16, display:'flex', justifyContent:'flex-end' }}>
                <CopyBtn text={fill(p[proposalLen])} label="Copy Text" />
              </div>
            </div>

            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:16 }}>
              <div>
                <SectionLabel>Scope of Work</SectionLabel>
                <div style={{ padding:'12px 14px', background:COLORS.slate[100], borderRadius:10,
                  border:`1px solid ${COLORS.slate[200]}`, fontSize:12.5, color:COLORS.slate[700], lineHeight:1.65 }}>
                  {fill(p.scopeOfWork)}
                </div>
              </div>
              <div>
                <SectionLabel>Why This vs Alternatives</SectionLabel>
                <div style={{ padding:'12px 14px', background:COLORS.indigo[50], borderRadius:10,
                  border:`1px solid ${COLORS.indigo[100]}`, fontSize:12.5, color:COLORS.slate[700], lineHeight:1.65 }}>
                  {p.whyThisVsAlternatives}
                </div>
              </div>
            </div>

            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
              <div>
                <SectionLabel>Deliverables List</SectionLabel>
                {(p.deliverables||[]).map((d,i) => (
                  <div key={i} style={{ display:'flex', gap:6, marginBottom:6, fontSize:12.5, color:COLORS.slate[700] }}>
                    <span style={{ color:COLORS.green[500], fontWeight:700 }}>✓</span> {d}
                  </div>
                ))}
              </div>
              <div>
                <div style={{ marginBottom:14 }}>
                  <SectionLabel>Assumptions</SectionLabel>
                  {(p.assumptions||[]).map((a,i) => (
                    <div key={i} style={{ fontSize:12, color:COLORS.slate[600], marginBottom:4, lineHeight:1.5 }}>• {a}</div>
                  ))}
                </div>
                <SectionLabel>Risks / Dependencies</SectionLabel>
                {(p.risks||[]).map((r,i) => (
                  <div key={i} style={{ fontSize:12, color:COLORS.slate[600], marginBottom:4, lineHeight:1.5 }}>⚠ {r}</div>
                ))}
              </div>
            </div>

            <div style={{ marginTop:16, display:'flex', justifyContent:'flex-end' }}>
              <CopyBtn
                text={[
                  `${technique.name} — Full Proposal Block`,
                  '', p.full, '',
                  'SCOPE OF WORK', p.scopeOfWork, '',
                  'DELIVERABLES', (p.deliverables||[]).join('\n'), '',
                  'ASSUMPTIONS', (p.assumptions||[]).join('\n'), '',
                  'RISKS', (p.risks||[]).join('\n'), '',
                  'WHY THIS METHOD', p.whyThisVsAlternatives
                ].join('\n')}
                label="Copy Full Proposal Block"
              />
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { TechniqueDetail });