// about.jsx — bio, process timeline, values, stats

const { useState: useStateAb, useEffect: useEffectAb, useRef: useRefAb } = React;

function About({ setRoute }) {
  return (
    <main style={{ paddingTop: 88 }}>

      {/* ─── intro ─────────────────────────────────────────── */}
      <section style={{ padding: "60px 0 var(--d-block)" }}>
        <div className="wrap-wide">
          <div className="eyebrow" style={{ marginBottom: 20 }}>—  About</div>

          <div style={{
            display: "grid",
            gridTemplateColumns: "1.4fr 1fr",
            gap: 64,
            alignItems: "flex-end",
            marginBottom: 80
          }}>
            <h1 style={{ fontSize: "clamp(56px, 7.6vw, 144px)" }}>
              <span style={{ color: "var(--ink)" }}>One </span>
              <span className="serif spectrum">animator,</span>
              <br />
              <span style={{ color: "var(--ink)" }}>one </span>
              <span className="serif" style={{ color: "var(--ink-2)" }}>obsession.</span>
            </h1>

            <p style={{
              color: "var(--ink-2)", fontSize: 19, lineHeight: 1.5,
              margin: 0, maxWidth: 440
            }}>Hi, I'm Obada— a motion designer working out of US. I've spent the last 11 years putting brand marks into motion. Visimatic is what happened when I stopped freelancing through agencies and started taking commissions directly.




            </p>
          </div>

          {/* portrait + sidebar */}
          <div style={{
            display: "grid",
            gridTemplateColumns: "1.4fr 1fr",
            gap: 24
          }}>
            <Reveal>
              <Portrait />
            </Reveal>

            <Reveal delay={100} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <FactCard k="Based in" v="RI, USA · ET" />
              <FactCard k="Working since" v="2015 " />
              <FactCard k="Tools" v="After Effects · Cinema 4D · Figma" />
              <FactCard k="Speaks" v="English · Français · Arabic" />
              <FactCard k="Sleeps" v="Eventually" subtle />
            </Reveal>
          </div>
        </div>
      </section>

      {/* ─── stat counters ─────────────────────────────────── */}
      <section style={{ padding: "var(--d-block) 0" }}>
        <div className="wrap-wide">
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 0,
            borderTop: "1px solid var(--line)",
            borderBottom: "1px solid var(--line)"
          }}>
            <StatCounter k="Logos animated" end={147} />
            <StatCounter k="Avg. delivery" end={3} suffix=" days" decimals={0} />
            <StatCounter k="Repeat clients" end={62} suffix="%" />
            <StatCounter k="Years at it" end={11} />
          </div>
        </div>
      </section>

      {/* ─── process timeline ──────────────────────────────── */}
      <ProcessTimeline />

      {/* ─── values ────────────────────────────────────────── */}
      <Values />

      {/* ─── bio long-form ─────────────────────────────────── */}
      <LongBio />

      {/* ─── CTA ───────────────────────────────────────────── */}
      <section style={{ padding: "var(--d-block) 0 var(--d-section)" }}>
        <div className="wrap-wide">
          <Reveal>
            <div className="glass glass-hi" style={{
              padding: "64px 56px",
              borderRadius: "var(--radius-lg)",
              display: "grid",
              gridTemplateColumns: "1.4fr 1fr",
              gap: 32, alignItems: "center"
            }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 14 }}>—  Want to work together?</div>
                <h2 style={{ marginBottom: 14, fontSize: "clamp(38px, 4.6vw, 64px)" }}>
                  Ready <span className="serif">when you are.</span>
                </h2>
                <p style={{ color: "var(--ink-2)", fontSize: 17, lineHeight: 1.5, margin: 0, maxWidth: 480 }}>
                  Reserve a spot or book a 15-minute call if you want to chat through it first.
                </p>
              </div>
              <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", flexWrap: "wrap" }}>
                <button onClick={() => setRoute("contact")} className="btn btn-ghost" style={{ fontSize: 15 }}>
                  Book a call
                </button>
                <button onClick={() => setRoute("order")} className="btn btn-primary" style={{ fontSize: 15 }}>
                  Reserve a slot <span className="arr">→</span>
                </button>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </main>);

}

/* ─── portrait ─── */

function Portrait() {
  // a stylized, abstract "portrait" — we don't have a real photo so we
  // make a beautiful glass card with a chromatic gradient avatar +
  // signature + readout. feels intentional, not placeholder-y.
  return (
    <div style={{
      position: "relative",
      borderRadius: "var(--radius-lg)",
      overflow: "hidden",
      border: "1px solid var(--line-2)",
      aspectRatio: "4/3",
      background: "var(--void-2)"
    }}>
      {/* abstract iridescent backdrop */}
      <div style={{
        position: "absolute", inset: 0,
        background: `
          radial-gradient(60% 50% at 30% 30%, color-mix(in oklab, var(--p-cyan) 60%, transparent), transparent 70%),
          radial-gradient(50% 50% at 75% 35%, color-mix(in oklab, var(--p-magenta) 50%, transparent), transparent 70%),
          radial-gradient(60% 50% at 60% 80%, color-mix(in oklab, var(--p-violet) 55%, transparent), transparent 70%)
        `,
        filter: "blur(28px)"
      }} />

      {/* large prism silhouette as photographic stand-in */}
      <div style={{
        position: "absolute", left: "50%", top: "52%",
        width: "50%",
        transform: "translate(-50%, -50%) rotate(-6deg)",
        filter: "drop-shadow(0 30px 60px rgba(0,0,0,0.6))",
        animation: "prismFloat 9s ease-in-out infinite"
      }}>
        <img src="assets/prism.png" alt="" style={{ width: "100%", display: "block" }} />
      </div>

      {/* film grain on top */}
      <div style={{
        position: "absolute", inset: 0,
        background: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")",
        mixBlendMode: "overlay",
        opacity: 0.7
      }} />

      {/* overlay UI */}
      <div style={{
        position: "absolute", left: 28, top: 28,
        display: "flex", gap: 10, alignItems: "center"
      }}>
        <span className="chip" style={{ background: "rgba(0,0,0,0.45)" }}>
          <span className="chip-dot" /> WORKING NOW
        </span>
      </div>

      <CornerMark pos="tl" />
      <CornerMark pos="tr" />
      <CornerMark pos="bl" />
      <CornerMark pos="br" />

      <div style={{
        position: "absolute", left: 28, bottom: 24, right: 28,
        display: "flex", justifyContent: "space-between", alignItems: "flex-end",
        color: "white"
      }}>
        <div>
          <div className="eyebrow" style={{ color: "rgba(255,255,255,0.6)", marginBottom: 6 }}>FOUNDER / ANIMATOR

          </div>
          <div style={{
            fontFamily: "var(--font-serif)", fontStyle: "italic",
            fontSize: 44, lineHeight: 0.9, color: "white"
          }}>Obada—

          </div>
        </div>
        <div className="mono" style={{ fontSize: 11, color: "rgba(255,255,255,0.7)", letterSpacing: "0.18em" }}>
          PORTRAIT №01<br />2026
        </div>
      </div>
    </div>);

}

function CornerMark({ pos }) {
  const map = {
    tl: { top: 14, left: 14, borderTop: "1px solid rgba(255,255,255,0.6)", borderLeft: "1px solid rgba(255,255,255,0.6)" },
    tr: { top: 14, right: 14, borderTop: "1px solid rgba(255,255,255,0.6)", borderRight: "1px solid rgba(255,255,255,0.6)" },
    bl: { bottom: 14, left: 14, borderBottom: "1px solid rgba(255,255,255,0.6)", borderLeft: "1px solid rgba(255,255,255,0.6)" },
    br: { bottom: 14, right: 14, borderBottom: "1px solid rgba(255,255,255,0.6)", borderRight: "1px solid rgba(255,255,255,0.6)" }
  };
  return <div style={{ position: "absolute", width: 12, height: 12, ...map[pos] }} />;
}

/* ─── fact card ─── */

function FactCard({ k, v, subtle }) {
  return (
    <div className="glass" style={{
      padding: "20px 22px",
      borderRadius: "var(--radius-sm)",
      display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16,
      opacity: subtle ? 0.7 : 1
    }}>
      <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-3)" }}>
        {k.toUpperCase()}
      </span>
      <span style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 500, color: "var(--ink)", letterSpacing: "-0.015em", textAlign: "right" }}>
        {v}
      </span>
    </div>);

}

/* ─── animated stat counter ─── */

function StatCounter({ k, end, suffix = "", decimals = 0 }) {
  const [val, setVal] = useStateAb(0);
  const ref = useRefAb(null);
  useEffectAb(() => {
    const el = ref.current;if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (!e.isIntersecting) return;
      io.disconnect();
      const t0 = performance.now();
      const dur = 1400;
      const tick = (t) => {
        const p = Math.min(1, (t - t0) / dur);
        const eased = 1 - Math.pow(1 - p, 3);
        setVal(end * eased);
        if (p < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [end]);
  return (
    <div ref={ref} style={{
      padding: "32px 28px",
      borderLeft: "1px solid var(--line)",
      display: "flex", flexDirection: "column", gap: 8
    }}>
      <div className="eyebrow">{k}</div>
      <div style={{
        fontFamily: "var(--font-display)", fontSize: "clamp(40px, 5vw, 64px)",
        fontWeight: 500, letterSpacing: "-0.035em", lineHeight: 0.9
      }}>
        {val.toFixed(decimals)}{suffix}
      </div>
    </div>);

}

/* ─── process timeline ─── */

function ProcessTimeline() {
  const steps = [
  { n: "01", t: "Brief", d: "You drop your logo and a short paragraph on the vibe. I read it twice and ask one or two follow-ups if I need to.", dur: "Day 0" },
  { n: "02", t: "Direction", d: "I send back a moodboard and a rough timing plan — about thirty seconds of reference and a hand-drawn timeline.", dur: "Day 1" },
  { n: "03", t: "Animate", d: "I build it from scratch in After Effects. No templates, no presets — every curve is drawn by hand.", dur: "Day 2–3" },
  { n: "04", t: "Polish", d: "Sound design, motion blur, frame-by-frame timing pass. The little tweaks that make it feel like a million bucks.", dur: "Day 4" },
  { n: "05", t: "Deliver", d: "MP4, MOV with alpha, looped versions, and the AE file if you want it. Yours forever, with full commercial rights.", dur: "Day 5" }];

  return (
    <section style={{ padding: "var(--d-block) 0" }}>
      <div className="wrap-wide">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 20 }}>—  How a commission flows</div>
          <h2 style={{ marginBottom: 64, maxWidth: 880 }}>
            <span className="serif">Five days</span> from your inbox to mine and back.
          </h2>
        </Reveal>
        <div style={{ position: "relative" }}>
          {/* vertical spine */}
          <div style={{
            position: "absolute", left: 26, top: 24, bottom: 24,
            width: 1,
            background: "linear-gradient(180deg, var(--p-cyan), var(--p-violet), var(--p-magenta), var(--p-coral))",
            opacity: 0.5
          }} />
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            {steps.map((s, i) =>
            <Reveal key={s.n} delay={i * 80} style={{ position: "relative", paddingLeft: 80 }}>
                <div style={{
                position: "absolute", left: 8, top: 6,
                width: 36, height: 36, borderRadius: "50%",
                background: "var(--void)",
                border: "1px solid var(--line-2)",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500,
                letterSpacing: "0.08em", color: "var(--ink-2)",
                zIndex: 1
              }}>
                  {s.n}
                </div>
                <div className="glass" style={{
                padding: "24px 28px",
                display: "grid",
                gridTemplateColumns: "180px 1fr 100px",
                gap: 32, alignItems: "center"
              }}>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 500, letterSpacing: "-0.025em" }}>
                    {s.t}
                  </div>
                  <div style={{ color: "var(--ink-2)", fontSize: 15, lineHeight: 1.5, maxWidth: 620 }}>
                    {s.d}
                  </div>
                  <div className="mono" style={{
                  fontSize: 11, letterSpacing: "0.14em",
                  color: "var(--ink-3)", textAlign: "right"
                }}>
                    {s.dur.toUpperCase()}
                  </div>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ─── values ─── */

function Values() {
  const vals = [
  { k: "No templates.", d: "Every animation is keyframed from scratch. ", glyph: "noTpl" },
  { k: "No subscriptions.", d: "Pay once, get the files, keep them forever. No drip pricing, no licensing wrappers.", glyph: "noSub" },
  { k: "No filler frames.", d: "Every keyframe earns its place. No motion for the sake of motion, no extra seconds to pad a deliverable.", glyph: "noAi" },
  { k: "No agency middle.", d: "You talk to the person making the thing. Briefs answered in hours, not project-management days.", glyph: "noMid" }];

  return (
    <section style={{ padding: "var(--d-block) 0" }}>
      <div className="wrap-wide">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 20 }}>—  How I work</div>
          <h2 style={{ marginBottom: 56, maxWidth: 900 }}>
            Four <span className="serif">non-negotiables.</span>
          </h2>
        </Reveal>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 16
        }}>
          {vals.map((v, i) =>
          <Reveal key={v.k} delay={i * 80}>
              <div className="glass" style={{
              padding: "32px 28px 28px",
              minHeight: 240,
              display: "flex", flexDirection: "column", gap: 18
            }}>
                <ValueGlyph kind={v.glyph} />
                <div style={{
                fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 500,
                letterSpacing: "-0.025em"
              }}>
                  {v.k}
                </div>
                <div style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.5 }}>
                  {v.d}
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function ValueGlyph({ kind }) {
  const c = "var(--ink-2)";
  if (kind === "noTpl") return (
    <svg width="44" height="36" viewBox="0 0 44 36" fill="none">
      <rect x="2" y="2" width="22" height="14" rx="2" stroke={c} />
      <rect x="2" y="20" width="22" height="14" rx="2" stroke={c} />
      <path d="M28 4l12 28" stroke="var(--p-magenta)" strokeWidth="2" strokeLinecap="round" />
    </svg>);

  if (kind === "noSub") return (
    <svg width="44" height="36" viewBox="0 0 44 36" fill="none">
      <circle cx="22" cy="18" r="14" stroke={c} />
      <path d="M10 6l24 24" stroke="var(--p-magenta)" strokeWidth="2" strokeLinecap="round" />
      <text x="22" y="22" textAnchor="middle" fill={c} fontSize="12" fontFamily="serif" fontStyle="italic">$</text>
    </svg>);

  if (kind === "noAi") return (
    <svg width="44" height="36" viewBox="0 0 44 36" fill="none">
      <rect x="3" y="11" width="10" height="14" rx="1.5" stroke={c} />
      <rect x="17" y="11" width="10" height="14" rx="1.5" stroke={c} />
      <rect x="31" y="11" width="10" height="14" rx="1.5" stroke={c} strokeDasharray="2 2" opacity="0.5" />
      <path d="M29 6 L43 30" stroke="var(--p-magenta)" strokeWidth="2" strokeLinecap="round" />
    </svg>);

  return (
    <svg width="44" height="36" viewBox="0 0 44 36" fill="none">
      <circle cx="8" cy="18" r="5" stroke={c} />
      <circle cx="36" cy="18" r="5" stroke={c} />
      <path d="M13 18 H31" stroke="var(--p-cyan)" strokeWidth="2" />
    </svg>);

}

/* ─── long bio ─── */

function LongBio() {
  return (
    <section style={{ padding: "var(--d-block) 0" }}>
      <div className="wrap-wide">
        <div style={{
          display: "grid",
          gridTemplateColumns: "260px 1fr",
          gap: 64,
          alignItems: "flex-start"
        }}>
          <Reveal>
            <div className="eyebrow">—  The longer version</div>
          </Reveal>
          <Reveal delay={120} style={{
            display: "flex", flexDirection: "column", gap: 28,
            fontFamily: "var(--font-serif)",
            fontSize: 26, lineHeight: 1.4,
            color: "var(--ink-2)",
            textWrap: "pretty",
            maxWidth: 820
          }}>
            <p style={{ margin: 0 }}>
              Hey there! I'm a Motion Designer & Illustrator with 11+ years of turning caffeine and creativity into explainer videos, logo animations, and everything in between. 

              <span style={{ color: "var(--ink-3)" }}></span>
            </p>
            <p style={{ margin: 0 }}>
              After Effects and I have been in a committed relationship for over a decade, and things are still going strong. Detailed keyframe animation? My love language. Audio-driven motion design? Don't even get me started — I could talk about it all day (and sometimes do).
            </p>
            <p style={{ margin: 0, width: "579px" }}>
              If you need motion that moves people — or at least moves really, really smoothly — 

              <span className="spectrum" style={{ fontStyle: "normal", fontFamily: "var(--font-display)", letterSpacing: "-0.02em", borderWidth: "0px 4px 0px 0px", borderStyle: "solid" }}>Get in touch</span>
            </p>
          </Reveal>
        </div>
      </div>
    </section>);

}

Object.assign(window, { About });