// Process page — three switchable layouts via Tweaks.
//   'timeline'   — vertical timeline
//   'horizontal' — interactive horizontal step bar
//   'cards'      — numbered cards grid

const ProcessTimeline = () => {
  const { isMobile } = useBreakpoint();
  const pad = isMobile ? '32px 20px 64px' : '40px 80px 100px';
  const iconSize = isMobile ? 48 : 64;

  return (
    <section style={{ padding: pad, background: '#fff' }}>
      <div style={{ maxWidth: 920, margin: '0 auto', position: 'relative' }}>
        <div style={{ position: 'absolute', left: Math.floor(iconSize / 2) - 1, top: 0, bottom: 0, width: 2, background: 'linear-gradient(180deg, var(--atom-50), var(--scrubs-50), var(--proton-light), var(--sunset-50), var(--spark-50))' }}/>
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 32 : 48 }}>
          {PROCESS_STEPS.map(s => (
            <div key={s.n} style={{ display: 'grid', gridTemplateColumns: `${iconSize}px 1fr`, gap: isMobile ? 16 : 28, alignItems: 'start' }}>
              <div style={{
                width: iconSize, height: iconSize, borderRadius: '50%', background: s.tint, color: 'var(--stability-50)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                boxShadow: '0 0 0 6px #fff, 0 0 0 7px var(--ink-200)', position: 'relative',
              }}>
                <StepIcon name={s.icon} size={isMobile ? 22 : 28}/>
              </div>
              <div style={{ paddingTop: isMobile ? 4 : 6, display: 'flex', flexDirection: 'column', gap: isMobile ? 6 : 10 }}>
                <div style={{ fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent-warm-deep)', fontWeight: 700 }}>Step {s.n} · {s.duration}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 20 : 30, color: 'var(--ink-900)', letterSpacing: '-0.02em', margin: 0 }}>{s.title}</h3>
                <p style={{ fontFamily: 'var(--font-ui)', fontSize: isMobile ? 14 : 16, color: 'var(--ink-700)', lineHeight: 1.7, maxWidth: 680, margin: 0 }}>{s.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const ProcessHorizontal = () => {
  const { isMobile } = useBreakpoint();
  const [active, setActive] = React.useState(0);

  // On mobile, horizontal step bar is hard to use — render as a timeline instead.
  if (isMobile) return <ProcessTimeline />;

  return (
    <section style={{ padding: '40px 80px 100px', background: '#fff' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${PROCESS_STEPS.length}, 1fr)`, gap: 8, position: 'relative', marginBottom: 48 }}>
          <div style={{ position: 'absolute', left: '8%', right: '8%', top: 32, height: 2, background: 'var(--ink-200)', zIndex: 0 }}/>
          {PROCESS_STEPS.map((s, i) => (
            <button key={s.n} onClick={() => setActive(i)} style={{
              background: 'transparent', border: 0, cursor: 'pointer', padding: 0,
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, position: 'relative', zIndex: 1,
            }}>
              <div style={{
                width: 64, height: 64, borderRadius: '50%',
                background: active === i ? s.tint : '#fff', color: 'var(--stability-50)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: active === i ? '0 0 0 4px var(--stability-50)' : 'inset 0 0 0 2px var(--ink-300)',
                transition: '200ms ease-out',
              }}>
                <StepIcon name={s.icon} size={26}/>
              </div>
              <div style={{ fontFamily: 'var(--font-ui)', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: active === i ? 'var(--ink-900)' : 'var(--ink-500)' }}>Step {s.n}</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, color: active === i ? 'var(--ink-900)' : 'var(--ink-700)', textAlign: 'center', lineHeight: 1.3, maxWidth: 140 }}>{s.title}</div>
            </button>
          ))}
        </div>
        <div style={{
          background: 'var(--cream)', borderRadius: 16, padding: 40,
          display: 'grid', gridTemplateColumns: '80px 1fr', gap: 28, alignItems: 'start', minHeight: 260,
        }}>
          <div style={{ width: 80, height: 80, borderRadius: 16, background: PROCESS_STEPS[active].tint, color: 'var(--stability-50)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <StepIcon name={PROCESS_STEPS[active].icon} size={38}/>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ fontFamily: 'var(--font-ui)', fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent-warm-deep)' }}>
              Step {PROCESS_STEPS[active].n} · {PROCESS_STEPS[active].duration}
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 32, color: 'var(--ink-900)', letterSpacing: '-0.02em', margin: 0 }}>{PROCESS_STEPS[active].title}</h3>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: 16, color: 'var(--ink-700)', lineHeight: 1.7, maxWidth: 720, margin: 0 }}>{PROCESS_STEPS[active].body}</p>
          </div>
        </div>
      </div>
    </section>
  );
};

const ProcessCards = () => {
  const { isMobile, isTablet } = useBreakpoint();
  const cols = isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)';
  const pad = isMobile ? '32px 20px 64px' : '40px 80px 100px';

  return (
    <section style={{ padding: pad, background: '#fff' }}>
      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: 22, maxWidth: 1200, margin: '0 auto' }}>
        {PROCESS_STEPS.map(s => (
          <div key={s.n} style={{
            background: '#fff', borderRadius: 16, padding: 28,
            border: '1px solid var(--ink-200)',
            display: 'flex', flexDirection: 'column', gap: 14, position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 6, background: s.tint }}/>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 4 }}>
              <div style={{ width: 56, height: 56, borderRadius: 12, background: s.tint, color: 'var(--stability-50)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <StepIcon name={s.icon} size={28}/>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1, color: s.tint, letterSpacing: '-0.04em', filter: 'saturate(1.5)', mixBlendMode: 'multiply' }}>{s.n}</div>
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: 'var(--ink-900)', letterSpacing: '-0.02em', lineHeight: 1.2, margin: 0 }}>{s.title}</h3>
            <p style={{ fontFamily: 'var(--font-ui)', fontStyle: 'italic', fontSize: 12, color: 'var(--ink-500)', margin: 0 }}>{s.duration}</p>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: 14, color: 'var(--ink-700)', lineHeight: 1.6, margin: 0 }}>{s.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

const ProcessPage = ({ layout, onNavigate }) => {
  const { isMobile } = useBreakpoint();
  const heroPad = isMobile ? '100px 20px 40px' : '160px 60px 56px';

  return (
    <>
      <section style={{ paddingTop: 0, paddingBottom: 0, textAlign: 'center', background: 'var(--cream)' }}>
        <div style={{ maxWidth: 920, margin: '0 auto', padding: heroPad }}>
          <Eyebrow color="var(--accent-warm-deep)">How it works</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: isMobile ? 32 : 56,
            letterSpacing: '-0.02em', color: 'var(--ink-900)', margin: '14px auto 18px', lineHeight: 1.15, textWrap: 'balance',
          }}>
            A clear path from your home country to your US nursing career.
          </h1>
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: isMobile ? 15 : 18, color: 'var(--ink-700)', maxWidth: 720, margin: '0 auto', lineHeight: 1.6 }}>
            Most nurses complete the journey in <strong>12–18 months</strong>. Nucleus pays for prep, files your visa, and supports you the whole way.
          </p>
        </div>
      </section>
      {layout === 'horizontal' ? <ProcessHorizontal/> : layout === 'cards' ? <ProcessCards/> : <ProcessTimeline/>}
      <section style={{ background: 'var(--stability-50)', padding: isMobile ? '48px 20px' : '64px 80px', textAlign: 'center', color: '#fff' }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 24 : 32, letterSpacing: '-0.02em', marginBottom: 18 }}>
          Ready to take the first step?
        </h2>
        <p style={{ fontFamily: 'var(--font-ui)', fontSize: isMobile ? 14 : 16, color: 'rgba(255,255,255,0.85)', maxWidth: 540, margin: '0 auto 28px' }}>
          Apply in 15 minutes. Free, no obligation, in English or Spanish.
        </p>
        <button onClick={() => onNavigate('apply')} style={{
          background: 'var(--cta-primary-bg)', color: 'var(--cta-primary-fg)',
          padding: '14px 30px', borderRadius: 1000, border: 0, cursor: 'pointer',
          fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 16,
          width: isMobile ? '100%' : 'auto',
        }}>Start my application →</button>
      </section>
    </>
  );
};

window.ProcessPage = ProcessPage;