// Round 2 — Simplify (3 steps), TopTier specialists, Journey (no weeks)

function Simplify({ copy }) {
  const s = copy.simplify;
  return (
    <Section id="how-it-works" pad="lg" bg={TOKENS.color.ivory}>
      <div style={{ maxWidth: 820 }}>
        <Eyebrow>{s.eyebrow}</Eyebrow>
        <div style={{ height: 16 }} />
        <Display size="lg">{s.title}</Display>
      </div>
      <div style={{ height: 'clamp(36px, 5vw, 64px)' }} />
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
        gap: 'clamp(20px, 3vw, 48px)',
      }}>
        {s.steps.map((st, i) => (
          <div key={i} style={{
            borderTop: `1px solid ${TOKENS.color.navy}`,
            paddingTop: 24,
          }}>
            <div style={{
              fontFamily: TOKENS.font.mono, fontSize: 11,
              color: TOKENS.color.pinkDeep, letterSpacing: '0.08em',
            }}>{st.n}</div>
            <div style={{ height: 18 }} />
            <h3 style={{
              margin: 0, fontFamily: TOKENS.font.display, fontWeight: 400,
              fontSize: 'clamp(22px, 2.2vw, 28px)', color: TOKENS.color.navy,
              letterSpacing: '-0.01em', lineHeight: 1.15,
            }}>{st.t}</h3>
            <div style={{ height: 12 }} />
            <p style={{
              margin: 0, fontFamily: TOKENS.font.sans, fontSize: 15,
              lineHeight: 1.55, color: TOKENS.color.inkSoft, textWrap: 'pretty',
            }}>{st.d}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

function TopTier({ copy }) {
  const t = copy.specialists;
  return (
    <Section id="specialists" pad="lg" bg={TOKENS.color.ivory}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 'clamp(24px, 4vw, 64px)', alignItems: 'end', marginBottom: 'clamp(32px, 4vw, 56px)' }}>
        <div>
          <Eyebrow>{t.eyebrow}</Eyebrow>
          <div style={{ height: 16 }} />
          <Display size="lg">{t.title}</Display>
        </div>
        <p style={{
          margin: 0, fontFamily: TOKENS.font.sans, fontSize: 16,
          lineHeight: 1.55, color: TOKENS.color.inkSoft, textWrap: 'pretty',
        }}>{t.sub}</p>
      </div>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
        gap: 1, background: TOKENS.color.hairline,
        border: `1px solid ${TOKENS.color.hairline}`,
      }}>
        {t.pillars.map((p, i) => (
          <div key={i} style={{
            background: TOKENS.color.paper,
            padding: 'clamp(24px, 3vw, 40px)',
            minHeight: 240,
          }}>
            <h3 style={{
              margin: 0, fontFamily: TOKENS.font.display, fontWeight: 400,
              fontSize: 'clamp(20px, 2vw, 24px)', color: TOKENS.color.navy,
              letterSpacing: '-0.01em', lineHeight: 1.25,
              minHeight: 'calc(clamp(20px, 2vw, 24px) * 1.25 * 2)',
            }}>{p.t}</h3>
            <div style={{ height: 16 }} />
            <p style={{
              margin: 0, fontFamily: TOKENS.font.sans, fontSize: 14.5,
              lineHeight: 1.55, color: TOKENS.color.inkSoft,
            }}>{p.d}</p>
          </div>
        ))}
      </div>
      <div style={{ height: 28 }} />
      <p style={{
        margin: 0, maxWidth: 680,
        fontFamily: TOKENS.font.sans, fontSize: 13,
        color: TOKENS.color.inkMute, fontStyle: 'italic', lineHeight: 1.6,
      }}>{t.note}</p>
    </Section>
  );
}

function Journey({ copy }) {
  const j = copy.journey;
  return (
    <Section id="journey" pad="lg" bg={TOKENS.color.paper}>
      <div style={{ maxWidth: 760 }}>
        <Eyebrow>{j.eyebrow}</Eyebrow>
        <div style={{ height: 16 }} />
        <Display size="lg">{j.title}</Display>
        <div style={{ height: 16 }} />
        <p style={{
          margin: 0, fontFamily: TOKENS.font.sans, fontSize: 16,
          lineHeight: 1.55, color: TOKENS.color.inkSoft,
        }}>{j.sub}</p>
      </div>
      <div style={{ height: 'clamp(40px, 6vw, 72px)' }} />
      <style>{`
        .st-journey-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          column-gap: 40px;
          row-gap: 32px;
        }
        .st-journey-step {
          display: grid;
          grid-template-columns: 36px 1fr;
          column-gap: 16px;
          align-items: baseline;
          padding-bottom: 24px;
          border-bottom: 1px solid ${TOKENS.color.hairline};
        }
        /* All steps keep their bottom hairline divider in the 3-col grid */
        @media (max-width: 1024px) {
          .st-journey-grid {
            grid-template-columns: repeat(2, 1fr);
            column-gap: 32px;
            row-gap: 28px;
          }
          /* All but final row keep the divider */
          .st-journey-grid .st-journey-step {
            border-bottom: 1px solid ${TOKENS.color.hairline};
            padding-bottom: 24px;
          }
          .st-journey-grid .st-journey-step:nth-last-child(-n+2) {
            border-bottom: none;
            padding-bottom: 0;
          }
        }
        @media (max-width: 768px) {
          .st-journey-grid {
            grid-template-columns: 1fr;
            row-gap: 24px;
          }
          .st-journey-grid .st-journey-step {
            border-bottom: 1px solid ${TOKENS.color.hairline};
            padding-bottom: 24px;
          }
          .st-journey-grid .st-journey-step:last-child {
            border-bottom: none;
            padding-bottom: 0;
          }
        }
      `}</style>
      <div className="st-journey-grid cols-3">
        {j.steps.map((st, i) => (
          <div key={i} className="st-journey-step">
            <div style={{
              fontFamily: TOKENS.font.mono, fontSize: 12,
              color: TOKENS.color.pinkDeep, letterSpacing: '0.04em',
            }}>{String(i + 1).padStart(2, '0')}</div>
            <div>
              <h3 style={{
                margin: 0, fontFamily: TOKENS.font.display,
                fontSize: 20, fontWeight: 400,
                letterSpacing: '-0.01em', color: TOKENS.color.navy,
                lineHeight: 1.25,
              }}>{st.t}</h3>
              <div style={{ height: 8 }} />
              <p style={{
                margin: 0, fontFamily: TOKENS.font.sans, fontSize: 14,
                lineHeight: 1.55, color: TOKENS.color.inkSoft,
              }}>{st.d}</p>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

Object.assign(window, { Simplify, TopTier, Journey });