// MnvRoadmaps.jsx — Two horizontal timelines.
// (1) 150-day pre-launch Gantt — 5 overlapping phases.
// (2) Post-launch — 3 phases with partner attribution, lighter visual weight.

// ============================================================
// Pre-launch Gantt
// ============================================================

const PRE_PHASES = [
  {
    name: 'Strategy & Discovery',
    start: 1, end: 30, color: BRAND.forest,
    deliverables: [
      'Stakeholder interviews + audits (Hydrogen, Sanity, Recharge, analytics, URL/SEO)',
      'FSDs — General, Build a Box, Content Architecture',
      'Strategy presentation + North Star',
      'Dev store + sandbox provisioning',
      'Metafield + metaobject schema definition',
    ],
  },
  {
    name: 'Design',
    start: 21, end: 75, color: BRAND.clay,
    deliverables: [
      'Design system foundations on Smart Theme',
      '2 distinct homepage concepts',
      'Core pages — PDP, PLP, Cart, Quick View',
      'Bundle builder flow',
      'Blog templates (5)',
      '11 custom brand pages',
      'Search, FAQ, Header, Footer, Mega Menu',
      '3 revision rounds (2 core + 1 additional)',
    ],
  },
  {
    name: 'Development',
    start: 50, end: 120, color: BRAND.swim3,
    deliverables: [
      'Smart Theme fork + repo setup',
      'Design system implementation',
      'Core pages + bundle builder (theme side)',
      'Blog templates',
      'Up to 35 custom content sections',
      'Custom App — Worker, App Proxy, bundle endpoints, selling-plan mirror, Sentry',
      'Web Pixel + analytics fan-out',
      'SEO + structured data',
      'Performance pass',
    ],
  },
  {
    name: 'Content Migration',
    start: 80, end: 135, color: BRAND.ochre,
    deliverables: [
      'Metafield / metaobject schema in production',
      'Migration tooling — Node.js CLI',
      'Blog article creation at scale (recipes, cut guides, V101, stories, rubs)',
      'Reference data migration',
      'Hub / singleton page population',
      'Portable text QA',
      'Redirect CSV generation',
      '5-day content freeze + delta migration on cutover',
    ],
  },
  {
    name: 'QA & Cutover',
    start: 120, end: 150, color: BRAND.swim4,
    deliverables: [
      'Full template QA pass',
      'Bulk URL redirect import',
      'Stakeholder content review',
      'Web Pixel event parity test',
      'Final performance audit — LCP, CLS, INP',
      'Cutover playbook — DNS swap, theme publish, App Proxy enable, Hydrogen worker spin-down',
      'Editor training + SOP handoff',
    ],
  },
];

const PreLaunchRoadmap = () => {
  const TOTAL = 150;
  const TICK_DAYS = [0, 30, 60, 90, 120, 150];

  return (
    <div style={{ padding: '64px 48px 72px', maxWidth: 1280, margin: '0 auto' }}>
      <FigureHeader
        kicker="Figure 05 — Pre-launch roadmap"
        title="150 days, five overlapping phases."
        subtitle="The phases overlap on purpose. Design carries into development. Content migration runs alongside QA. Each phase ends after the next one has already started — which is what keeps the timeline at 150 days instead of 250."
      />

      <div style={{ marginTop: 56 }}>
        {/* Top axis */}
        <div style={{
          display: 'grid', gridTemplateColumns: '180px 1fr', gap: 24,
          alignItems: 'end', marginBottom: 14,
        }}>
          <div/>
          <div style={{ position: 'relative', height: 22 }}>
            {TICK_DAYS.map(d => (
              <div key={d} style={{
                position: 'absolute', left: `${(d / TOTAL) * 100}%`,
                transform: 'translateX(-50%)',
                fontFamily: BRAND.mono, fontSize: 11, letterSpacing: 0.6,
                color: d === 150 ? BRAND.clay : BRAND.fgMuted,
                fontWeight: d === 150 ? 600 : 400,
              }}>
                Day {d}{d === 150 ? ' · Launch' : ''}
              </div>
            ))}
          </div>
        </div>

        {/* Phase rows */}
        {PRE_PHASES.map((p, i) => (
          <div key={p.name} style={{
            display: 'grid', gridTemplateColumns: '180px 1fr', gap: 24,
            alignItems: 'flex-start',
            paddingTop: 18, paddingBottom: 22,
            borderTop: `1px solid ${BRAND.line}`,
          }}>
            {/* Phase label */}
            <div>
              <div style={{
                fontFamily: BRAND.mono, fontSize: 10.5, letterSpacing: 1.2,
                textTransform: 'uppercase', color: BRAND.fgMuted, marginBottom: 4,
              }}>Phase {String(i + 1).padStart(2, '0')}</div>
              <div style={{
                fontFamily: BRAND.serif, fontSize: 20, letterSpacing: -0.4,
                lineHeight: 1.2, color: BRAND.fg,
              }}>{p.name}</div>
              <div style={{
                fontFamily: BRAND.mono, fontSize: 11, color: BRAND.fgSoft, marginTop: 6,
              }}>Day {p.start} – {p.end}</div>
            </div>

            {/* Bar + deliverables */}
            <div>
              {/* Bar track */}
              <div style={{ position: 'relative', height: 18, marginBottom: 14 }}>
                {/* gridlines */}
                {TICK_DAYS.map(d => (
                  <div key={d} aria-hidden style={{
                    position: 'absolute', left: `${(d / TOTAL) * 100}%`,
                    top: -4, bottom: -4, width: 1,
                    background: d === 150 ? BRAND.clay : BRAND.line,
                  }}/>
                ))}
                {/* bar */}
                <div style={{
                  position: 'absolute',
                  left: `${(p.start / TOTAL) * 100}%`,
                  width: `${((p.end - p.start) / TOTAL) * 100}%`,
                  top: 0, bottom: 0,
                  background: p.color,
                  display: 'flex', alignItems: 'center', paddingLeft: 12,
                  fontFamily: BRAND.mono, fontSize: 11, color: '#FFF',
                  letterSpacing: 0.5, overflow: 'hidden',
                }}>
                  {p.end - p.start} days
                </div>
              </div>

              {/* Deliverables — wrap chips */}
              <ul style={{
                listStyle: 'none', margin: 0, padding: 0,
                display: 'flex', flexWrap: 'wrap', gap: '6px 8px',
              }}>
                {p.deliverables.map((d, j) => (
                  <li key={j} style={{
                    fontFamily: BRAND.sans, fontSize: 12.5, lineHeight: 1.3,
                    color: BRAND.fgSoft,
                    padding: '4px 10px',
                    background: BRAND.bgSoft,
                    border: `1px solid ${BRAND.line}`,
                  }}>{d}</li>
                ))}
              </ul>
            </div>
          </div>
        ))}

        {/* Bottom axis (mirrored, lighter) */}
        <div style={{
          display: 'grid', gridTemplateColumns: '180px 1fr', gap: 24,
          alignItems: 'flex-start', paddingTop: 18,
          borderTop: `2px solid ${BRAND.fg}`,
        }}>
          <div style={{
            fontFamily: BRAND.serif, fontSize: 28, fontStyle: 'italic',
            color: BRAND.clay, letterSpacing: -0.5, fontWeight: 400,
          }}>Launch →</div>
          <div style={{ position: 'relative', height: 22 }}>
            {TICK_DAYS.map(d => (
              <div key={d} style={{
                position: 'absolute', left: `${(d / TOTAL) * 100}%`,
                transform: 'translateX(-50%)',
                fontFamily: BRAND.mono, fontSize: 11, letterSpacing: 0.6,
                color: d === 150 ? BRAND.clay : BRAND.fgMuted,
                fontWeight: d === 150 ? 600 : 400,
              }}>
                {d}d
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

// ============================================================
// Post-launch roadmap
// ============================================================

const POST_PHASES = [
  {
    name: 'Stabilization',
    label: 'A',
    partner: 'Platter',
    fees: 'Included',
    startWeek: 0, endWeek: 4,
    color: BRAND.swim3,
    body: 'Hypercare window. Active monitoring of bundle-builder endpoint health. Bug triage. Analytics parity verification against the Hydrogen baseline (full month of production data). Editor support and follow-up training. Decommissioning of Hydrogen + Sanity Studio once stabilization confirms no fallback needed.',
  },
  {
    name: 'Accessibility',
    label: 'B',
    partner: 'Platter + Patrol',
    fees: 'Separate engagement with Patrol',
    startWeek: 4, endWeek: 12,
    color: BRAND.forest,
    body: 'We\'d propose engaging Patrol — an accessibility partner specializing in source-level ADA remediation for Shopify themes. Patrol audits the new theme, identifies WCAG 2.1 AA violations, and works with us to remediate at the source (no overlay widgets). Ongoing monitoring keeps the site compliant as new content lands. Output: audited, remediated theme + Accessibility Statement + continuous monitoring.',
  },
  {
    name: 'Performance',
    label: 'C',
    partner: 'Platter + Shopify Pro Services',
    fees: 'Separate engagement with Shopify',
    startWeek: 8, endWeek: 16,
    color: BRAND.clay,
    body: 'We\'d propose engaging Shopify\'s Pro Services team — a performance engineering group that works on Core Web Vitals optimization for Shopify Plus merchants. They audit the theme at depth (well beyond our pre-launch performance pass) and recommend; we implement against their findings. Output: measurably improved LCP, CLS, INP scores backed by Shopify\'s own measurement standards.',
  },
];

const PostLaunchRoadmap = () => {
  const TOTAL_WEEKS = 16;
  const TICK_WEEKS = [0, 4, 8, 12, 16];

  return (
    <div style={{ padding: '64px 48px 72px', maxWidth: 1280, margin: '0 auto' }}>
      <FigureHeader
        kicker="Figure 06 — Post-launch (proposals)"
        title="What we'd propose after launch."
        subtitle="Three phases of post-launch work, framed as proposals rather than committed scope. Stabilization is on us. Accessibility and performance involve specialist partners — fees on those phases are payable directly to Patrol and Shopify; Platter does not mark up."
      />

      <div style={{ marginTop: 56, opacity: 0.95 }}>
        {/* Top axis */}
        <div style={{
          display: 'grid', gridTemplateColumns: '200px 1fr', gap: 24,
          alignItems: 'end', marginBottom: 14,
        }}>
          <div/>
          <div style={{ position: 'relative', height: 22 }}>
            {TICK_WEEKS.map(w => (
              <div key={w} style={{
                position: 'absolute', left: `${(w / TOTAL_WEEKS) * 100}%`,
                transform: 'translateX(-50%)',
                fontFamily: BRAND.mono, fontSize: 11, letterSpacing: 0.6,
                color: w === 0 ? BRAND.clay : BRAND.fgMuted,
                fontWeight: w === 0 ? 600 : 400,
              }}>
                {w === 0 ? 'Launch' : `Week ${w}`}
              </div>
            ))}
          </div>
        </div>

        {POST_PHASES.map((p, i) => (
          <div key={p.name} style={{
            display: 'grid', gridTemplateColumns: '200px 1fr', gap: 24,
            alignItems: 'flex-start',
            paddingTop: 22, paddingBottom: 22,
            borderTop: `1px solid ${BRAND.line}`,
          }}>
            <div>
              <div style={{
                fontFamily: BRAND.mono, fontSize: 10.5, letterSpacing: 1.2,
                textTransform: 'uppercase', color: BRAND.fgMuted, marginBottom: 4,
              }}>Phase {p.label}</div>
              <div style={{
                fontFamily: BRAND.serif, fontSize: 20, letterSpacing: -0.4,
                lineHeight: 1.2, color: BRAND.fg,
              }}>{p.name}</div>
              <div style={{
                fontFamily: BRAND.sans, fontSize: 12.5, color: BRAND.fgSoft, marginTop: 8,
                lineHeight: 1.4,
              }}>{p.partner}</div>
              <div style={{
                fontFamily: BRAND.mono, fontSize: 11, color: BRAND.fgMuted, marginTop: 4,
              }}>{p.fees}</div>
            </div>

            <div>
              {/* Lighter, hollow-style bar */}
              <div style={{ position: 'relative', height: 14, marginBottom: 14 }}>
                {TICK_WEEKS.map(w => (
                  <div key={w} aria-hidden style={{
                    position: 'absolute', left: `${(w / TOTAL_WEEKS) * 100}%`,
                    top: -4, bottom: -4, width: 1,
                    background: w === 0 ? BRAND.clay : BRAND.line,
                  }}/>
                ))}
                <div style={{
                  position: 'absolute',
                  left: `${(p.startWeek / TOTAL_WEEKS) * 100}%`,
                  width: `${((p.endWeek - p.startWeek) / TOTAL_WEEKS) * 100}%`,
                  top: 0, bottom: 0,
                  border: `1.5px solid ${p.color}`,
                  background: `${p.color}1A`,
                }}/>
              </div>

              <p style={{
                fontFamily: BRAND.sans, fontSize: 14, lineHeight: 1.55,
                color: BRAND.fgSoft, margin: 0, textWrap: 'pretty',
                maxWidth: 720,
              }}>{p.body}</p>
            </div>
          </div>
        ))}

        <div style={{
          paddingTop: 18, borderTop: `1px solid ${BRAND.line}`,
          fontFamily: BRAND.mono, fontSize: 11, letterSpacing: 0.4,
          color: BRAND.fgMuted, display: 'flex', justifyContent: 'space-between',
        }}>
          <span>options · not baked-in commitments</span>
          <span>fees on B + C payable to partner · Platter does not mark up</span>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { PreLaunchRoadmap, PostLaunchRoadmap });