// details-tab-fix.jsx — dot+ Recording Detail · Details tab, markdown rendered natively
// Reference target for the shipped screen. No emoji (project rule); SF-symbol line icons.

const D = {
  bg:'#000000', s2:'#111116', s3:'#1C1C22', s4:'#2A2A33',
  c1:'#FFFFFF', c2:'#C8C8D4', c3:'#6E6E7A', cdis:'#3A3A44',
  border:'#26262E', borderSub:'#1B1B22',
  info:'#3B82F6', chip:'#182338', chipTxt:'#5B9BFF',
};
const MONO = "'JetBrains Mono', ui-monospace, monospace";
const SANS = "'Inter', -apple-system, system-ui, sans-serif";

// meeting metadata — the single source of truth (used to interpolate the doc)
const MEETING = {
  title: 'Capcana App Monili Integration',
  dateLong: 'Jun 30, 2026 at 1:55 PM',
  duration: '18:50',
};

// The raw meeting-minute markdown as produced by the model (with the template token).
const RAW_MINUTE = `## Meeting Minutes: HMS - Capcana App Integration Discussion

**Date:** [Date of Meeting]

**Attendees:**
* Speaker 1 (Capcana App Representative)
* Speaker 2 (HMS Representative)

**Introduction:**
The meeting was convened to discuss the potential integration of the Capcana App with Monili, an existing application used by HMS for condominium management, particularly for access control and communication with property owners. Speaker 1 presented the features and integration capabilities of the Capcana App, while Speaker 2 outlined HMS's current operations and requirements.

**Decisions Made:**
* The primary objective for HMS is to integrate Capcana App's advanced access control features with their existing Monili system, rather than fully replacing it.
* Capcana will handle official ID verification and automated guest pass creation.

**Next Steps:**
The discussion converged on the necessity of involving Milagros, the contact for Monili, and Bruno, HMS's director, to ascertain Monili's interest and technical capacity for integration.`;

// intro prose that sits above the minute (already rendered fine in the shipped app)
const INTRO = `Ultimately, the discussion converged on the necessity of involving Milagros, the contact for Monili, and Bruno, HMS's director, to ascertain Monili's interest and technical capacity for integration. Speaker 1 emphasized that software development is flexible, but budget and time constraints, along with the willingness of third-party providers like Monili, are key limiting factors.`;

// ─────────────────────────────────────────── icons
function Icon({ size=20, stroke=1.7, children, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={{ display:'block', flexShrink:0, ...style }}>
      {children}
    </svg>
  );
}
const Ic = {
  x:      (p)=><Icon {...p}><path d="M6 6l12 12M18 6L6 18"/></Icon>,
  dots:   (p)=><Icon {...p}><circle cx="5" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1.4" fill="currentColor" stroke="none"/></Icon>,
  play:   (p)=><Icon {...p}><path d="M8 5.5v13l11-6.5z" fill="currentColor" stroke="none"/></Icon>,
  pause:  (p)=><Icon {...p}><path d="M7 5h3.2v14H7zM13.8 5H17v14h-3.2z" fill="currentColor" stroke="none"/></Icon>,
  share:  (p)=><Icon {...p}><path d="M12 15V4M8 8l4-4 4 4M5 12v6a2 2 0 002 2h10a2 2 0 002-2v-6"/></Icon>,
  folder: (p)=><Icon {...p}><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></Icon>,
  copy:   (p)=><Icon {...p}><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2h2"/></Icon>,
  people: (p)=><Icon {...p}><circle cx="9" cy="8" r="3"/><path d="M3.5 19a5.5 5.5 0 0111 0M16 6.5a3 3 0 010 6M16.5 19a5.5 5.5 0 00-1.8-4.1"/></Icon>,
  cal:    (p)=><Icon {...p}><path d="M7 3v3M17 3v3M4 8h16M5 5h14a1 1 0 011 1v13a1 1 0 01-1 1H5a1 1 0 01-1-1V6a1 1 0 011-1z"/></Icon>,
  gavel:  (p)=><Icon {...p}><path d="M14 4l6 6M4 20l6-6M12.5 5.5l4 4M6 13l5 5M3 21h7"/></Icon>,
  arrow:  (p)=><Icon {...p}><path d="M5 12h14M13 6l6 6-6 6"/></Icon>,
  book:   (p)=><Icon {...p}><path d="M4 5a2 2 0 012-2h12v16H6a2 2 0 00-2 2zM4 19a2 2 0 012-2h12"/></Icon>,
  refresh:(p)=><Icon {...p}><path d="M4 12a8 8 0 0113.7-5.7L20 8M20 4v4h-4M20 12a8 8 0 01-13.7 5.7L4 16M4 20v-4h4"/></Icon>,
  sliders:(p)=><Icon {...p}><path d="M4 8h9M17 8h3M4 16h3M11 16h9"/><circle cx="15" cy="8" r="2.2"/><circle cx="9" cy="16" r="2.2"/></Icon>,
};

// ─────────────────────────────────────────── localization strings (one locale, no stragglers)
const STR = {
  'English': {
    filtersTitle:'Filters', done:'Done', included:'Included content',
    rows:['Include metadata','Include summary','Include key points','Include tasks','Include transcript','Include audio file'],
    shareTitle:'Share meeting', formats:['Image','PDF','Plain Text'], exportShare:'Export & Share',
    menuShare:'Share', menuReprocess:'Re-process Audio',
    pMeeting:'Meeting', pDate:'Date', pDuration:'Duration', pSummary:'SUMMARY',
  },
  'Español': {
    filtersTitle:'Filtros', done:'Hecho', included:'Contenido incluido',
    rows:['Incluir metadatos','Incluir resumen','Incluir puntos clave','Incluir tareas','Incluir transcripción','Incluir archivo de audio'],
    shareTitle:'Compartir reunión', formats:['Imagen','PDF','Texto plano'], exportShare:'Exportar y compartir',
    menuShare:'Compartir', menuReprocess:'Reprocesar audio',
    pMeeting:'Reunión', pDate:'Fecha', pDuration:'Duración', pSummary:'RESUMEN',
  },
};

// ─────────────────────────────────────────── i18n sheet atoms
function Switch({ on, onClick }) {
  return (
    <button onClick={onClick} style={{ width:51, height:31, borderRadius:16, border:'none', padding:2,
      background:on?D.info:D.s4, cursor:'pointer', display:'flex', justifyContent:on?'flex-end':'flex-start', transition:'background .2s, justify-content .2s' }}>
      <span style={{ width:27, height:27, borderRadius:'50%', background:'#fff', boxShadow:'0 1px 3px rgba(0,0,0,.35)' }}/>
    </button>
  );
}
function Segmented({ options, value, onChange }) {
  return (
    <div style={{ display:'flex', background:D.s3, borderRadius:11, padding:3, gap:3 }}>
      {options.map(o=>{
        const on=o===value;
        return (
          <button key={o} onClick={()=>onChange(o)} style={{ flex:1, border:'none', borderRadius:8, padding:'8px 4px',
            background:on?D.s4:'transparent', color:on?D.c1:D.c2, fontFamily:SANS, fontSize:14, fontWeight:on?600:500, cursor:'pointer', whiteSpace:'nowrap' }}>{o}</button>
        );
      })}
    </div>
  );
}
function Sheet({ open, title, done, onClose, children }) {
  return (
    <div style={{ position:'absolute', inset:0, zIndex:40, pointerEvents:open?'auto':'none' }}>
      <div onClick={onClose} style={{ position:'absolute', inset:0, background:'rgba(0,0,0,0.55)', opacity:open?1:0, transition:'opacity .28s' }}/>
      <div style={{ position:'absolute', left:0, right:0, bottom:0, background:'#121216',
        borderTopLeftRadius:16, borderTopRightRadius:16,
        transform:open?'translateY(0)':'translateY(100%)', transition:'transform .32s cubic-bezier(.32,.72,0,1)',
        maxHeight:'82%', display:'flex', flexDirection:'column', boxShadow:'0 -12px 40px rgba(0,0,0,0.6)' }}>
        <div style={{ padding:'10px 0 4px', display:'flex', justifyContent:'center' }}>
          <div style={{ width:36, height:5, borderRadius:3, background:D.s4 }}/>
        </div>
        <div style={{ display:'flex', alignItems:'center', padding:'8px 18px 14px' }}>
          <span style={{ width:70, flexShrink:0 }}/>
          <span style={{ flex:1, textAlign:'center', fontFamily:SANS, fontSize:17, fontWeight:700, color:D.c1 }}>{title}</span>
          <button onClick={onClose} style={{ width:70, flexShrink:0, textAlign:'right', background:'none', border:'none', cursor:'pointer',
            fontFamily:SANS, fontSize:16, fontWeight:600, color:D.info }}>{done}</button>
        </div>
        <div style={{ overflowY:'auto', padding:'0 18px 30px', flex:1 }}>{children}</div>
      </div>
    </div>
  );
}
function ContextMenu({ open, onClose, items }) {
  if(!open) return null;
  return (
    <div style={{ position:'absolute', inset:0, zIndex:50 }} onClick={onClose}>
      <div onClick={e=>e.stopPropagation()} style={{ position:'absolute', top:58, right:18, width:236,
        background:'#1E1E24', borderRadius:14, overflow:'hidden', boxShadow:'0 12px 40px rgba(0,0,0,0.55)', border:`1px solid ${D.border}` }}>
        {items.map((it,i)=>(
          <button key={i} onClick={()=>{ it.onClick&&it.onClick(); onClose(); }} style={{ width:'100%', display:'flex', alignItems:'center',
            gap:13, background:'transparent', border:'none', borderBottom:i<items.length-1?`1px solid ${D.borderSub}`:'none',
            padding:'15px 18px', cursor:'pointer', fontFamily:SANS, fontSize:16, color:D.c1, textAlign:'left' }}>
            <span style={{ color:D.c2, display:'flex' }}>{it.icon}</span>
            <span>{it.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────── markdown → blocks
function interpolate(src) {
  return src.replaceAll('[Date of Meeting]', MEETING.dateLong);
}
function parseMinute(src) {
  const lines = interpolate(src).split('\n');
  const blocks = [];
  let i = 0;
  const inline = (t) => t.replace(/\*\*(.+?)\*\*/g, '$1'); // strip stray inline bold
  while (i < lines.length) {
    let ln = lines[i];
    if (!ln.trim()) { i++; continue; }
    // ## Heading
    if (/^#{1,6}\s/.test(ln)) {
      blocks.push({ type:'h', text: ln.replace(/^#{1,6}\s+/, '').trim() });
      i++; continue;
    }
    // **Label:** value?   →  key/value  or  section label
    const m = ln.match(/^\*\*(.+?):\*\*\s*(.*)$/);
    if (m) {
      const label = m[1].trim();
      const rest = m[2].trim();
      if (rest) { blocks.push({ type:'kv', k: label, v: inline(rest) }); i++; continue; }
      blocks.push({ type:'label', text: label });
      i++; continue;
    }
    // * bullet list (consume consecutive)
    if (/^\*\s+/.test(ln)) {
      const items = [];
      while (i < lines.length && /^\*\s+/.test(lines[i])) {
        items.push(inline(lines[i].replace(/^\*\s+/, '').trim()));
        i++;
      }
      blocks.push({ type:'ul', items });
      continue;
    }
    // paragraph (consume until blank)
    const para = [];
    while (i < lines.length && lines[i].trim() && !/^(#{1,6}\s|\*\*.+?:\*\*|\*\s)/.test(lines[i])) {
      para.push(lines[i].trim()); i++;
    }
    blocks.push({ type:'p', text: inline(para.join(' ')) });
  }
  return blocks;
}

const LABEL_ICON = {
  'Attendees': Ic.people, 'Date': Ic.cal, 'Introduction': Ic.book,
  'Decisions Made': Ic.gavel, 'Next Steps': Ic.arrow,
};

// ─────────────────────────────────────────── rendered (native) minute
function RenderedMinute() {
  const blocks = parseMinute(RAW_MINUTE);
  return (
    <div style={{ display:'flex', flexDirection:'column' }}>
      {blocks.map((b, i) => {
        if (b.type === 'h') {
          return (
            <div key={i} style={{ margin:'2px 0 16px' }}>
              <h2 style={{ margin:0, fontFamily:SANS, fontSize:19, fontWeight:700, lineHeight:'26px', color:D.c1, letterSpacing:'-0.01em' }}>{b.text}</h2>
              <div style={{ height:1, background:D.borderSub, marginTop:14 }}/>
            </div>
          );
        }
        if (b.type === 'kv') {
          return (
            <div key={i} style={{ display:'flex', alignItems:'center', gap:9, padding:'3px 0 15px' }}>
              <span style={{ color:D.c3, display:'flex' }}>{(LABEL_ICON[b.k]||Ic.cal)({ size:16 })}</span>
              <span style={{ fontFamily:SANS, fontSize:13, fontWeight:600, color:D.c3 }}>{b.k}</span>
              <span style={{ fontFamily:SANS, fontSize:15, fontWeight:500, color:D.c1 }}>{b.v}</span>
            </div>
          );
        }
        if (b.type === 'label') {
          const IconFn = LABEL_ICON[b.text];
          return (
            <div key={i} style={{ display:'flex', alignItems:'center', gap:8, padding:'10px 0 10px' }}>
              {IconFn && <span style={{ color:D.info, display:'flex' }}>{IconFn({ size:15 })}</span>}
              <span style={{ fontFamily:SANS, fontSize:11, fontWeight:700, letterSpacing:'.09em', textTransform:'uppercase', color:D.c2 }}>{b.text}</span>
            </div>
          );
        }
        if (b.type === 'ul') {
          return (
            <ul key={i} style={{ margin:'0 0 10px', padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:10 }}>
              {b.items.map((it, j) => (
                <li key={j} style={{ display:'flex', gap:11, alignItems:'flex-start' }}>
                  <span style={{ width:6, height:6, borderRadius:'50%', background:D.info, marginTop:9, flexShrink:0 }}/>
                  <span style={{ fontFamily:SANS, fontSize:15, lineHeight:'23px', color:D.c1 }}>{it}</span>
                </li>
              ))}
            </ul>
          );
        }
        return (
          <p key={i} style={{ margin:'0 0 16px', fontFamily:SANS, fontSize:15, lineHeight:'24px', color:D.c1 }}>{b.text}</p>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────── raw (broken) minute — the "before"
function RawMinute() {
  return (
    <pre style={{ margin:0, whiteSpace:'pre-wrap', fontFamily:SANS, fontSize:15, lineHeight:'24px', color:D.c1 }}>{RAW_MINUTE}</pre>
  );
}

// ─────────────────────────────────────────── player
function Player({ onShare }) {
  const [playing, setPlaying] = React.useState(false);
  return (
    <div style={{ display:'flex', alignItems:'center', gap:14, background:D.s2, borderRadius:14, padding:'12px 16px' }}>
      <button onClick={()=>setPlaying(p=>!p)} style={{
        width:46, height:46, borderRadius:'50%', border:'none', background:D.s3, color:D.c1,
        display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', flexShrink:0,
      }}>{playing ? <Ic.pause size={20}/> : <Ic.play size={20} style={{marginLeft:2}}/>}</button>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ height:3, borderRadius:2, background:D.s4 }}/>
        <div style={{ display:'flex', justifyContent:'space-between', marginTop:10, fontFamily:MONO, fontSize:12, color:D.c3 }}>
          <span>00:00</span><span>{MEETING.duration}</span>
        </div>
      </div>
      <button onClick={onShare} style={{ background:'none', border:'none', cursor:'pointer', color:D.c3, display:'flex', padding:0 }}><Ic.share size={20}/></button>
    </div>
  );
}

function Tabs({ active }) {
  const tabs = ['Overview','Action Items','Details','Transcript'];
  return (
    <div style={{ display:'flex', gap:22, borderBottom:`1px solid ${D.borderSub}`, padding:'0 20px' }}>
      {tabs.map(tb => {
        const on = active === tb;
        return (
          <div key={tb} style={{ padding:'0 0 12px', position:'relative', fontFamily:SANS, fontSize:16,
            fontWeight:on?700:500, color:on?D.c1:D.c3, whiteSpace:'nowrap' }}>
            {tb}
            {on && <span style={{ position:'absolute', left:0, right:0, bottom:-1, height:2, background:D.c1, borderRadius:2 }}/>}
          </div>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────── screen
function DetailsScreen({ t }) {
  const S = STR[t.locale] || STR['English'];
  const raw = t.render === 'Raw (before)';
  const [sheet, setSheet] = React.useState(null);
  const [menu, setMenu] = React.useState(false);
  const [inc, setInc] = React.useState([true, true, true, true, true, false]);
  const [fmtIdx, setFmtIdx] = React.useState(2);
  React.useEffect(()=>{ setSheet(t.preview==='Filters'?'filters': t.preview==='Share'?'share': null); }, [t.preview]);
  return (
    <div style={{ position:'relative', height:'100%', background:D.bg, overflow:'hidden' }}>
    <div style={{ height:'100%', overflowY:'auto', paddingTop:52, paddingBottom:40 }}>
      {/* nav */}
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'14px 18px 8px' }}>
        <button style={circBtn}><Ic.x size={17} color={D.c2}/></button>
        <button style={circBtn} onClick={()=>setMenu(true)}><Ic.dots size={18} color={D.c2}/></button>
      </div>
      {/* title */}
      <h1 style={{ margin:'8px 18px 12px', fontFamily:SANS, fontSize:30, fontWeight:700, lineHeight:'36px', color:D.c1, letterSpacing:'-0.02em' }}>
        {MEETING.title}
      </h1>
      {/* chips */}
      <div style={{ display:'flex', gap:10, padding:'0 18px 14px' }}>
        <span style={{ display:'flex', alignItems:'center', gap:7, background:D.chip, padding:'8px 12px', borderRadius:9 }}>
          <Ic.folder size={16} color={D.chipTxt}/>
          <span style={{ fontFamily:SANS, fontSize:15, fontWeight:600, color:D.chipTxt }}>HMS</span>
        </span>
        <span style={{ display:'flex', alignItems:'center', background:D.chip, padding:'8px 12px', borderRadius:9 }}>
          <span style={{ fontFamily:SANS, fontSize:15, fontWeight:600, color:D.chipTxt }}>Project Description</span>
        </span>
      </div>
      {/* meta */}
      <div style={{ padding:'0 18px 16px', fontFamily:SANS, fontSize:15, color:D.c3 }}>
        {MEETING.dateLong} &nbsp;·&nbsp; {MEETING.duration}
      </div>
      {/* player */}
      <div style={{ padding:'0 18px 18px' }}><Player onShare={()=>setSheet('share')}/></div>
      {/* tabs */}
      <div style={{ marginBottom:20 }}><Tabs active="Details"/></div>

      {/* content */}
      <div style={{ padding:'0 20px' }}>
        {/* SUMMARY (already fine) */}
        <div style={{ fontFamily:SANS, fontSize:12, fontWeight:700, letterSpacing:'.09em', textTransform:'uppercase', color:D.c3, marginBottom:12 }}>Summary</div>
        <p style={{ margin:'0 0 26px', fontFamily:SANS, fontSize:15, lineHeight:'24px', color:D.c2 }}>{INTRO}</p>

        {/* MEETING MINUTE */}
        <div style={{ display:'flex', alignItems:'center', marginBottom:16 }}>
          <span style={{ fontFamily:SANS, fontSize:12, fontWeight:700, letterSpacing:'.09em', textTransform:'uppercase', color:D.c3 }}>Meeting Minute</span>
          <span style={{ flex:1 }}/>
          <span style={{ color:D.c3, display:'flex' }}><Ic.copy size={19}/></span>
        </div>

        <div style={{ background: raw ? 'transparent' : D.s2, borderRadius:16, padding: raw ? 0 : '18px 18px 8px' }}>
          {raw ? <RawMinute/> : <RenderedMinute/>}
        </div>

        {raw && (
          <div style={{ marginTop:22, display:'flex', gap:9, alignItems:'flex-start', background:'rgba(59,130,246,0.10)', border:`1px solid rgba(59,130,246,0.25)`, borderRadius:12, padding:'12px 14px' }}>
            <span style={{ color:D.info, marginTop:1 }}><Ic.book size={16}/></span>
            <span style={{ fontFamily:SANS, fontSize:13, lineHeight:'19px', color:D.c2 }}>
              This is what ships today — literal <code style={{fontFamily:MONO,color:D.chipTxt}}>##</code>, <code style={{fontFamily:MONO,color:D.chipTxt}}>**</code> and <code style={{fontFamily:MONO,color:D.chipTxt}}>[Date of Meeting]</code>. Flip the Tweak to see the rendered target.
            </span>
          </div>
        )}
      </div>
    </div>{/* /scroll */}

      <ContextMenu open={menu} onClose={()=>setMenu(false)} items={[
        { icon:<Ic.share size={19}/>, label:S.menuShare, onClick:()=>setSheet('share') },
        { icon:<Ic.refresh size={19}/>, label:S.menuReprocess },
      ]}/>

      <Sheet open={sheet==='filters'} title={S.filtersTitle} done={S.done} onClose={()=>setSheet(null)}>
        <div style={{ fontFamily:SANS, fontSize:13, fontWeight:600, letterSpacing:'.05em', textTransform:'uppercase', color:D.c3, padding:'12px 2px 12px' }}>{S.included}</div>
        <div style={{ background:D.s2, borderRadius:12, overflow:'hidden' }}>
          {S.rows.map((r,i)=>(
            <div key={i} style={{ display:'flex', alignItems:'center', padding:'13px 16px', borderBottom:i<S.rows.length-1?`1px solid ${D.borderSub}`:'none' }}>
              <span style={{ flex:1, fontFamily:SANS, fontSize:16, color:D.c1 }}>{r}</span>
              <Switch on={inc[i]} onClick={()=>setInc(a=>a.map((v,j)=>j===i?!v:v))}/>
            </div>
          ))}
        </div>
      </Sheet>

      <Sheet open={sheet==='share'} title={S.shareTitle} done={S.done} onClose={()=>setSheet(null)}>
        <div style={{ background:D.s2, borderRadius:14, padding:16, margin:'6px 0 16px', fontFamily:MONO, fontSize:13, lineHeight:'21px', color:D.c1, whiteSpace:'pre-wrap', maxHeight:230, overflow:'hidden' }}>{`${S.pMeeting}: ${MEETING.title}\n${S.pDate}: ${MEETING.dateLong}\n${S.pDuration}: ${MEETING.duration}\n\n${S.pSummary}\n`+INTRO}</div>
        <Segmented options={S.formats} value={S.formats[fmtIdx]} onChange={o=>setFmtIdx(S.formats.indexOf(o))}/>
        <button style={{ marginTop:18, width:'100%', border:'none', borderRadius:14, padding:16, background:'#fff', color:'#000',
          fontFamily:SANS, fontSize:16, fontWeight:700, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:9 }}>
          <Ic.share size={19}/> {S.exportShare}
        </button>
      </Sheet>
    </div>
  );
}

const circBtn = { width:38, height:38, borderRadius:'50%', border:`1px solid ${D.border}`, background:'transparent', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' };

// ─────────────────────────────────────────── app
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "render": "Rendered (target)",
  "locale": "English",
  "preview": "None"
}/*EDITMODE-END*/;

// on-screen control strip (visible without the Tweaks toggle)
function Seg({ label, value, options, onChange }) {
  return (
    <div style={{ marginBottom:22 }}>
      <div style={{ fontFamily:SANS, fontSize:12, fontWeight:700, letterSpacing:'.05em', textTransform:'uppercase', color:D.c3, marginBottom:9 }}>{label}</div>
      <div style={{ display:'flex', gap:6, background:D.s2, borderRadius:11, padding:4 }}>
        {options.map(o=>{
          const on=o===value;
          return (
            <button key={o} onClick={()=>onChange(o)} style={{ flex:1, border:'none', borderRadius:8, padding:'9px 8px',
              background:on?D.info:'transparent', color:on?'#fff':D.c2, fontFamily:SANS, fontSize:13, fontWeight:on?700:500,
              cursor:'pointer', whiteSpace:'nowrap' }}>{o}</button>
          );
        })}
      </div>
    </div>
  );
}
function ControlStrip({ t, setTweak }) {
  return (
    <div style={{ width:260, flexShrink:0 }}>
      <div style={{ fontFamily:SANS, fontSize:20, fontWeight:700, color:D.c1, marginBottom:4 }}>Controls</div>
      <div style={{ fontFamily:SANS, fontSize:13, lineHeight:'18px', color:D.c3, marginBottom:24 }}>Live controls — no Tweaks toggle needed.</div>
      <Seg label="Meeting minute" value={t.render} options={['Raw (before)','Rendered (target)']} onChange={v=>setTweak('render', v)}/>
      <Seg label="Language" value={t.locale} options={['English','Español']} onChange={v=>setTweak('locale', v)}/>
      <Seg label="Preview sheet" value={t.preview} options={['None','Filters','Share']} onChange={v=>setTweak('preview', v)}/>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <div style={{ minHeight:'100vh', display:'flex', alignItems:'center', justifyContent:'center', gap:56, padding:'24px' }}>
      <ControlStrip t={t} setTweak={setTweak}/>
      <IOSDevice dark width={390} height={844}>
        <DetailsScreen t={t}/>
      </IOSDevice>
      <TweaksPanel>
        <TweakSection label="Details tab"/>
        <TweakRadio label="Meeting minute" value={t.render} options={['Raw (before)','Rendered (target)']} onChange={v=>setTweak('render', v)}/>
        <TweakSection label="Localization"/>
        <TweakRadio label="Language" value={t.locale} options={['English','Español']} onChange={v=>setTweak('locale', v)}/>
        <TweakRadio label="Preview sheet" value={t.preview} options={['None','Filters','Share']} onChange={v=>setTweak('preview', v)}/>
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);