/* global React, Icon, Button, Eyebrow, Badge, Droplets, Container */

const ST = {
  green:  '#38C28C',
  lime:   '#6DD442',
  bg:     '#E9F8EE',
  bgMid:  '#C8EDD8',
  dark:   '#1A5C40',
};

// ============================================================
// DIAGNOSTIC PREVIEW — hero visual
// ============================================================
function DiagnosticPreview() {
  const areas = [
    { label: 'Posicionamiento de marca',  score: 72, status: 'warning' },
    { label: 'Generación de leads',        score: 38, status: 'danger'  },
    { label: 'Estrategia de contenido',    score: 55, status: 'warning' },
    { label: 'Conversión y nurturing',     score: 29, status: 'danger'  },
    { label: 'Retención y fidelización',   score: 81, status: 'ok'      },
  ];
  const sc = {
    ok:      { bar: ST.green,              badge: ST.bg,             text: ST.dark              },
    warning: { bar: 'var(--yellow-500)',   badge: 'var(--yellow-50)', text: 'var(--yellow-700)' },
    danger:  { bar: 'var(--danger)',       badge: '#FEF0EE',          text: 'var(--danger)'     },
  };
  const sl = { ok: 'Bien', warning: 'Mejorable', danger: 'Crítico' };

  return (
    <div style={{
      background: '#fff', border: '1px solid var(--border)',
      borderRadius: 24, boxShadow: 'var(--shadow-lg)', overflow: 'hidden',
    }}>
      {/* Window chrome */}
      <div style={{
        padding: '12px 16px', background: 'var(--ink-25)',
        borderBottom: '1px solid var(--border)',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          {['#FF5F57','#FEBC2E','#27C840'].map(c => (
            <div key={c} style={{ width: 10, height: 10, borderRadius: 999, background: c }} />
          ))}
        </div>
        <div style={{
          flex: 1, fontFamily: 'var(--font-mono)', fontSize: 11.5,
          color: 'var(--fg3)', textAlign: 'center',
        }}>Diagnóstico de Marketing · FRSKO Start</div>
        <div style={{
          fontSize: 10, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase',
          color: ST.dark, padding: '3px 8px', borderRadius: 999, background: ST.bg,
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: ST.green }} />
          Semana 1–2
        </div>
      </div>

      {/* Client strip */}
      <div style={{
        padding: '16px 20px', borderBottom: '1px solid var(--border)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--fg1)' }}>Empresa Ejemplo S.A.</div>
          <div style={{ fontSize: 11.5, color: 'var(--fg3)', marginTop: 1 }}>B2B SaaS · 45 empleados · CDMX</div>
        </div>
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 700,
          fontSize: 28, color: ST.green, letterSpacing: '-0.025em',
        }}>54<span style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg3)', letterSpacing: 0 }}>/100</span></div>
      </div>

      {/* Areas */}
      <div style={{ padding: '6px 0' }}>
        {areas.map((area, i) => (
          <div key={area.label} style={{
            padding: '12px 20px',
            borderBottom: i < areas.length - 1 ? '1px solid var(--border)' : 'none',
            animation: `diagSlide 420ms var(--ease-out) ${i * 80}ms both`,
          }}>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 7,
            }}>
              <div style={{ fontSize: 13, color: 'var(--fg1)', fontWeight: 500 }}>{area.label}</div>
              <div style={{
                fontSize: 10.5, fontWeight: 700, letterSpacing: '0.04em',
                padding: '2px 8px', borderRadius: 999,
                background: sc[area.status].badge, color: sc[area.status].text,
              }}>{sl[area.status]}</div>
            </div>
            <div style={{ height: 5, background: 'var(--ink-100)', borderRadius: 999, overflow: 'hidden' }}>
              <div style={{
                height: '100%', borderRadius: 999,
                background: sc[area.status].bar, width: `${area.score}%`,
                transition: 'width 900ms var(--ease-out)',
              }} />
            </div>
          </div>
        ))}
      </div>

      {/* Footer hint */}
      <div style={{
        padding: '13px 20px', background: ST.bg,
        fontSize: 12, color: ST.dark,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon name="sparkles" size={13} />
          IA identificó 8 oportunidades de mejora
        </span>
        <span style={{ fontWeight: 600 }}>Ver plan →</span>
      </div>

      <style>{`
        @keyframes diagSlide {
          from { opacity: 0; transform: translateX(6px); }
          to   { opacity: 1; transform: translateX(0); }
        }
      `}</style>
    </div>
  );
}

// ============================================================
// HERO
// ============================================================
function StartHero({ onCta }) {
  return (
    <section id="top" style={{
      position: 'relative', overflow: 'hidden',
      background: `radial-gradient(80% 60% at 50% 0%, ${ST.bg} 0%, var(--ink-0) 70%)`,
    }}>
      <Droplets style={{ right: -60, top: 80 }}   color={ST.lime}  opacity={0.32} size={240} />
      <Droplets style={{ left: -100, bottom: -60 }} color={ST.green} opacity={0.18} size={300} />
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(20,47,50,0.05) 1px, transparent 0)',
        backgroundSize: '32px 32px',
        maskImage: 'radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent)',
        WebkitMaskImage: 'radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent)',
      }} />

      <Container style={{ padding: '72px 32px 96px', position: 'relative' }}>
        {/* Breadcrumb */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--font-mono)', fontSize: 11.5,
          color: 'var(--fg3)', letterSpacing: '0.02em', marginBottom: 26,
        }}>
          <a href="/" style={{ color: 'var(--fg3)' }}>frsko.com</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <a href="/servicios" style={{ color: 'var(--fg3)' }}>servicios</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <span style={{ color: ST.green, fontWeight: 600 }}>consultoria</span>
        </div>

        <div className="start-hero-grid" style={{
          display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 56, alignItems: 'start',
        }}>
          {/* Left — copy */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22 }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '5px 12px', borderRadius: 999,
                background: '#fff', border: `1px solid ${ST.green}`,
                fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: ST.dark,
              }}>
                <Icon name="compass" size={12} />
                FRSKO Start · Consultoría
              </div>
              <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.06em', color: 'var(--fg3)' }}>
                Estrategia · MX / LATAM
              </span>
            </div>

            <h1 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 'clamp(36px, 5vw, 66px)',
              lineHeight: 1.02, letterSpacing: '-0.035em',
              margin: '0 0 24px', color: 'var(--fg1)',
            }}>
              Antes de gastar<br/>en marketing,<br/>entiende qué<br/>
              <span style={{ color: ST.green, fontStyle: 'italic' }}>marketing necesita<br/>tu empresa.</span>
            </h1>

            <p style={{
              fontSize: 'clamp(16px, 1.4vw, 19px)', lineHeight: 1.6,
              color: 'var(--fg2)', maxWidth: 540, margin: '0 0 32px',
            }}>
              FRSKO Start es consultoría de marketing estratégico donde un especialista analiza
              tu empresa, identifica las oportunidades reales y construye contigo el plan que
              tiene sentido para tu momento de negocio — no el que está de moda.
            </p>

            <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', marginBottom: 32 }}>
              <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                Agendar sesión de diagnóstico
              </Button>
              <Button variant="ghost" size="lg" icon="compass" onClick={() => {
                document.getElementById('proceso')?.scrollIntoView({ behavior: 'smooth' });
              }}>
                Conocer la metodología
              </Button>
            </div>

            <div style={{ display: 'flex', alignItems: 'center', gap: 18, color: 'var(--fg3)', fontSize: 13.5, flexWrap: 'wrap' }}>
              {[
                'Sin contratos eternos',
                'Primera sesión sin costo',
                'CDMX · LATAM · Online',
              ].map((text, i) => (
                <React.Fragment key={text}>
                  {i > 0 && <div style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--ink-300)' }} />}
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <Icon name="check" size={14} stroke={2} style={{ color: ST.green }} />
                    {text}
                  </div>
                </React.Fragment>
              ))}
            </div>
          </div>

          {/* Right — visual */}
          <DiagnosticPreview />
        </div>
      </Container>

      <style>{`
        @media (max-width: 980px) {
          .start-hero-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
// PROBLEM
// ============================================================
function StartProblem() {
  const symptoms = [
    'Contrataste agencias, pero los resultados son inconsistentes',
    'Pusiste anuncios, pero el costo por lead no para de subir',
    'Tienes un CRM, pero nadie lo alimenta bien',
    'Tu equipo produce contenido, pero no genera conversiones',
    'Sabes que algo no funciona, pero no sabes exactamente qué',
  ];

  return (
    <section style={{ background: '#fff', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div className="start-problem-grid" style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 72, alignItems: 'center',
        }}>
          <div>
            <Eyebrow>El problema</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 'clamp(28px, 3.8vw, 52px)',
              lineHeight: 1.05, letterSpacing: '-0.035em',
              margin: '18px 0 24px', color: 'var(--fg1)',
            }}>
              ¿Cuánto has invertido<br/>en marketing sin saber<br/>exactamente por qué{' '}
              <span style={{
                display: 'inline', fontStyle: 'italic',
                background: `linear-gradient(180deg, transparent 58%, ${ST.bgMid} 58%)`,
                padding: '0 4px',
              }}>no está funcionando?</span>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 22px' }}>
              La mayoría de las empresas llegan a FRSKO con el mismo patrón: ya probaron agencias,
              ya pusieron anuncios, ya contrataron community managers, ya compraron un CRM.
              Y los resultados siguen siendo inconsistentes.
            </p>
            <p style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 22, lineHeight: 1.25, letterSpacing: '-0.02em',
              color: ST.dark, margin: 0,
            }}>
              Normalmente no es que las herramientas estén mal.<br/>
              Es que no hay una estrategia que las conecte.
            </p>
          </div>

          {/* Symptoms card */}
          <div style={{
            background: 'var(--ink-25)', border: '1px solid var(--border)',
            borderRadius: 22, overflow: 'hidden',
          }}>
            <div style={{
              padding: '18px 22px', borderBottom: '1px solid var(--border)',
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 10,
                background: '#FEF0EE', color: 'var(--danger)',
                display: 'grid', placeItems: 'center',
              }}>
                <Icon name="zap" size={16} />
              </div>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--fg1)' }}>Señales de alarma</div>
            </div>
            <div>
              {symptoms.map((s, i) => (
                <div key={i} style={{
                  padding: '13px 22px',
                  borderBottom: i < symptoms.length - 1 ? '1px solid var(--border)' : 'none',
                  display: 'flex', alignItems: 'flex-start', gap: 12,
                }}>
                  <div style={{
                    width: 20, height: 20, borderRadius: 999, flexShrink: 0, marginTop: 1,
                    background: '#FEF0EE', display: 'grid', placeItems: 'center',
                  }}>
                    <div style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--danger)' }} />
                  </div>
                  <span style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--fg2)' }}>{s}</span>
                </div>
              ))}
            </div>
            <div style={{
              padding: '14px 22px', background: ST.bg,
              fontSize: 13, color: ST.dark, fontWeight: 500,
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <Icon name="compass" size={14} />
              Eso es exactamente lo que construimos en FRSKO Start.
            </div>
          </div>
        </div>
      </Container>

      <style>{`
        @media (max-width: 980px) {
          .start-problem-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
// PARA QUIÉN — 3 MOMENTOS
// ============================================================
function StartFor() {
  const moments = [
    {
      tag: 'Momento 1', icon: 'rocket', title: 'Arranque',
      headline: 'Empiezas una empresa o nuevo producto',
      body: 'Quieres construir tu presencia de marketing con bases sólidas desde el inicio — no corregir errores costosos después.',
      detail: 'Ideal para fundadores en etapa temprana y lanzamientos de producto.',
      color: ST.green, bg: ST.bg,
    },
    {
      tag: 'Momento 2', icon: 'chart', title: 'Reinicio',
      headline: 'Tu marketing actual no da resultados claros',
      body: 'Necesitas un diagnóstico honesto y un plan nuevo antes de seguir invirtiendo en lo mismo.',
      detail: 'Para empresas de 2–10 años que saben que algo no está funcionando.',
      color: 'var(--brand)', bg: 'var(--teal-50)', featured: true,
    },
    {
      tag: 'Momento 3', icon: 'users', title: 'Escala',
      headline: 'Tu negocio creció y lo de antes ya no es suficiente',
      body: 'Necesitas una estrategia de marketing que acompañe el nuevo tamaño y los nuevos objetivos.',
      detail: 'Para empresas en hipercrecimiento o expansión a nuevos mercados.',
      color: 'var(--sub-academy-1)', bg: 'var(--sub-academy-bg)',
    },
  ];

  return (
    <section style={{ background: 'var(--ink-25)', position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ right: -80, bottom: -40 }} color={ST.lime} opacity={0.18} size={260} />
      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 52 }}>
          <Eyebrow>Para quién</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(26px, 3.4vw, 46px)',
            lineHeight: 1.06, letterSpacing: '-0.03em',
            margin: '14px auto 0', maxWidth: 680,
          }}>
            FRSKO Start tiene más sentido<br/>en tres momentos específicos.
          </h2>
        </div>

        <div className="start-for-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {moments.map(m => (
            <div key={m.tag} style={{
              background: m.featured ? 'var(--fg1)' : '#fff',
              borderRadius: 24, padding: '32px',
              border: m.featured ? 'none' : '1px solid var(--border)',
              boxShadow: m.featured ? 'var(--shadow-xl)' : 'var(--shadow-sm)',
              transform: m.featured ? 'translateY(-8px)' : 'none',
              display: 'flex', flexDirection: 'column',
              position: 'relative', overflow: 'hidden',
              transition: 'transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)',
            }}
              onMouseEnter={e => {
                if (!m.featured) { e.currentTarget.style.boxShadow = 'var(--shadow-md)'; e.currentTarget.style.transform = 'translateY(-4px)'; }
              }}
              onMouseLeave={e => {
                if (!m.featured) { e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; e.currentTarget.style.transform = 'none'; }
              }}>
              {m.featured && (
                <Droplets style={{ right: -20, top: -10 }} color="rgba(56,194,140,0.22)" opacity={1} size={160} />
              )}

              <div style={{
                alignSelf: 'flex-start',
                padding: '3px 10px', borderRadius: 999, marginBottom: 22,
                background: m.featured ? 'rgba(255,255,255,0.1)' : m.bg,
                color: m.featured ? 'rgba(255,255,255,0.8)' : m.color,
                fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
              }}>{m.tag}</div>

              <div style={{
                width: 52, height: 52, borderRadius: 16, marginBottom: 20,
                background: m.featured ? 'rgba(255,255,255,0.1)' : m.bg,
                color: m.featured ? '#fff' : m.color,
                display: 'grid', placeItems: 'center',
              }}>
                <Icon name={m.icon} size={24} />
              </div>

              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 700,
                fontSize: 21, letterSpacing: '-0.02em', lineHeight: 1.18,
                margin: '0 0 14px', color: m.featured ? '#fff' : 'var(--fg1)',
              }}>{m.headline}</h3>

              <p style={{
                fontSize: 15, lineHeight: 1.55, margin: '0 0 20px',
                color: m.featured ? 'rgba(255,255,255,0.72)' : 'var(--fg2)',
              }}>{m.body}</p>

              <div style={{
                fontSize: 13, fontStyle: 'italic', marginTop: 'auto',
                paddingTop: 16,
                borderTop: `1px solid ${m.featured ? 'rgba(255,255,255,0.12)' : 'var(--border)'}`,
                color: m.featured ? 'rgba(255,255,255,0.45)' : 'var(--fg3)',
              }}>{m.detail}</div>
            </div>
          ))}
        </div>
      </Container>

      <style>{`
        @media (max-width: 860px) {
          .start-for-grid { grid-template-columns: 1fr !important; }
          .start-for-grid > div { transform: none !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
// PROCESO — 3 FASES + ENTREGABLES
// ============================================================
function StartProcess() {
  const phases = [
    {
      n: '01', weeks: 'Semana 1–2', title: 'Diagnóstico', icon: 'search',
      body: 'Tu consultor hace una revisión profunda de tu negocio: modelo de ingresos, audiencias, competencia, canales actuales, métricas de marketing, posicionamiento de marca.',
      detail: 'No es un cuestionario genérico — es una conversación con alguien que ya conoce tu industria.',
    },
    {
      n: '02', weeks: 'Semana 3–4', title: 'Estrategia', icon: 'compass',
      body: 'Con base en el diagnóstico, construimos tu plan de marketing: posicionamiento, audiencias prioritarias, canales recomendados, presupuesto sugerido, KPIs por etapa.',
      detail: 'Todo en un documento que puedes llevar a tu equipo o a cualquier proveedor.',
    },
    {
      n: '03', weeks: 'Mes 2 en adelante', title: 'Acompañamiento', icon: 'users',
      body: 'Sesiones semanales de 90 minutos para revisar avances, resolver bloqueos, ajustar la estrategia con base en datos reales y tomar decisiones fundamentadas.',
      detail: 'Tu consultor es el co-piloto estratégico de tu área de marketing.',
    },
  ];

  const deliverables = [
    { icon: 'clipboard',  text: 'Diagnóstico de marketing (reporte escrito)' },
    { icon: 'users',      text: 'Mapa de audiencias y buyer personas' },
    { icon: 'chart',      text: 'Plan de marketing a 6 meses con canales, presupuesto y KPIs' },
    { icon: 'briefcase',  text: 'Plantilla de brief para ejecutar campañas' },
    { icon: 'calendar',   text: 'Sesiones semanales de acompañamiento documentadas' },
    { icon: 'sparkles',   text: 'Acceso a herramientas y plantillas de FRSKO' },
  ];

  return (
    <section id="proceso" style={{ background: '#fff' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <Eyebrow>Cómo funciona</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(28px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 0', color: 'var(--fg1)',
          }}>
            Un consultor especialista. Sesiones semanales.<br/>
            Resultados en{' '}
            <span style={{ color: ST.green }}>semanas, no trimestres.</span>
          </h2>
        </div>

        {/* Phase rows */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 56 }}>
          {phases.map((p, i) => (
            <div key={p.n}
              className="start-phase-row"
              style={{
                background: 'var(--ink-25)', border: '1px solid var(--border)',
                borderRadius: 22, padding: '28px 32px',
                display: 'grid', gridTemplateColumns: '72px 1fr 1.3fr 48px',
                gap: 28, alignItems: 'center',
                transition: 'all var(--dur-base) var(--ease-out)',
              }}
              onMouseEnter={e => {
                e.currentTarget.style.borderColor = ST.green;
                e.currentTarget.style.background = ST.bg;
                e.currentTarget.style.boxShadow = 'var(--shadow-md)';
              }}
              onMouseLeave={e => {
                e.currentTarget.style.borderColor = 'var(--border)';
                e.currentTarget.style.background = 'var(--ink-25)';
                e.currentTarget.style.boxShadow = '';
              }}>
              <div>
                <div style={{
                  fontFamily: 'var(--font-display)', fontSize: 52,
                  fontWeight: 700, letterSpacing: '-0.04em',
                  color: 'var(--fg1)', lineHeight: 1, marginBottom: 3,
                }}>{p.n}</div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  color: ST.green, fontWeight: 600, letterSpacing: '0.04em',
                }}>paso</div>
              </div>

              <div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  padding: '3px 9px', borderRadius: 6,
                  background: ST.bg, color: ST.dark,
                  display: 'inline-block', marginBottom: 13,
                }}>{p.weeks}</div>
                <div style={{
                  width: 42, height: 42, borderRadius: 12,
                  background: ST.bg, color: ST.green,
                  display: 'grid', placeItems: 'center', marginBottom: 12,
                }}>
                  <Icon name={p.icon} size={20} />
                </div>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontWeight: 700,
                  fontSize: 22, letterSpacing: '-0.02em', margin: 0, color: 'var(--fg1)',
                }}>{p.title}</h3>
              </div>

              <div>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 10px' }}>
                  {p.body}
                </p>
                <p style={{ fontSize: 13.5, lineHeight: 1.5, color: ST.green, fontStyle: 'italic', margin: 0 }}>
                  → {p.detail}
                </p>
              </div>

              <div style={{
                width: 40, height: 40, borderRadius: 999,
                background: i === phases.length - 1 ? ST.green : 'var(--ink-100)',
                color: i === phases.length - 1 ? '#fff' : 'var(--ink-400)',
                display: 'grid', placeItems: 'center', flexShrink: 0,
              }}>
                <Icon name="arrow-right" size={17} />
              </div>
            </div>
          ))}
        </div>

        {/* Deliverables box */}
        <div style={{
          background: 'var(--ink-25)', border: '1px solid var(--border)',
          borderRadius: 24, padding: '36px 40px',
        }}>
          <div style={{ marginBottom: 24 }}>
            <Eyebrow>Entregables</Eyebrow>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 24, letterSpacing: '-0.02em', margin: '8px 0 0',
            }}>Lo que recibes al terminar</h3>
          </div>
          <div className="start-deliverables-grid" style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14,
          }}>
            {deliverables.map((d, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'flex-start', gap: 12,
                background: '#fff', borderRadius: 16, padding: '16px 20px',
                border: '1px solid var(--border)',
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 10, flexShrink: 0,
                  background: ST.bg, color: ST.green,
                  display: 'grid', placeItems: 'center',
                }}>
                  <Icon name={d.icon} size={18} />
                </div>
                <div style={{ fontSize: 13.5, lineHeight: 1.45, color: 'var(--fg2)', fontWeight: 500 }}>
                  {d.text}
                </div>
              </div>
            ))}
          </div>
        </div>
      </Container>

      <style>{`
        @media (max-width: 860px) {
          .start-phase-row { grid-template-columns: 1fr !important; gap: 14px !important; }
          .start-deliverables-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 560px) {
          .start-deliverables-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { StartHero, StartProblem, StartFor, StartProcess });