function RealConstructionEditor({config, answers, onChange, legacyText,targets=[],assignments={},endingLabel='Description',readonly=false}) {
  const [active,setActive]=React.useState(null);
  const [page,setPage]=React.useState(0);
  const api=window.RealConstruction;
  const rows=api.rows(config);
  const done=rows.filter(row=>api.fields.every(field=>String(answers[row.id]?.[field]||'').trim()) && (row.kind!=='negative' || answers[row.id]?.not!==false)).length;
  const names={objective:'Objective',indicator:'Indicator',description:endingLabel,not:'NOT'};
  const hints={objective:'¿De quién o de qué hablas?',indicator:'Escribe el indicator de esta estructura.',description:endingLabel==='Activity'?'Escribe la actividad y su complemento.':'¿Cómo es? Escribe su descripción.'};
  return <section className="rc-editor" aria-label="Alien Contact">
    <div className="rc-intro"><div><img className="ac-brand" src="assets/ZERO/letras.png" alt="Todos Bilingües"/><span className="rc-eyebrow">TIERRA → ESPACIO · CANAL ABIERTO</span><h2>Te escuchamos, terrícola.</h2><p>No conocemos tu mundo. Usa las figuras para contarnos cómo es, una idea a la vez.</p></div><div className="rc-counter"><strong>{done}<small> / {rows.length}</small></strong><span>mensajes completos</span></div></div>
    <progress className="rc-progress" value={done} max={rows.length} aria-label="Ejemplos completos" />
    {legacyText && <details className="rc-legacy"><summary>Ver tu respuesta anterior</summary><p>Tu texto anterior se conserva hasta que guardes las nuevas construcciones.</p><pre>{legacyText}</pre></details>}
    <p className="ac-continuation" role="status">{page<rows.length-1?`La actividad continúa: quedan ${rows.length-page-1} ejemplos. Pulsa Siguiente.`:"Último ejemplo. Revisa que todos estén completos antes de guardar o enviar."}</p>
    {Object.keys(config).filter(kind=>kind===rows[page]?.kind).map(kind=><section key={kind} className="rc-section" aria-label={api.labels[kind]}>
      <div className="rc-section-heading"><h3>{api.labels[kind]}</h3><span>{config[kind].count+(config[kind].makerRows?.length||0)} ejemplos{kind==='negative'?' · Toca NOT para activarlo o quitarlo':''}</span></div>
      <div className="rc-grid ac-single-example">{rows.filter((row,index)=>index===page).map(row=>{
        const asset=window.REAL_CONSTRUCTION_CONFIG.images[row.image];
        const layout=window.REAL_CONSTRUCTION_CONFIG.layouts[asset.layout];
        const values=answers[row.id]||{};
        const target=assignments[row.id] || targets[row.index % Math.max(1,targets.length)];
        const filled=api.fields.filter(field=>String(values[field]||'').trim()).length;
        const selected=active?.id===row.id?active.field:null;
        const select=field=>{if(readonly)return;field==='not' ? onChange({...answers,[row.id]:{...values,not:values.not===false}}) : setActive({id:row.id,field});};
        const ready=filled===3 && (kind!=='negative' || values.not!==false);
        return <article className="rc-card" key={row.id}>
          <div className="rc-card-heading"><span>EJEMPLO {String(row.index+1).padStart(2,'0')}</span><span>{ready?'✓ Completo':kind==='negative' && values.not===false?'Activa NOT':`${filled} / 3`}</span></div>
          {target&&<div className="ac-target ac-mission"><span>MENSAJE RECIBIDO · LOS ALIENS QUIEREN SABER</span><h2>{target.id==='self'?'Un ejemplo sobre ti':target.id==='aliens'?'Una pregunta para nosotros':`Un ejemplo sobre ${target.displayName}`}</h2><p>{target.prompt}</p></div>}
          {row.makerExercise?.media&&<img src={row.makerExercise.media} alt={row.makerExercise.title} style={{maxWidth:'100%',maxHeight:400}}/>}
          <div className="rc-canvas" style={{aspectRatio:`${layout.width} / ${layout.height}`}}>
            <img src={asset.src} alt="" loading="lazy" />
            {layout.zones.map(zone=><button key={zone.field} type="button" className={`rc-zone rc-${zone.shape} ${selected===zone.field?'is-active':''}`} aria-label={`${api.labels[kind]} ${row.index+1}: ${names[zone.field]}`} aria-pressed={zone.field==='not'?values.not!==false:selected===zone.field} onClick={()=>select(zone.field)} style={{left:`${100*zone.x/layout.width}%`,top:`${100*zone.y/layout.height}%`,width:`${100*zone.width/layout.width}%`,height:`${100*zone.height/layout.height}%`}}><span>{zone.field==='not'?(values.not===false?'+':'✓'):values[zone.field]?.trim()?'✓':'+'}</span></button>)}
          </div>
          <div className={`rc-elements ${kind==='negative'?'has-not':''}`}>{layout.zones.map(zone=><button type="button" key={zone.field} className={`rc-element rc-${zone.field}`} onClick={()=>select(zone.field)} aria-pressed={zone.field==='not'?values.not!==false:selected===zone.field}><span>{names[zone.field]}</span><strong>{zone.field==='not'?(values.not===false?'＋ Activar':'✓ Activo'):values[zone.field]||'＋ Escribir'}</strong></button>)}</div>
          {selected && <div className={`rc-input rc-${selected}`}><label htmlFor={`rc-${row.id}-${selected}`}>{names[selected]}</label><input key={selected} autoFocus id={`rc-${row.id}-${selected}`} value={values[selected]||''} maxLength={180} placeholder={hints[selected]} onChange={e=>onChange({...answers,[row.id]:{...values,[selected]:e.target.value}})} onKeyDown={e=>{if(e.key==='Enter'){e.preventDefault();const order=layout.zones.filter(z=>z.field!=='not').map(z=>z.field);const next=order[order.indexOf(selected)+1];setActive(next?{id:row.id,field:next}:null);}if(e.key==='Escape')setActive(null);}} /></div>}
          <div className="ac-card-actions"><div>{selected && <button type="button" onClick={()=>setActive(null)}>Listo</button>}</div><button type="button" onClick={()=>{setPage(p=>Math.min(rows.length-1,p+1));setActive(null);}} className="ac-next-page" aria-label="Siguiente" disabled={page===rows.length-1}>Siguiente →</button></div>
          {filled>0 && <div className="rc-sentence"><span>TU CONSTRUCCIÓN</span><p>{api.sentence(kind,values)}</p></div>}
    <div className="ac-page-navigation"><button type="button" onClick={()=>{setPage(p=>Math.max(0,p-1));setActive(null);}} disabled={page===0}>Anterior</button><span aria-live="polite">Ejemplo {page+1} de {rows.length}</span></div>
        </article>;
      })}</div>
    </section>)}
    <p className="rc-note">Completa los tres elementos de cada ejemplo y activa NOT en los negativos para guardar y continuar.</p>
  </section>;
}