// ADOS website — Project detail
const { Button, Tag, Badge, Tabs } = window.ADOSDesignSystem_5aafbb;

function ProjectDetailScreen({ project, onNavigate }) {
  const { ProjectTurntable } = window; // visor rotatorio compartido (Pieces.jsx)
  const { SectionLabel } = window;
  const p = project || window.ADOS_PROJECTS[0];
  const [tab, setTab] = React.useState('resumen');
  const wrap = { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--pad-x)' };
  const others = window.ADOS_PROJECTS.filter((x) => x.id !== p.id).slice(0, 3);

  const specs = [
    ['Disciplina', p.discipline], ['Nivel de detalle', p.lod],
    ['Ubicación', p.location], ['Año', p.year],
    ['Software', (p.software || []).join(' · ') || 'Revit · Enscape'], ['Entregable', 'IFC 4 · Planos'],
    ...(p.result ? [['Resultado', p.result]] : []),
  ];

  return (
    <main>
      <div style={{ ...wrap, padding: '28px var(--pad-x) 0' }}>
        <button onClick={() => onNavigate('projects')} style={{ background: 'none', border: 'none', color: 'var(--text-muted)', cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 14, padding: 0 }}>← Volver a proyectos</button>
      </div>
      <section style={{ ...wrap, padding: '24px var(--pad-x) 0' }}>
        <div style={{ display: 'flex', gap: 8, marginBottom: 18, flexWrap: 'wrap' }}>
          <Tag tone="amber">{p.discipline}</Tag>
          <Tag tone="outline">{p.lod}</Tag>
          <Badge status="success" dot>Entregado</Badge>
        </div>
        <h1 style={{ fontSize: 'clamp(32px, 5vw, 46px)', letterSpacing: '-0.03em', margin: '0 0 18px', maxWidth: 760 }}>{p.title}</h1>
        {p.turntable && p.turntable.length ? (
          <div style={{ marginTop: 8 }}>
            <ProjectTurntable frames={p.turntable} title={p.title} />
          </div>
        ) : (
          <div style={{ border: '1px solid var(--border-strong)', overflow: 'hidden', marginTop: 8 }}>
            <img src={p.img} alt={p.title} style={{ width: '100%', display: 'block' }} />
          </div>
        )}
      </section>

      <section className="w-split-wide" style={{ ...wrap, padding: '40px var(--pad-x) 0' }}>
        <div>
          <div className="w-tabs-scroll">
            <Tabs items={[{ id: 'resumen', label: 'Resumen' }, { id: 'alcance', label: 'Alcance' }, { id: 'entregables', label: 'Entregables' }]} value={tab} onChange={setTab} />
          </div>
          <div style={{ paddingTop: 24, color: 'var(--text-muted)', fontSize: 16, lineHeight: 1.7, maxWidth: 560 }}>
            {tab === 'resumen' && <p style={{ margin: 0 }}>{p.summary} El modelo se desarrolló de forma federada, integrando todas las disciplinas en un único entorno coordinado para anticipar interferencias antes de la construcción.</p>}
            {tab === 'alcance' && <ul style={{ margin: 0, paddingLeft: 18, display: 'flex', flexDirection: 'column', gap: 10 }}><li>Levantamiento y modelado {p.lod}.</li><li>Coordinación entre disciplinas sobre modelo federado.</li><li>Detección y resolución de interferencias.</li><li>Renders fotorrealistas en Enscape.</li></ul>}
            {tab === 'entregables' && <ul style={{ margin: 0, paddingLeft: 18, display: 'flex', flexDirection: 'column', gap: 10 }}><li>Archivos nativos Revit y exportación IFC 4.</li><li>Planos técnicos coordinados.</li><li>Cantidades de obra extraídas del modelo.</li><li>Visualizaciones para el cliente.</li></ul>}
          </div>
        </div>
        <aside>
          <SectionLabel>Ficha técnica</SectionLabel>
          <div style={{ border: '1px solid var(--border)', borderRadius: 'var(--radius-ui)', overflow: 'hidden' }}>
            {specs.map(([k, v], i) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 18px', background: 'linear-gradient(to top, #0C0F12 0%, #161c24 100%)', borderTop: i ? '1px solid var(--border)' : 'none', fontSize: 14 }}>
                <span style={{ color: 'var(--text-faint)' }}>{k}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500 }}>{v}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 16 }}>
            <Button variant="primary" fullWidth onClick={() => onNavigate('contact')}>Solicitar un proyecto similar</Button>
          </div>
        </aside>
      </section>

      <section style={{ ...wrap, padding: '72px var(--pad-x) 88px' }}>
        <SectionLabel>Otros proyectos</SectionLabel>
        <div className="w-grid-3 w-crosshair" style={{ gap: 24 }}>
          {others.map((o) => <window.ProjectCard key={o.id} p={o} onOpen={(pr) => { onNavigate('detail', pr); }} />)}
        </div>
      </section>
    </main>
  );
}

window.ProjectDetailScreen = ProjectDetailScreen;