const STEPS = [
  {
    num: '01', title: 'Discovery',
    desc: '30-minute call. We learn your business, audience, and goals. You get a detailed proposal within 48 hours.',
    detail: 'We ask the questions other agencies skip — competitor analysis, audience personas, content strategy. All included in your proposal.',
    duration: '1–2 days',
    output: 'Written proposal + timeline',
  },
  {
    num: '02', title: 'Design',
    desc: 'High-fidelity mockups in 5 business days. Two revision rounds included. Not a single template in sight.',
    detail: 'You see desktop + mobile mockups for every key page before a single line of code is written. Designed in Figma.',
    duration: '1–2 weeks',
    output: 'Figma file + brand guide',
  },
  {
    num: '03', title: 'Build',
    desc: 'Pixel-perfect code, optimized for speed, SEO, and accessibility. Preview it on a private staging link.',
    detail: 'We test across browsers, devices, and screen readers. Lighthouse scores above 90 — guaranteed. No exceptions.',
    duration: '2–6 weeks',
    output: 'Staging link + QA report',
  },
  {
    num: '04', title: 'Launch',
    desc: 'DNS, hosting, analytics — all handled. You get the keys and 30 days of free post-launch support.',
    detail: 'We handle the full technical handover. You get a 15-minute CMS training walkthrough so you\'re never dependent on us.',
    duration: '1–2 days',
    output: 'Live site + credentials',
  },
];

const TIMELINES = [
  { tier: 'Starter',      time: '2–3 weeks',   price: 'From $1,200' },
  { tier: 'Professional', time: '4–6 weeks',   price: 'From $3,500' },
  { tier: 'Enterprise',   time: '8–12 weeks',  price: 'Custom'      },
  { tier: 'Mobile App',   time: '8–16 weeks',  price: 'From $2,500' },
];

const ProcessPage = ({ navigate }) => (
  <>
    <section className="section" style={{ paddingBottom: 56 }}>
      <div className="container">
        <span className="label">How It Works</span>
        <h1 className="display-lg reveal" style={{ marginBottom: 20 }}>
          Four steps to launch.<br /><em style={{ fontStyle: 'italic' }}>No committees.</em>
        </h1>
        <p className="body-lg reveal d1" style={{ maxWidth: 500 }}>
          We move fast and ship polished. Most agencies take months — we take weeks.
          Here's exactly what happens when you work with us.
        </p>
      </div>
    </section>

    {/* Steps */}
    <section style={{ paddingBottom: 80 }}>
      <div className="container">
        {STEPS.map((step, i) => (
          <div key={step.num} className="process-row reveal" style={{ transitionDelay: `${i * 0.1}s` }}>
            {/* Number */}
            <div className="step-num" style={{
              fontFamily: 'var(--display)', fontSize: 80,
              fontWeight: 300, color: 'rgba(255,255,255,0.06)',
              lineHeight: 1, userSelect: 'none',
            }}>
              {step.num}
            </div>

            {/* Content */}
            <div style={{ paddingRight: 24 }}>
              <h3 style={{
                fontFamily: 'var(--display)', fontSize: 36,
                fontWeight: 500, marginBottom: 12,
              }}>{step.title}</h3>
              <p className="body-md" style={{ marginBottom: 10, fontSize: 15 }}>{step.desc}</p>
              <p className="body-md" style={{ fontSize: 13 }}>{step.detail}</p>
            </div>

            {/* Meta cards */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{
                padding: '16px 20px', background: 'var(--card)',
                border: '1px solid var(--border)', borderRadius: 'var(--radius)',
              }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: 2, color: 'var(--muted)', marginBottom: 7 }}>
                  DURATION
                </div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 22, fontWeight: 500 }}>
                  {step.duration}
                </div>
              </div>
              <div style={{
                padding: '16px 20px', background: 'var(--card)',
                border: '1px solid var(--border)', borderRadius: 'var(--radius)',
              }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: 2, color: 'var(--muted)', marginBottom: 7 }}>
                  YOU RECEIVE
                </div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 18, fontWeight: 400 }}>
                  {step.output}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* Timeline table */}
    <section className="section" style={{ background: 'var(--surface)' }}>
      <div className="container">
        <div className="reveal" style={{ textAlign: 'center', marginBottom: 48 }}>
          <span className="label">Timeline Reference</span>
          <h2 className="display-md">How long does it take?</h2>
        </div>

        <div className="reveal d1" style={{
          borderRadius: 'var(--radius-lg)',
          border: '1px solid var(--border)',
          overflow: 'hidden',
        }}>
          {/* Header */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
            padding: '16px 32px',
            background: 'rgba(255,255,255,0.03)',
            borderBottom: '1px solid var(--border)',
          }}>
            {['Project Type','Timeline','Investment'].map(h => (
              <div key={h} style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: 2, color: 'var(--muted)', textTransform: 'uppercase' }}>
                {h}
              </div>
            ))}
          </div>
          {TIMELINES.map((row, i) => (
            <div key={row.tier} style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
              padding: '22px 32px',
              borderBottom: i < TIMELINES.length - 1 ? '1px solid var(--border)' : 'none',
              background: i % 2 === 0 ? 'transparent' : 'rgba(255,255,255,0.015)',
              alignItems: 'center',
            }}>
              <div style={{ fontFamily: 'var(--display)', fontSize: 22, fontWeight: 500 }}>{row.tier}</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--muted)' }}>{row.time}</div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 22, color: 'var(--accent)' }}>{row.price}</div>
            </div>
          ))}
        </div>

        <div className="reveal d2" style={{ textAlign: 'center', marginTop: 48 }}>
          <p className="body-md" style={{ marginBottom: 24 }}>
            Every project gets an exact timeline in the proposal — no guesswork.
          </p>
          <button className="btn btn-primary" onClick={() => navigate('contact')}>
            Get Your Timeline →
          </button>
        </div>
      </div>
    </section>

    {/* Guarantee strip */}
    <section className="section-sm">
      <div className="container">
        <div className="reveal" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 20,
        }}>
          {[
            { icon: '★', label: 'Lighthouse 90+', sub: 'Performance & accessibility guaranteed' },
            { icon: '◎', label: '30-Day Support', sub: 'Free post-launch fixes, no questions asked' },
            { icon: '⊘', label: 'No Lock-In', sub: 'You own everything from day one' },
            { icon: '⚡', label: '48h Proposals', sub: 'Detailed, priced proposal after your call' },
          ].map(({ icon, label, sub }) => (
            <div key={label} style={{
              padding: '24px', background: 'var(--card)',
              border: '1px solid var(--border)', borderRadius: 'var(--radius)',
              textAlign: 'center',
            }}>
              <div style={{ fontSize: 22, color: 'var(--accent)', marginBottom: 10 }}>{icon}</div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 18, fontWeight: 500, marginBottom: 6 }}>{label}</div>
              <div style={{ fontSize: 13, color: 'var(--muted)' }}>{sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  </>
);

window.ProcessPage = ProcessPage;