/* eslint-disable react/prop-types */
/**
 * ProjectStarter · Diálogo guiado de auto-calificación del proyecto.
 *
 * En lugar de preguntar "¿no sabes qué servicio necesitas?" (condescendiente),
 * el tono es de asesor que ya entiende el campo: "Cuéntanos en qué momento
 * está tu proyecto y te decimos por dónde se entra al de Prosperia."
 *
 * Tres preguntas suaves:
 *   1. ¿En qué etapa está tu proyecto?
 *   2. ¿Cuál es el reto principal hoy?
 *   3. ¿Cómo prefieres avanzar?
 *
 * Resultado: recomendación de servicio (Originación / Co-Desarrollo / Dataria)
 * + CTA a conversación con contexto pre-cargado.
 */

const { useState: uS_Ps } = React;

const STEPS = [
  {
    id: 'etapa',
    question: '¿En qué momento está tu proyecto?',
    helper: 'No hay respuesta "correcta" — solo nos ayuda a entender el punto de partida.',
    options: [
      { id: 'idea',       label: 'Tengo un polígono o un terreno y aún no decido qué hacer',         score: { originacion: 3, codesarrollo: 0, dataria: 1 } },
      { id: 'plan',       label: 'Tengo una idea clara pero quiero validar con números',             score: { originacion: 2, codesarrollo: 1, dataria: 3 } },
      { id: 'ejecucion',  label: 'Ya tengo plan ejecutivo y voy a comercializar pronto',             score: { originacion: 0, codesarrollo: 3, dataria: 1 } },
      { id: 'operacion',  label: 'Mi proyecto ya está en operación y busco optimizar',               score: { originacion: 0, codesarrollo: 2, dataria: 2 } },
    ],
  },
  {
    id: 'reto',
    question: '¿Cuál es el reto principal hoy?',
    helper: 'Marca el que mejor describe tu situación. Si dudas, elige el más urgente.',
    options: [
      { id: 'demanda',    label: 'Entender qué tipo de inmobiliario cabe en mi zona',                score: { originacion: 3, codesarrollo: 0, dataria: 2 } },
      { id: 'producto',   label: 'Definir mezcla de producto, precios y tenant mix',                 score: { originacion: 2, codesarrollo: 2, dataria: 1 } },
      { id: 'riesgo',     label: 'Compartir riesgo con un socio que conozca la operación',           score: { originacion: 0, codesarrollo: 3, dataria: 0 } },
      { id: 'datos',      label: 'Tener datos en vivo para tomar decisiones más rápido',             score: { originacion: 0, codesarrollo: 1, dataria: 3 } },
    ],
  },
  {
    id: 'estilo',
    question: '¿Cómo prefieres avanzar?',
    helper: 'Te recomendamos lo que mejor se ajuste, pero la decisión sigue siendo tuya.',
    options: [
      { id: 'fases',      label: 'Por fases contratables independientes',                            score: { originacion: 2, codesarrollo: 0, dataria: 1 } },
      { id: 'integral',   label: 'Con un acompañamiento integral hasta la operación',                score: { originacion: 0, codesarrollo: 3, dataria: 0 } },
      { id: 'autonomo',   label: 'Con una herramienta que pueda usar mi equipo',                     score: { originacion: 0, codesarrollo: 0, dataria: 3 } },
    ],
  },
];

const RECOMMENDATIONS = {
  originacion: {
    title: 'Te recomendamos empezar por Originación',
    body: 'Para tu situación, lo más útil es la lectura del polígono primero — la matriz de demanda real, mapa de vocaciones, curva de capacidad de pago. Es la brújula completa antes de gastar un peso en planos. Después, si tiene sentido, se contratan las fases siguientes por separado.',
    anchor: '/servicios/Servicios.html#originacion',
    label: 'Conocer Originación',
  },
  codesarrollo: {
    title: 'Te recomendamos Co-Desarrollo',
    body: 'Lo que describes encaja con nuestro modelo de acompañamiento integral — desde la lectura hasta la operación, con riesgo compartido. Compensamos sólo si el proyecto camina. Es para socios que prefieren un equipo que se la juega contigo.',
    anchor: '/servicios/Servicios.html#co-desarrollo',
    label: 'Conocer Co-Desarrollo',
  },
  dataria: {
    title: 'Te recomendamos Dataria',
    body: 'Para tu situación, tiene más sentido la plataforma que opera el algoritmo DIGO® — dashboards en vivo, curvas de capacidad de pago, demanda por componente, todo accionable desde tu navegador. La usa tu equipo, no nosotros por ti.',
    anchor: '/servicios/Servicios.html#digo',
    label: 'Conocer Dataria',
  },
};

function ProjectStarter() {
  const [step, setStep] = uS_Ps(0);
  const [scores, setScores] = uS_Ps({ originacion: 0, codesarrollo: 0, dataria: 0 });
  const [done, setDone] = uS_Ps(false);

  const choose = (option) => {
    const next = {
      originacion:  scores.originacion  + option.score.originacion,
      codesarrollo: scores.codesarrollo + option.score.codesarrollo,
      dataria:      scores.dataria      + option.score.dataria,
    };
    setScores(next);
    if (step + 1 >= STEPS.length) {
      setDone(true);
    } else {
      setStep(step + 1);
    }
  };

  const reset = () => {
    setStep(0);
    setScores({ originacion: 0, codesarrollo: 0, dataria: 0 });
    setDone(false);
  };

  const winner = Object.entries(scores).sort((a, b) => b[1] - a[1])[0]?.[0] || 'originacion';
  const reco = RECOMMENDATIONS[winner];

  return (
    <section
      data-screen-label="09b Project Starter"
      style={psStyles.section}
    >
      <div className="container" style={psStyles.inner}>
        <window.Reveal style={psStyles.header}>
          <span style={psStyles.eyebrow}>HERRAMIENTA · 2 MINUTOS</span>
          <h2 style={psStyles.title}>
            Cuéntanos de tu proyecto.<br/>
            Te decimos por dónde empezar.
          </h2>
          <p style={psStyles.lead}>
            Tres preguntas. Al final te recomendamos el servicio que mejor encaja en tu momento. Sin formulario, sin captura de datos — la decisión sigue siendo tuya.
          </p>
        </window.Reveal>

        <window.Reveal delay={140} style={psStyles.card}>
          {!done ? (
            <div style={psStyles.cardInner}>
              <div style={psStyles.progress}>
                <span style={psStyles.progressLabel}>
                  Paso {step + 1} de {STEPS.length}
                </span>
                <div style={psStyles.progressTrack}>
                  <div style={{ ...psStyles.progressFill, width: `${((step + 1) / STEPS.length) * 100}%` }} />
                </div>
              </div>

              <h3 style={psStyles.question}>{STEPS[step].question}</h3>
              <p style={psStyles.helper}>{STEPS[step].helper}</p>

              <div style={psStyles.options}>
                {STEPS[step].options.map((opt) => (
                  <button
                    key={opt.id}
                    type="button"
                    onClick={() => choose(opt)}
                    style={psStyles.option}
                    data-cursor="link"
                  >
                    <span style={psStyles.optionText}>{opt.label}</span>
                    <window.Icon name="arrow-right" size={16} stroke={1.8} />
                  </button>
                ))}
              </div>
            </div>
          ) : (
            <div style={psStyles.cardInner}>
              <span style={psStyles.recoEyebrow}>NUESTRA SUGERENCIA</span>
              <h3 style={psStyles.recoTitle}>{reco.title}</h3>
              <p style={psStyles.recoBody}>{reco.body}</p>

              <div style={psStyles.recoActions}>
                <a
                  href={reco.anchor}
                  className="btn btn-copper"
                  data-cursor="link"
                  style={psStyles.recoPrimary}
                >
                  {reco.label}
                  <window.Icon name="arrow-right" size={16} stroke={1.8} />
                </a>
                <button type="button" onClick={reset} style={psStyles.recoSecondary} data-cursor="link">
                  Probar con otra respuesta
                </button>
              </div>
            </div>
          )}
        </window.Reveal>
      </div>
    </section>
  );
}

const psStyles = {
  section: {
    background: 'var(--color-cream)',
    paddingBlock: 'clamp(64px, 9vw, 120px)',
  },
  inner: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 'clamp(32px, 5vw, 56px)',
  },
  header: {
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
    maxWidth: 760,
  },
  eyebrow: {
    fontWeight: 700,
    fontSize: 'clamp(12px, 0.9vw, 14px)',
    letterSpacing: '0.22em',
    textTransform: 'uppercase',
    color: 'var(--color-copper-fallback)',
  },
  title: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(30px, 4.4vw, 52px)',
    lineHeight: 1.08,
    letterSpacing: '-0.015em',
    color: 'var(--color-navy-deep)',
    textWrap: 'balance',
  },
  lead: {
    margin: 0,
    fontSize: 'clamp(15px, 1.2vw, 17px)',
    lineHeight: 1.65,
    color: 'var(--color-navy-medium)',
  },
  card: {
    background: '#fff',
    border: '1px solid rgba(33, 52, 64, 0.10)',
    borderRadius: 4,
    padding: 'clamp(28px, 4vw, 56px)',
    boxShadow: '0 12px 40px rgba(33, 52, 64, 0.06)',
    maxWidth: 880,
  },
  cardInner: {
    display: 'flex',
    flexDirection: 'column',
    gap: 24,
  },
  progress: {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
  },
  progressLabel: {
    fontSize: 11,
    fontWeight: 700,
    letterSpacing: '0.18em',
    textTransform: 'uppercase',
    color: 'var(--color-navy-medium)',
  },
  progressTrack: {
    width: '100%',
    height: 2,
    background: 'rgba(33, 52, 64, 0.10)',
    borderRadius: 999,
    overflow: 'hidden',
  },
  progressFill: {
    height: '100%',
    background: 'var(--color-copper-fallback)',
    borderRadius: 999,
    transition: 'width 360ms cubic-bezier(0.16, 1, 0.3, 1)',
  },
  question: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(22px, 2.4vw, 32px)',
    lineHeight: 1.2,
    color: 'var(--color-navy-deep)',
    letterSpacing: '-0.005em',
  },
  helper: {
    margin: 0,
    fontSize: 14,
    color: 'var(--color-navy-medium)',
    fontStyle: 'italic',
  },
  options: {
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
    marginTop: 8,
  },
  option: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 16,
    padding: '16px 20px',
    background: 'var(--color-cream)',
    border: '1px solid rgba(33, 52, 64, 0.12)',
    borderRadius: 3,
    color: 'var(--color-navy-deep)',
    fontSize: 'clamp(14px, 1.1vw, 16px)',
    fontWeight: 600,
    textAlign: 'left',
    cursor: 'pointer',
    transition: 'background 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1)',
  },
  optionText: {
    flex: 1,
    lineHeight: 1.5,
  },
  recoEyebrow: {
    fontWeight: 700,
    fontSize: 'clamp(11px, 0.85vw, 13px)',
    letterSpacing: '0.22em',
    textTransform: 'uppercase',
    color: 'var(--color-copper-fallback)',
  },
  recoTitle: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(26px, 3.2vw, 40px)',
    lineHeight: 1.12,
    letterSpacing: '-0.01em',
    color: 'var(--color-navy-deep)',
  },
  recoBody: {
    margin: 0,
    fontSize: 'clamp(15px, 1.2vw, 17px)',
    lineHeight: 1.7,
    color: 'var(--color-navy-medium)',
    maxWidth: 700,
  },
  recoActions: {
    display: 'flex',
    flexWrap: 'wrap',
    gap: 16,
    alignItems: 'center',
    marginTop: 8,
  },
  recoPrimary: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 12,
    paddingInline: 28,
    paddingBlock: 14,
    fontSize: 14,
    fontWeight: 700,
    letterSpacing: '0.08em',
    textTransform: 'uppercase',
    border: 'none',
  },
  recoSecondary: {
    background: 'transparent',
    border: 'none',
    color: 'var(--color-navy-medium)',
    fontSize: 14,
    fontWeight: 600,
    textDecoration: 'underline',
    textDecorationColor: 'rgba(33, 52, 64, 0.3)',
    textUnderlineOffset: 4,
    cursor: 'pointer',
    padding: 8,
  },
};

const psMQ = document.createElement('style');
psMQ.textContent = `
  section[data-screen-label="09b Project Starter"] button[type="button"]:hover {
    background: #fff !important;
    border-color: var(--color-copper-fallback) !important;
    transform: translateX(4px);
  }
  section[data-screen-label="09b Project Starter"] button[type="button"]:hover svg {
    color: var(--color-copper-fallback);
  }
`;
document.head.appendChild(psMQ);

window.ProjectStarter = ProjectStarter;