// Process page — how we work, four steps deep dive
// Tone: warm, plain-spoken. No jargon, no tools-talk on the surface.

const Process = () => {
  const css = `
    .pr-steps { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(26,22,18,0.12); }
    .pr-step { display: grid; grid-template-columns: 200px 1fr 1.3fr; gap: 60px; padding: 80px 16px; border-bottom: 1px solid rgba(26,22,18,0.12); align-items: start; }
    .pr-step-num { font-family: 'Instrument Serif', serif; font-size: 96px; line-height: 1; color: #c8542a; font-style: italic; }
    .pr-step-content h3 { font-family: 'Instrument Serif', serif; font-size: 48px; line-height: 1; letter-spacing: -0.02em; font-weight: 400; margin: 0 0 16px; }
    .pr-step-content h3 em { color: #c8542a; font-style: italic; }
    .pr-step-content p { font-size: 16px; line-height: 1.6; color: #4a3f33; margin: 0 0 28px; }
    .pr-step-meta { display: flex; flex-direction: column; gap: 14px; }
    .pr-meta-item { display: flex; gap: 12px; align-items: baseline; }
    .pr-meta-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #c8542a; text-transform: uppercase; letter-spacing: 0.12em; min-width: 110px; }
    .pr-meta-val { font-size: 14px; color: #1a1612; line-height: 1.5; }
    .pr-bullets { display: flex; flex-direction: column; gap: 8px; }
    .pr-bullet { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: #4a3f33; }
    .pr-bullet::before { content: '·'; color: #c8542a; font-size: 24px; line-height: 0.7; }

    .pr-cta { padding: 100px 56px 0; max-width: 1400px; margin: 60px auto 0; }
    .pr-cta-card { background: #1a1612; color: #f4efe6; border-radius: 24px; padding: 80px 56px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; position: relative; overflow: hidden; }
    .pr-cta-card::before { content: ''; position: absolute; top: -250px; right: -200px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(232,167,127,0.25) 0%, transparent 70%); border-radius: 50%; }
    .pr-cta-h { font-family: 'Instrument Serif', serif; font-size: 64px; line-height: 0.98; letter-spacing: -0.025em; margin: 0 0 16px; position: relative; }
    .pr-cta-h em { font-style: italic; color: #e8a77f; }
    .pr-cta-p { font-size: 17px; line-height: 1.5; color: rgba(244,239,230,0.7); margin: 0; max-width: 480px; position: relative; }
    .pr-cta-btn { font-size: 16px; padding: 18px 32px; background: #e8a77f; color: #1a1612; border-radius: 999px; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; align-self: center; justify-self: end; position: relative; transition: transform 0.3s, background 0.3s; }
    .pr-cta-btn:hover { transform: translateY(-3px); background: #f4efe6; }

    @media (max-width: 1024px) {
      .pr-step { grid-template-columns: 100px 1fr; gap: 32px; padding: 56px 12px; }
      .pr-step-num { font-size: 64px; }
      .pr-step-content h3 { font-size: 36px; }
      .pr-step > div:last-child { grid-column: 1 / -1; padding-left: 0; }
      .pr-cta { padding: 64px 32px 0; margin-top: 40px; }
      .pr-cta-card { padding: 56px 40px; gap: 32px; grid-template-columns: 1fr; }
      .pr-cta-h { font-size: 48px; }
      .pr-cta-btn { justify-self: start; }
    }
    @media (max-width: 720px) {
      .pr-step { grid-template-columns: 1fr; gap: 16px; padding: 40px 8px; }
      .pr-step-num { font-size: 48px; }
      .pr-step-content h3 { font-size: 32px; }
      .pr-meta-label { min-width: 90px; }
      .pr-cta { padding: 48px 20px 0; margin-top: 24px; }
      .pr-cta-card { padding: 40px 28px; border-radius: 18px; }
      .pr-cta-h { font-size: 36px; }
      .pr-cta-p { font-size: 15px; }
      .pr-cta-btn { padding: 14px 24px; font-size: 14px; }
    }
  `;

  const steps = [
    {
      n: '01', t: 'Listen', dur: '2 weeks',
      lead: "We start by getting to know you. No deck, no pitch — just a notebook and a lot of questions.",
      p: "Two weeks getting close to your team. Coffee chats with the founder, sitting in on the work, reading the docs. We talk to the people who actually do the day-to-day — because the org chart is rarely the whole story.",
      meta: [
        { l: 'Who you meet', v: 'A small senior team. The same people in the kickoff are the ones doing the work.' },
        { l: 'What we ask of you', v: 'A few short conversations and a peek at how things run today.' },
      ],
      bullets: ['Conversations with the founder', 'Time with the people doing the work', 'A look at how things run today', 'Honest questions, no judgement'],
    },
    {
      n: '02', t: 'Map', dur: '1 week',
      lead: "A clear, written summary of what we found and what we'd do about it.",
      p: "We hand back a short, plain-language document. What the business is really good at. Where we think AI can help — and, just as honestly, where it can't. A short list of moves we'd make first, and what each one would cost in time and money.",
      meta: [
        { l: 'You get', v: 'A short written summary, written like a friend would write it.' },
        { l: 'Decision point', v: "After this, you can stop. No build commitment. The summary is yours to keep." },
      ],
      bullets: ['A friendly written summary', 'A short list of first moves', 'Honest costs and timing', 'What success would feel like'],
    },
    {
      n: '03', t: 'Build', dur: '4–10 weeks',
      lead: "We start small. Real things in your hands, fast.",
      p: "We pick the most promising idea on the list and build the smallest version that proves it works. You see something real in the first couple of weeks. From there we keep going — refining, expanding, getting feedback from the people who'll actually use it.",
      meta: [
        { l: 'How it feels', v: "Weekly check-ins. A shared chat. You're never wondering where things are." },
        { l: 'What you keep', v: "Everything we build is yours. No fine print, no lock-in." },
      ],
      bullets: ['Something real in week two', 'Weekly check-in and demo', 'Refined together along the way', 'Yours to keep at the end'],
    },
    {
      n: '04', t: 'Stay', dur: 'Ongoing',
      lead: "We stick around. Building something is the easy part — keeping it useful is the rest of the job.",
      p: "After launch, we move to a monthly partnership. We keep an eye on what we built, tune it as your business shifts, and bring fresh ideas as new things become possible. The world changes; the work shouldn't go stale.",
      meta: [
        { l: 'How it works', v: "A monthly partnership you can pause or end whenever it stops being useful." },
        { l: 'You get', v: "Same team, same chat. A real review every quarter — what's working, what's next." },
      ],
      bullets: ['Same team, all the way through', 'Tune-ups as the business shifts', 'Fresh ideas as the world changes', 'Quarterly review and refresh'],
    },
  ];

  return (
    <>
      <window.WeNav active="process" />
      <window.WeSEO page="process" />
      <style>{css}</style>

      <section className="we-page-hero">
        <div className="we-shead"><div className="we-shead-line"></div>How we work</div>
        <h1 className="we-page-h1">Listen, map,<br /><em>build, stay.</em></h1>
        <p className="we-page-sub">A four-step partnership. Each step ends with something you can hold in your hand and a clear chance to say "let's keep going" or "we're good from here."</p>
      </section>

      <section className="we-section">
        <div className="pr-steps">
          {steps.map(s => (
            <div className="pr-step" key={s.n}>
              <div className="pr-step-num">{s.n}</div>
              <div className="pr-step-content">
                <h3><em>{s.t}.</em></h3>
                <p style={{fontFamily: 'Instrument Serif, serif', fontSize: 24, lineHeight: 1.3, color: '#1a1612', margin: '0 0 20px'}}>{s.lead}</p>
                <p>{s.p}</p>
                <div className="pr-step-meta">
                  {s.meta.map(m => (
                    <div className="pr-meta-item" key={m.l}>
                      <div className="pr-meta-label">{m.l}</div>
                      <div className="pr-meta-val">{m.v}</div>
                    </div>
                  ))}
                </div>
              </div>
              <div>
                <div style={{fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#c8542a', textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 16}}>// roughly · {s.dur}</div>
                <div className="pr-bullets">
                  {s.bullets.map(b => <div className="pr-bullet" key={b}>{b}</div>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="pr-cta">
        <div className="pr-cta-card">
          <div>
            <h2 className="pr-cta-h">Step zero: <em>a conversation.</em></h2>
            <p className="pr-cta-p">30 minutes, no deck. We listen, we ask, and we'll tell you honestly whether we're the right people for what you're working on.</p>
          </div>
          <a className="pr-cta-btn" href="Leviyet Contact.html">Book the call →</a>
        </div>
      </section>

      <window.WeFooter />
    </>
  );
};

window.Process = Process;