const DS = window.BaumannCoDS6_9a0e65 || {};
const { Label, Input, Select, Checkbox, Button, Icon, Card, StatusDot, IndexRow, Tag } = DS;

function Diagnostico() {
  const [sent, setSent] = React.useState(false);
  return (
    <div>
      <section style={{ background: 'var(--bg)', padding: '80px clamp(24px,4vw,48px) var(--section-y)' }}>
        <div className="ds10-stack" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'minmax(0,6fr) minmax(0,6fr)', gap: 48, alignItems: 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <Label index="05">Invitación</Label>
            <h1 style={{ margin: 0, font: 'var(--text-h1)', letterSpacing: 'var(--ls-tight)' }}>Agenda una conversación de diagnóstico.</h1>
            <p style={{ margin: 0, maxWidth: '48ch', fontSize: 16, lineHeight: 1.6, color: 'var(--text-secondary)' }}>45 minutos con Manuel Baumann. Salís con una lectura de qué está volviendo a tu escritorio y por qué.</p>
            <div style={{ marginTop: 8 }}>
              <IndexRow index="01" title="Antes de la llamada" description="Respondes seis datos de contexto." meta="5 min" />
              <IndexRow index="02" title="Durante" description="Revisamos decisiones, roles y cadencia." meta="45 min" />
              <IndexRow index="03" title="Después" description="Te enviamos qué ordenaríamos primero." meta="48 h" />
            </div>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <Tag tone="outline">ES / EN / DE</Tag><Tag tone="neutral">Américas · Europa</Tag>
            </div>
          </div>

          <Card surface="white" padding={32} style={{ gap: 20 }}>
            {sent ? (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16, minHeight: 420, justifyContent: 'center' }}>
                <StatusDot status="ok" label="Solicitud recibida" />
                <h2 style={{ margin: 0, font: 'var(--text-h3)', letterSpacing: 'var(--ls-snug)' }}>Elige el horario que te sirva.</h2>
                <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: 'var(--text-secondary)' }}>Te llevamos al calendario de Manuel. Si prefieres, respondemos por correo.</p>
                <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                  <Button href={window.MEET} variant="primary" iconRight={<Icon name="arrow-up-right" size={15} />}>Ver horarios</Button>
                  <Button variant="ghost" onClick={() => setSent(false)}>Editar datos</Button>
                </div>
              </div>
            ) : (<>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: 'var(--ls-label)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Contexto · 6 campos</div>
              <div className="ds10-form-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <Input label="Nombre" placeholder="Nombre y apellido" />
                <Input label="Empresa" placeholder="Nombre legal" />
                <Input label="Correo" type="email" placeholder="tu@empresa.com" />
                <Input label="Facturación anual" mono placeholder="USD 4.000.000" hint="Rango aproximado" />
                <Select label="Rol" options={['Dueño / fundador', 'CEO', 'Gerente general', 'Director de área']} />
                <Select label="País" options={['Chile', 'México', 'Colombia', 'Perú', 'Estados Unidos', 'Otro']} />
              </div>
              <Input label="Qué vuelve a tu escritorio" placeholder="Una frase concreta" />
              <Checkbox defaultChecked label="Quiero recibir la lectura por correo" description="Sin lista de difusión." />
              <Button variant="primary" size="lg" fullWidth onClick={() => setSent(true)} iconRight={<Icon name="arrow-right" size={16} />}>Continuar al calendario</Button>
              <p style={{ margin: 0, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)' }}>Los datos se usan solo para preparar la conversación.</p>
            </>)}
          </Card>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { Diagnostico });