/* Services with i18n */

const SERVICE_STAGES = ["WEB", "WEB", "FLOW", "AGENT", "GPT"];

function StageWeb() {
  return (
    <svg viewBox="0 0 600 600" width="100%" height="100%" style={{ position: "absolute", inset: 0 }}>
      <defs>
        <linearGradient id="webG" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#1a3a6c" />
          <stop offset="100%" stopColor="#2196d3" />
        </linearGradient>
      </defs>
      <rect x="80" y="100" width="440" height="320" rx="14" fill="#fff" stroke="#0e1b22" strokeOpacity="0.12" />
      <rect x="80" y="100" width="440" height="32" rx="14" fill="#0e1b22" fillOpacity="0.04" />
      <circle cx="100" cy="116" r="4" fill="#0e1b22" fillOpacity="0.2" />
      <circle cx="114" cy="116" r="4" fill="#0e1b22" fillOpacity="0.2" />
      <circle cx="128" cy="116" r="4" fill="#0e1b22" fillOpacity="0.2" />
      <rect x="100" y="150" width="180" height="14" rx="4" fill="#0e1b22" fillOpacity="0.85">
        <animate attributeName="width" values="180;240;180" dur="4s" repeatCount="indefinite" />
      </rect>
      <rect x="100" y="174" width="280" height="8" rx="3" fill="#0e1b22" fillOpacity="0.25" />
      <rect x="100" y="188" width="220" height="8" rx="3" fill="#0e1b22" fillOpacity="0.25" />
      <rect x="100" y="216" width="90" height="26" rx="13" fill="url(#webG)" />
      {[0,1,2].map(i => (
        <g key={i}>
          <rect x={100 + i*130} y="270" width="120" height="120" rx="10"
            fill="#0e1b22" fillOpacity={i === 1 ? "0.12" : "0.06"} stroke="#0e1b22" strokeOpacity="0.08">
            <animate attributeName="fill-opacity" values={`0.06;${i===1?0.16:0.1};0.06`} dur="3s" begin={`${i*0.4}s`} repeatCount="indefinite" />
          </rect>
          <rect x={112 + i*130} y="284" width={50 + i*10} height="6" rx="2" fill="#0e1b22" fillOpacity="0.4" />
          <rect x={112 + i*130} y="296" width="80" height="4" rx="2" fill="#0e1b22" fillOpacity="0.2" />
        </g>
      ))}
      <g>
        <circle cx="540" cy="260" r="6" fill="#1a3a6c">
          <animate attributeName="cy" values="260;360;260" dur="3s" repeatCount="indefinite" />
        </circle>
        <circle cx="540" cy="260" r="6" fill="#1a3a6c" opacity="0.4">
          <animate attributeName="cy" values="260;360;260" dur="3s" begin="-1.5s" repeatCount="indefinite" />
        </circle>
      </g>
    </svg>
  );
}

function StageFlow() {
  const nodes = [
    { x: 120, y: 200, label: "TRIGGER" },
    { x: 280, y: 140, label: "ENRICH" },
    { x: 280, y: 260, label: "ROUTE" },
    { x: 440, y: 200, label: "ACTION" },
  ];
  return (
    <svg viewBox="0 0 600 600" width="100%" height="100%" style={{ position: "absolute", inset: 0 }}>
      <defs>
        <marker id="arr" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M0,0 L10,5 L0,10 z" fill="#1a3a6c" />
        </marker>
      </defs>
      <path d="M 150 200 Q 215 200 250 140" stroke="#1a3a6c" strokeWidth="1.5" fill="none" markerEnd="url(#arr)" />
      <path d="M 150 200 Q 215 200 250 260" stroke="#1a3a6c" strokeWidth="1.5" fill="none" markerEnd="url(#arr)" />
      <path d="M 310 140 Q 375 140 410 200" stroke="#1a3a6c" strokeWidth="1.5" fill="none" markerEnd="url(#arr)" />
      <path d="M 310 260 Q 375 260 410 200" stroke="#1a3a6c" strokeWidth="1.5" fill="none" markerEnd="url(#arr)" />
      {[0,1,2,3].map(i => (
        <circle key={i} r="5" fill="oklch(0.78 0.12 70)">
          <animateMotion dur="4s" begin={`${i*1}s`} repeatCount="indefinite"
            path={i < 2 ? "M 150 200 Q 215 200 250 140 Q 310 140 410 200" : "M 150 200 Q 215 200 250 260 Q 310 260 410 200"} />
        </circle>
      ))}
      {nodes.map((n,i) => (
        <g key={i}>
          <circle cx={n.x} cy={n.y} r="32" fill="#fff" stroke="#0e1b22" strokeOpacity="0.12" />
          <circle cx={n.x} cy={n.y} r="28" fill="#1a3a6c" fillOpacity="0.06" />
          <text x={n.x} y={n.y + 4} textAnchor="middle" fontSize="10" fontFamily="JetBrains Mono" fontWeight="500" fill="#1a3a6c" letterSpacing="1">{n.label}</text>
        </g>
      ))}
      <rect x="120" y="380" width="360" height="80" rx="10" fill="#fff" stroke="#0e1b22" strokeOpacity="0.1" />
      <text x="140" y="408" fontSize="11" fontFamily="JetBrains Mono" fill="#0e1b22" fillOpacity="0.5">PROCESSED</text>
      <text x="140" y="438" fontSize="28" fontFamily="Instrument Serif" fontStyle="italic" fill="#0e1b22"><tspan>1,247 events</tspan></text>
      <text x="380" y="408" fontSize="11" fontFamily="JetBrains Mono" fill="#0e1b22" fillOpacity="0.5">AVG TIME</text>
      <text x="380" y="438" fontSize="28" fontFamily="Instrument Serif" fontStyle="italic" fill="oklch(0.62 0.09 150)">340ms</text>
    </svg>
  );
}

function StageAgent() {
  return (
    <svg viewBox="0 0 600 600" width="100%" height="100%" style={{ position: "absolute", inset: 0 }}>
      <circle cx="300" cy="300" r="80" fill="#0e1b22" />
      <circle cx="300" cy="300" r="60" fill="none" stroke="oklch(0.78 0.12 70)" strokeWidth="1" strokeDasharray="2 4">
        <animateTransform attributeName="transform" type="rotate" from="0 300 300" to="360 300 300" dur="20s" repeatCount="indefinite" />
      </circle>
      <text x="300" y="295" textAnchor="middle" fontSize="11" fontFamily="JetBrains Mono" fill="#fff" letterSpacing="1.5">AGENT</text>
      <text x="300" y="312" textAnchor="middle" fontSize="20" fontFamily="Instrument Serif" fontStyle="italic" fill="#fff">v.04</text>
      {[
        { a: -90, label: "calendar" }, { a: -30, label: "email" }, { a: 30, label: "crm" },
        { a: 90, label: "search" }, { a: 150, label: "billing" }, { a: -150, label: "docs" },
      ].map((s, i) => {
        const rad = (s.a * Math.PI) / 180;
        const x = 300 + Math.cos(rad) * 200;
        const y = 300 + Math.sin(rad) * 200;
        const x1 = 300 + Math.cos(rad) * 90;
        const y1 = 300 + Math.sin(rad) * 90;
        const x2 = 300 + Math.cos(rad) * 170;
        const y2 = 300 + Math.sin(rad) * 170;
        return (
          <g key={i}>
            <line x1={x1} y1={y1} x2={x2} y2={y2} stroke="#0e1b22" strokeOpacity="0.2" strokeWidth="1" />
            <circle r="3" fill="oklch(0.78 0.12 70)">
              <animateMotion dur="3s" begin={`${i*0.5}s`} repeatCount="indefinite" path={`M ${x1} ${y1} L ${x2} ${y2}`} />
            </circle>
            <circle cx={x} cy={y} r="32" fill="#fff" stroke="#0e1b22" strokeOpacity="0.15" />
            <text x={x} y={y + 4} textAnchor="middle" fontSize="10" fontFamily="JetBrains Mono" fill="#0e1b22" fillOpacity="0.7">{s.label}</text>
          </g>
        );
      })}
    </svg>
  );
}

function StageGPT() {
  return (
    <svg viewBox="0 0 600 600" width="100%" height="100%" style={{ position: "absolute", inset: 0 }}>
      <g>
        <rect x="80" y="140" width="280" height="60" rx="14" fill="#0e1b22" fillOpacity="0.06" />
        <text x="100" y="166" fontSize="12" fontFamily="JetBrains Mono" fill="#0e1b22" fillOpacity="0.5">USER</text>
        <text x="100" y="186" fontSize="14" fontFamily="Inter" fill="#0e1b22">What's our refund policy?</text>
      </g>
      <g>
        <rect x="200" y="220" width="320" height="80" rx="14" fill="#1a3a6c" />
        <text x="220" y="246" fontSize="12" fontFamily="JetBrains Mono" fill="#fff" fillOpacity="0.6">ATLAS · YOUR BRAND GPT</text>
        <text x="220" y="266" fontSize="14" fontFamily="Inter" fill="#fff">30-day full refund, no questions.</text>
        <text x="220" y="286" fontSize="14" fontFamily="Inter" fill="#fff" fillOpacity="0.7">Initiated from your account page.</text>
      </g>
      <g>
        <rect x="80" y="320" width="240" height="40" rx="14" fill="#0e1b22" fillOpacity="0.06" />
        <text x="100" y="346" fontSize="14" fontFamily="Inter" fill="#0e1b22">And for partial returns?</text>
      </g>
      <g>
        <rect x="200" y="380" width="320" height="60" rx="14" fill="#1a3a6c" />
        <text x="220" y="406" fontSize="14" fontFamily="Inter" fill="#fff">Pro-rated against your purchase date — </text>
        <text x="220" y="424" fontSize="14" fontFamily="Inter" fill="#fff">I can process it now if you'd like.</text>
      </g>
      <g transform="translate(80 470)">
        <rect width="80" height="32" rx="14" fill="#0e1b22" fillOpacity="0.06" />
        {[0,1,2].map(i => (
          <circle key={i} cx={20 + i*20} cy="16" r="3" fill="#0e1b22" fillOpacity="0.5">
            <animate attributeName="fill-opacity" values="0.2;0.7;0.2" dur="1.4s" begin={`${i*0.2}s`} repeatCount="indefinite" />
          </circle>
        ))}
      </g>
      <g transform="translate(420 460)">
        <rect width="100" height="60" rx="10" fill="#fff" stroke="#0e1b22" strokeOpacity="0.12" />
        <text x="50" y="20" textAnchor="middle" fontSize="9" fontFamily="JetBrains Mono" fill="#0e1b22" fillOpacity="0.5">KB SOURCES</text>
        <text x="50" y="40" textAnchor="middle" fontSize="22" fontFamily="Instrument Serif" fontStyle="italic" fill="oklch(0.62 0.09 150)">12.4k</text>
        <text x="50" y="52" textAnchor="middle" fontSize="9" fontFamily="JetBrains Mono" fill="#0e1b22" fillOpacity="0.5">embeddings</text>
      </g>
    </svg>
  );
}

function StageFor({ kind }) {
  if (kind === "WEB") return <StageWeb />;
  if (kind === "FLOW") return <StageFlow />;
  if (kind === "AGENT") return <StageAgent />;
  return <StageGPT />;
}

function Services() {
  const { t } = useT();
  const [active, setActive] = useState(0);
  const services = t.services.list;

  return (
    <section className="services" id="services">
      <div className="shell">
        <Reveal>
          <div className="section-head">
            <div className="eyebrow">{t.services.eyebrow}</div>
            <h2>{t.services.h2a}<em>{t.services.h2b}</em>{t.services.h2c}</h2>
            <p>{t.services.sub}</p>
          </div>
        </Reveal>

        <div className="services-layout">
          <Reveal>
            <div className="service-list">
              {services.map((s, i) => {
                const isOpen = active === i;
                return (
                  <div key={i} className="service-row" data-active={isOpen} data-magnet
                    onClick={() => setActive(isOpen ? -1 : i)}>
                    <div className="top">
                      <span className="idx mono">0{i+1}</span>
                      <h3>{s.title}</h3>
                      <span className="toggle"><PlusIcon /></span>
                    </div>
                    <div className="service-body">
                      <div className="service-body-inner">
                        <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 18, color: "var(--teal)" }}>
                          {s.benefit}
                        </p>
                        <p>{s.desc}</p>
                        <div className="service-tags">
                          {s.tags.map(tag => <span className="service-tag" key={tag}>{tag}</span>)}
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </Reveal>

          <Reveal delay={150}>
            <div className="service-stage">
              <div className="stage-label">{t.services.stage}</div>
              <div className="stage-corner">
                <span className="stage-dot" />
                <span>{active >= 0 ? SERVICE_STAGES[active] : t.services.idle}</span>
              </div>
              <StageFor kind={active >= 0 ? SERVICE_STAGES[active] : "WEB"} />
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services });