/* ========================================================
   Process timeline + Tech stack + Why Mindlytic
   ======================================================== */

const STEPS = [
  { n: "01", t: "Discover", d: "Two-week sprint to map your users, data, and the shape of the problem." },
  { n: "02", t: "Architect", d: "A written system design — models, evals, guardrails, cost ceilings — before a line of code." },
  { n: "03", t: "Build",     d: "Two-week cycles with live demos. You see progress, you steer." },
  { n: "04", t: "Ship",      d: "Deploy, monitor, iterate. We stay on for 60 days post-launch by default." },
];

function Process() {
  return (
    <section id="process" className="proc container" aria-label="Process">
      <SectionHeader num="03" label="How we work">
        A predictable process <span style={{color:"var(--text-3)"}}>for unpredictable problems.</span>
      </SectionHeader>
      <div className="proc-timeline reveal">
        <div className="proc-line"><div className="proc-line-fill"/></div>
        {STEPS.map((s, i) => (
          <div className="proc-step" key={s.n} style={{ transitionDelay: `${i*100}ms` }}>
            <div className="proc-node">
              <span className="proc-node-inner"/>
            </div>
            <div className="proc-num mono">{s.n}</div>
            <h3 className="proc-title">{s.t}</h3>
            <p className="proc-desc">{s.d}</p>
          </div>
        ))}
      </div>
      <style>{`
        .proc { padding: var(--section-y) 0; }
        .proc-timeline {
          position: relative;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 32px;
          padding-top: 48px;
        }
        .proc-line {
          position: absolute;
          left: 40px; right: 40px; top: 58px;
          height: 1px; background: var(--border-2);
        }
        .proc-line-fill {
          position: absolute; left: 0; top: 0; bottom: 0;
          background: var(--accent);
          width: 0;
          transition: width 1.4s cubic-bezier(.3,.7,.3,1);
        }
        .reveal.in .proc-line-fill { width: 75%; }
        .proc-step { position: relative; }
        .proc-node {
          width: 20px; height: 20px; border-radius: 50%;
          background: var(--bg);
          border: 1px solid var(--border-2);
          display: flex; align-items: center; justify-content: center;
          position: relative; z-index: 1;
          margin-bottom: 24px;
          transition: border-color .3s;
        }
        .proc-node-inner {
          width: 8px; height: 8px; border-radius: 50%;
          background: var(--border-3);
          transition: background-color .3s, box-shadow .3s;
        }
        .reveal.in .proc-step:nth-child(-n+4) .proc-node { border-color: var(--accent-line); }
        .reveal.in .proc-step:nth-child(-n+4) .proc-node-inner { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
        .proc-num { font-size: 10.5px; color: var(--text-4); margin-bottom: 10px; }
        .proc-title { font-size: 22px; margin-bottom: 8px; }
        .proc-desc { font-size: 14.5px; line-height: 1.55; color: var(--text-3); max-width: 28ch; }
        @media (max-width: 860px) {
          .proc-timeline { grid-template-columns: 1fr; gap: 20px; }
          .proc-line { display: none; }
          .proc-step { padding-left: 48px; }
          .proc-node { position: absolute; left: 0; top: 0; margin: 0; }
        }
      `}</style>
    </section>
  );
}

/* ---------------- Stack ---------------- */
const STACK = [
  ["LangChain", "Framework"], ["LangGraph", "Orchestration"],
  ["Claude", "Foundation"],   ["OpenAI", "Foundation"],
  ["Deepgram", "Speech"],     ["ElevenLabs", "Voice"],
  ["Vapi", "Telephony"],      ["n8n", "Workflow"],
  ["Pinecone", "Vector DB"],  ["AWS", "Infra"],
  ["Next.js", "Frontend"],    ["FastAPI", "Backend"],
];

function Stack() {
  return (
    <section id="stack" className="stack container" aria-label="Our stack">
      <SectionHeader num="04" label="Our stack">
        Tools we've put <span style={{color:"var(--text-3)"}}>in production.</span>
      </SectionHeader>
      <div className="stack-grid">
        {STACK.map(([name, cat]) => (
          <div className="stack-item reveal" key={name}>
            <div className="stack-name">{name}</div>
            <div className="mono stack-cat">{cat}</div>
          </div>
        ))}
      </div>
      <style>{`
        .stack { padding: var(--section-y) 0; }
        .stack-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          border: 1px solid var(--border);
          border-radius: 14px;
          overflow: hidden;
          background: var(--surface);
        }
        .stack-item {
          padding: 28px 24px;
          border-right: 1px solid var(--border);
          border-bottom: 1px solid var(--border);
          display: flex; flex-direction: column; justify-content: space-between;
          min-height: 120px;
          transition: background-color .3s;
        }
        .stack-item:hover { background: var(--surface-2); }
        .stack-item:hover .stack-name { color: var(--accent); }
        .stack-name { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; transition: color .2s; }
        .stack-cat { font-size: 10px; color: var(--text-4); margin-top: 24px; }
        /* remove trailing borders */
        .stack-item:nth-child(4n) { border-right: 0; }
        .stack-item:nth-last-child(-n+4) { border-bottom: 0; }
        @media (max-width: 768px) {
          .stack-grid { grid-template-columns: repeat(2, 1fr); }
          .stack-item:nth-child(4n) { border-right: 1px solid var(--border); }
          .stack-item:nth-child(2n) { border-right: 0; }
          .stack-item:nth-last-child(-n+4) { border-bottom: 1px solid var(--border); }
          .stack-item:nth-last-child(-n+2) { border-bottom: 0; }
        }
      `}</style>
    </section>
  );
}

/* ---------------- Why Mindlytic ---------------- */
const WHYS = [
  {
    t: "AI-native from day one",
    d: "We didn't bolt AI onto a legacy agency. Every engagement starts from models, evals, and guardrails.",
    icon: (
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden>
        <path d="M10 2l2 5h5l-4 3 1.5 5L10 12l-4.5 3L7 10 3 7h5z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
      </svg>
    )
  },
  {
    t: "Senior-only engineering",
    d: "8+ years average on our team. No one junior is on your project, ever.",
    icon: (
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden>
        <circle cx="10" cy="6" r="3.5" stroke="currentColor" strokeWidth="1.3"/>
        <path d="M3 18c0-3.5 3.1-6 7-6s7 2.5 7 6" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
      </svg>
    )
  },
  {
    t: "US + India delivery",
    d: "Jersey City strategy. Surat build velocity. Effective 18-hour workdays.",
    icon: (
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden>
        <circle cx="10" cy="10" r="7.5" stroke="currentColor" strokeWidth="1.3"/>
        <path d="M2.5 10h15M10 2.5c2.5 3 2.5 12 0 15M10 2.5c-2.5 3-2.5 12 0 15" stroke="currentColor" strokeWidth="1.3"/>
      </svg>
    )
  },
  {
    t: "Production-focused",
    d: "We ship systems that stay up, scale, and cost less than the alternative. We don't demo.",
    icon: (
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden>
        <path d="M3 12l5-8 4 6 5-3v7H3z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
      </svg>
    )
  },
  {
    t: "Transparent communication",
    d: "Weekly async Looms. Shared repos. A Linear board you can watch in real time.",
    icon: (
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden>
        <rect x="3" y="4" width="14" height="11" rx="2" stroke="currentColor" strokeWidth="1.3"/>
        <path d="M6 8h8M6 11h5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
      </svg>
    )
  },
  {
    t: "Fractional CTO",
    d: "Need a technical partner without the full hire? We embed for 10–20 hrs/week.",
    icon: (
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden>
        <circle cx="10" cy="10" r="7.5" stroke="currentColor" strokeWidth="1.3"/>
        <path d="M10 6v4l3 2" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
      </svg>
    )
  },
];

function Why() {
  return (
    <section className="why container" aria-label="Why Mindlytic">
      <SectionHeader num="05" label="Why Mindlytic">
        Senior talent. Real delivery. <span style={{color:"var(--text-3)"}}>No fluff.</span>
      </SectionHeader>
      <div className="why-grid">
        {WHYS.map(w => (
          <div className="why-card reveal" key={w.t}>
            <div className="why-icon">{w.icon}</div>
            <h3 className="why-title">{w.t}</h3>
            <p className="why-desc">{w.d}</p>
          </div>
        ))}
      </div>
      <style>{`
        .why { padding: var(--section-y) 0; }
        .why-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1px;
          background: var(--border);
          border: 1px solid var(--border);
          border-radius: 14px;
          overflow: hidden;
        }
        .why-card {
          padding: 32px;
          background: var(--bg);
          transition: background-color .3s;
        }
        .why-card:hover { background: var(--surface); }
        .why-icon {
          width: 40px; height: 40px; border-radius: 10px;
          border: 1px solid var(--border-2);
          display: flex; align-items: center; justify-content: center;
          color: var(--accent);
          margin-bottom: 20px;
        }
        .why-title { font-size: 17px; margin-bottom: 8px; letter-spacing: -0.015em; }
        .why-desc { font-size: 14.5px; line-height: 1.55; color: var(--text-3); max-width: 32ch; }
        @media (max-width: 960px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Process, Stack, Why });