/* process-studio.jsx — Process steps + Studio / HQ */

/* ---- bespoke line-art illustrations, one per phase ---- */
function ProcArt({ i }) {
  const common = { fill: "none", strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" };
  const ink = "var(--ink-mute)";
  const soft = "var(--ink-soft)";
  const acc = "var(--accent)";
  const ref = useRef(null);
  useEffect(() => {
    if (i !== 3) return;
    const el = ref.current;
    if (!el) return;
    if (typeof IntersectionObserver === "undefined") { el.classList.add("lc-play"); return; }
    const io = new IntersectionObserver((es) => {
      if (es[0].isIntersecting) { el.classList.add("lc-play"); io.disconnect(); }
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [i]);
  return (
    <svg ref={ref} className="proc-art" viewBox="0 0 480 300" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <defs>
        <radialGradient id={"pg" + i} cx="50%" cy="38%" r="75%">
          <stop offset="0%" stopColor="rgba(255,255,255,0.05)" />
          <stop offset="100%" stopColor="rgba(255,255,255,0)" />
        </radialGradient>
        <pattern id={"pgrid" + i} width="30" height="30" patternUnits="userSpaceOnUse">
          <path d="M30 0H0V30" stroke="rgba(255,255,255,0.05)" strokeWidth="1" fill="none" />
        </pattern>
      </defs>
      <rect width="480" height="300" fill={"url(#pgrid" + i + ")"} />
      <rect width="480" height="300" fill={"url(#pg" + i + ")"} />

      {i === 0 && (
        <g transform="translate(240 150)" {...common}>
          {[34, 66, 98, 130].map((r, k) => (
            <circle key={k} r={r} stroke={ink} strokeOpacity={0.5 - k * 0.08} strokeWidth="1" />
          ))}
          <line x1="-150" y1="0" x2="150" y2="0" stroke={ink} strokeOpacity="0.35" strokeWidth="1" strokeDasharray="3 5" />
          <line x1="0" y1="-110" x2="0" y2="110" stroke={ink} strokeOpacity="0.35" strokeWidth="1" strokeDasharray="3 5" />
          <g>
            <path d="M0 0 L118 -56 A130 130 0 0 0 130 0 Z" fill={acc} fillOpacity="0.12" stroke="none" />
            <line x1="0" y1="0" x2="118" y2="-56" stroke={acc} strokeWidth="1.5" />
            <animateTransform attributeName="transform" type="rotate"
              from="0 0 0" to="360 0 0" dur="9s" repeatCount="indefinite" />
          </g>
          <circle cx="40" cy="-22" r="4" fill={acc}>
            <animate attributeName="opacity" values="0.4;1;0.4" dur="9s" begin="0.2s" repeatCount="indefinite" />
          </circle>
          <circle cx="-58" cy="40" r="3" fill={soft}>
            <animate attributeName="opacity" values="0.3;1;0.3" dur="5s" begin="2.5s" repeatCount="indefinite" />
          </circle>
          <circle cx="86" cy="58" r="3" fill={soft}>
            <animate attributeName="opacity" values="0.3;1;0.3" dur="5s" begin="1.6s" repeatCount="indefinite" />
          </circle>
          <circle cx="-30" cy="-78" r="3" fill={soft}>
            <animate attributeName="opacity" values="0.3;1;0.3" dur="5s" begin="3.7s" repeatCount="indefinite" />
          </circle>
          <circle r="6" fill="none" stroke={acc} strokeWidth="1.5" />
          <circle r="2" fill={acc} />
        </g>
      )}

      {i === 1 && (
        <g transform="translate(240 150)" {...common}>
          {/* alignment guides */}
          <line x1="0" y1="-118" x2="0" y2="118" stroke={ink} strokeOpacity="0.18" strokeWidth="1" strokeDasharray="2 7" />
          <line x1="-150" y1="0" x2="150" y2="0" stroke={ink} strokeOpacity="0.18" strokeWidth="1" strokeDasharray="2 7" />
          {/* nested squares — outer slow CW, inner faster CCW, counter-rotating vortex */}
          <g>
            {[0, 1, 2, 3].map((k) => {
              const side = 188 - k * 21;
              return (
                <rect key={k} x={-side / 2} y={-side / 2} width={side} height={side} rx="3"
                  transform={`rotate(${k * 11.25})`}
                  stroke={soft} strokeWidth="1.3" strokeOpacity={0.28 + k * 0.07}
                  fill={k === 0 ? "rgba(255,255,255,0.015)" : "none"} />
              );
            })}
            <animateTransform attributeName="transform" type="rotate"
              from="0 0 0" to="360 0 0" dur="48s" repeatCount="indefinite" />
          </g>
          <g>
            {[4, 5, 6, 7].map((k) => {
              const side = 188 - k * 21;
              const isAcc = k >= 6;
              if (isAcc) {
                return (
                  <g key={k} transform={`rotate(${k * 11.25})`}>
                    <rect x={-side / 2} y={-side / 2} width={side} height={side} rx="3"
                      stroke={acc} strokeWidth="1.7" fill="none">
                      <animateTransform attributeName="transform" type="scale"
                        values="0.98;1.02;0.98" dur="4.5s" calcMode="spline"
                        keyTimes="0;0.5;1" keySplines="0.42 0 0.58 1;0.42 0 0.58 1"
                        repeatCount="indefinite" />
                    </rect>
                  </g>
                );
              }
              return (
                <rect key={k} x={-side / 2} y={-side / 2} width={side} height={side} rx="3"
                  transform={`rotate(${k * 11.25})`}
                  stroke={soft} strokeWidth="1.3" strokeOpacity={0.28 + k * 0.07} fill="none" />
              );
            })}
            <animateTransform attributeName="transform" type="rotate"
              from="0 0 0" to="-360 0 0" dur="34s" repeatCount="indefinite" />
          </g>
          {/* center node — soft pulse */}
          <circle r="4.5" fill={acc}>
            <animateTransform attributeName="transform" type="scale"
              values="1;1.15;1" dur="2.5s" calcMode="spline"
              keyTimes="0;0.5;1" keySplines="0.42 0 0.58 1;0.42 0 0.58 1"
              repeatCount="indefinite" additive="sum" />
          </circle>
          <circle r="11" fill="none" stroke={acc} strokeWidth="1" strokeOpacity="0.5" />
          {/* corner accent dots on the outer square */}
          {[[-94, -94], [94, -94], [94, 94], [-94, 94]].map(([x, y], k) => (
            <circle key={k} cx={x} cy={y} r="3" fill={soft} />
          ))}
        </g>
      )}

      {i === 2 && (
        <g transform="translate(240 158)" {...common}>
          {/* static grey base layers */}
          <g transform="translate(0 60)"><path d="M0 -42 L96 0 L0 42 L-96 0 Z" stroke={soft} strokeWidth="1.6" fill="rgba(255,255,255,0.015)" /></g>
          <g transform="translate(0 18)"><path d="M0 -42 L96 0 L0 42 L-96 0 Z" stroke={soft} strokeWidth="1.6" fill="rgba(255,255,255,0.015)" /></g>
          {/* connectors */}
          <line x1="-96" y1="0" x2="-96" y2="42" stroke={soft} strokeWidth="1.4" />
          <line x1="96" y1="0" x2="96" y2="42" stroke={soft} strokeWidth="1.4" />
          <line x1="0" y1="42" x2="0" y2="84" stroke={soft} strokeWidth="1.4" />
          {/* floating orange top layer */}
          <g className="bld-top">
            <g transform="translate(0 -24)"><path d="M0 -42 L96 0 L0 42 L-96 0 Z" stroke={acc} strokeWidth="1.6" fill="rgba(255,255,255,0.04)" /></g>
            <circle className="bld-dot" cx="0" cy="-24" r="3.5" fill={acc} />
            <path d="M-44 -36 L-30 -50 M30 -50 L44 -36" stroke={acc} strokeWidth="1.5" strokeOpacity="0.7" />
          </g>
        </g>
      )}

      {i === 3 && (
        <g className="lc" {...common}>
          <line x1="60" y1="248" x2="430" y2="248" stroke={ink} strokeWidth="1" strokeOpacity="0.4" />
          <line x1="60" y1="248" x2="60" y2="44" stroke={ink} strokeWidth="1" strokeOpacity="0.4" />
          <path className="lc-glow" d="M70 240 C 180 232 250 150 410 56" stroke={acc} strokeWidth="10" strokeOpacity="0.08" pathLength="100" />
          <path className="lc-line" d="M70 240 C 180 232 250 150 410 56" stroke={acc} strokeWidth="1.8" pathLength="100" />
          {[ [70,240],[150,224],[228,178],[316,116] ].map(([x,y],k)=>(
            <circle key={k} className="lc-pt" style={{ "--d": (0.1 * k) + "s", "--bd": (5.4 + k * 1.3) + "s" }} cx={x} cy={y} r="3" fill={soft} />
          ))}
          {/* data-flow particle */}
          <circle className="lc-particle" cx="0" cy="0" r="3.4" fill={acc} />
          {/* destination node */}
          <g className="lc-node" transform="translate(410 56)">
            <circle className="lc-ripple" r="7" fill="none" stroke={acc} strokeWidth="1.5" />
            <circle className="lc-ring" r="7" fill="none" stroke={acc} strokeWidth="1.5" />
            <circle className="lc-core" r="2.5" fill={acc} />
            <circle className="lc-dash" r="20" fill="none" stroke={acc} strokeWidth="1" strokeOpacity="0.4" strokeDasharray="3 5" />
          </g>
          <path d="M392 232 a40 40 0 0 1 38 -28" stroke={ink} strokeWidth="1" strokeOpacity="0.5" />
        </g>
      )}
    </svg>
  );
}

const PROCESS = [
  { step: "01/04", title: "Strategy", body: "We get to know you and your brand — goals, audience, competition. Out of that comes the roadmap everything else stands on.", chips: ["Briefing & Workshop", "Competitor Analysis", "Brand Strategy", "Roadmap"], slot: "auren-proc-1" },
  { step: "02/04", title: "Design", body: "Identity, interface, prototype. This is where the brand becomes visible — from logo to the last pixel of the site.", chips: ["Brand Identity", "Wireframes & UX", "UI Design", "Design System"], slot: "auren-proc-2" },
  { step: "03/04", title: "Build", body: "Engineering on a modern stack: Next.js, React, performance-first. Clean code that scales and still runs in five years.", chips: ["Frontend & CMS", "Backend / API", "Performance & SEO", "QA & Testing"], slot: "auren-proc-3" },
  { step: "04/04", title: "Launch & Care", body: "Deployment, monitoring, continuous optimization. We stay on it — your brand grows, and we grow with it.", chips: ["Go-Live", "Analytics", "Maintenance", "Iteration & Growth"], slot: "auren-proc-4" },
];

function Process() {
  return (
    <section className="section" id="process" data-screen-label="Process">
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="left">
            <Eyebrow n="03">Process / How we work</Eyebrow>
            <h2 className="headline">From <em>briefing</em><br />to <em>launch.</em></h2>
          </div>
          <p className="lede">Four phases, one continuous team. You always know what's happening and what comes next.</p>
        </div>

        <div className="proc-stack">
          {PROCESS.map((p, i) => (
            <article key={p.step} className="proc-card" style={{ "--i": i }}>
              <div className="proc-img">
                <ProcArt i={i} />
              </div>
              <div className="proc-body">
                <div className="step"><span className="step-n">{p.step}</span></div>
                <h3>{p.title}</h3>
                <p>{p.body}</p>
                <div className="proc-chips">
                  {p.chips.map((c) => <span key={c}>{c}</span>)}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- studio ---- */
const STUDIO_META = [
  { k: "Founded", v: "2025" },
  { k: "Clients", v: "30+" },
  { k: "Region", v: "NRW" },
  { k: "Visits", v: "By appointment" },
];

function Studio() {
  return (
    <section className="section" id="studio" data-screen-label="Studio">
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="left">
            <Eyebrow n="05">Studio · Headquarters</Eyebrow>
          </div>
        </div>

        <div className="studio-hero reveal">
          <image-slot id="auren-studio-building" shape="rect" fit="cover" placeholder="Studio exterior — drop image"></image-slot>
          <div className="studio-coords">51.8336° N · 6.6131° E</div>
          <div className="studio-badge">Weidenstraße 58 · Bocholt</div>
        </div>

        <div className="studio-grid">
          <div className="reveal">
            <h2 className="headline">Our studio in Bocholt<br />is our <em>Place-To-Be.</em></h2>
            <p className="lede" style={{ marginTop: 24 }}>
              This is where websites, brands and digital products are built for ambitious companies — no open-plan office, no floor plan, just direct access and short decision paths.
            </p>
            <div className="studio-meta">
              {STUDIO_META.map((m) => (
                <div className="cell" key={m.k}>
                  <div className="k">{m.k}</div>
                  <div className="vv">{m.v}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="studio-photo reveal d2">
            <image-slot id="auren-studio-team" shape="rect" fit="cover" placeholder="Team / inside studio"></image-slot>
            <div className="studio-coords">Inside Studio · 02</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process, Studio, PROCESS, STUDIO_META });