// Kevin Ortiz — Portfolio · Bottom sections (About, Focus, Projects)

/* ---- registration mark (blueprint corner decoration) ---- */
function RegMark({ pos, label, x, delay }) {
  return (
    <Reveal x={x} y={0} duration={0.9} delay={delay} style={{ position: "absolute", ...pos, zIndex: 1 }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, opacity: 0.85 }}>
        <svg width="clamp(48,7vw,84)" viewBox="0 0 64 64" style={{ width: "clamp(48px,7vw,84px)", height: "auto" }}>
          <circle cx="32" cy="32" r="20" fill="none" stroke="var(--ko-fg-mute-3)" strokeWidth="1.25" />
          <line x1="32" y1="4" x2="32" y2="60" stroke="var(--ko-fg-mute-2)" strokeWidth="1.25" />
          <line x1="4" y1="32" x2="60" y2="32" stroke="var(--ko-fg-mute-2)" strokeWidth="1.25" />
          <circle cx="32" cy="32" r="2.5" fill="var(--ko-fg-strong)" />
        </svg>
        <span className="ko-spec" style={{ color: "var(--ko-fg-mute-3)" }}>{label}</span>
      </div>
    </Reveal>
  );
}

/* ============================================================
   ABOUT
   ============================================================ */
function AboutSection() {
  const aboutText =
    "With more than five years building products, i focus on engineering, design systems, and automation. " +
    "i work best with teams that want something exact, not flashy. Let's build something that actually ships.";

  return (
    <section id="about" style={{
      position: "relative", minHeight: "100svh",
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      padding: "clamp(80px,10vw,140px) clamp(20px,4vw,40px)",
      borderTop: "1px solid var(--ko-line-hairline)", overflow: "hidden",
    }}>
      <RegMark pos={{ top: "5%", left: "2%" }} label="N‑01" x={-60} delay={0.1} />
      <RegMark pos={{ top: "5%", right: "2%" }} label="N‑02" x={60} delay={0.15} />
      <RegMark pos={{ bottom: "7%", left: "4%" }} label="S‑01" x={-60} delay={0.25} />
      <RegMark pos={{ bottom: "7%", right: "4%" }} label="S‑02" x={60} delay={0.3} />

      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "clamp(40px,6vw,64px)", width: "100%" }}>
        <Reveal y={40} duration={0.7}>
          <h2 className="kev-display" style={{ fontSize: "clamp(3rem,12vw,160px)", textAlign: "center", margin: 0 }}>
            About me
          </h2>
        </Reveal>

        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "clamp(64px,9vw,96px)", width: "100%" }}>
          <AnimatedText
            text={aboutText}
            style={{
              color: "var(--ko-fg-strong)", fontWeight: 500, textAlign: "center",
              lineHeight: 1.6, maxWidth: 600, margin: 0,
              fontSize: "clamp(1rem,2vw,1.35rem)",
            }}
          />
          <Reveal y={16} delay={0.1}><ContactButton label="Get in touch" /></Reveal>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FOCUS (recast of Services — kept dark, K.O. forbids white sections)
   ============================================================ */
const FOCUS_ITEMS = [
  ["01", "Product engineering", "Real features in production. Front to back — typed, tested, fast."],
  ["02", "Design systems", "Tokens, components, and rules that keep a product coherent as it grows."],
  ["03", "Automation", "Workflows that handle the repetitive work. Less busywork, more output."],
  ["04", "Interface design", "Dense, legible screens. Layout, type, and state, done right."],
  ["05", "Prototyping", "Clickable proof before the build. Test the idea, then commit."],
];

function FocusRow({ item, index }) {
  const [hover, setHover] = useState(false);
  const [num, name, desc] = item;
  return (
    <Reveal delay={index * 0.08} y={18}>
      <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        data-glow
        className="ko-focus-row"
        style={{
          "--glow-radius": 4,
          display: "flex", alignItems: "flex-start", gap: "clamp(20px,4vw,56px)",
          padding: "clamp(28px,4vw,48px) clamp(8px,2vw,24px)",
          borderTop: "1px solid var(--ko-line-rule)",
          transition: `background ${`var(--ko-dur-base)`} var(--ko-ease-out)`,
          background: hover ? "var(--ko-bg-card)" : "transparent",
        }}
      >
        <span style={{
          fontFamily: "var(--ko-font-display)", fontSize: "clamp(3rem,10vw,140px)",
          lineHeight: 0.85, color: hover ? "var(--ko-fg-white)" : "var(--ko-fg-mute-3)",
          transition: "color var(--ko-dur-base) var(--ko-ease-out)", minWidth: "1.6em",
        }}>{num}</span>
        <div style={{ flex: 1, paddingTop: "0.4em" }}>
          <h3 style={{
            fontWeight: 500, textTransform: "uppercase", letterSpacing: "var(--ko-track-tight)",
            fontSize: "clamp(1rem,2.2vw,2.1rem)", margin: "0 0 10px",
            color: "var(--ko-fg-white)",
          }}>{name}</h3>
          <p style={{
            fontWeight: 300, lineHeight: 1.6, maxWidth: "42ch",
            fontSize: "clamp(0.85rem,1.5vw,1.2rem)",
            color: hover ? "var(--ko-fg-body)" : "var(--ko-fg-mute-2)",
            transition: "color var(--ko-dur-base) var(--ko-ease-out)", margin: 0,
          }}>{desc}</p>
        </div>
        <span className="ko-spec" style={{
          color: hover ? "var(--ko-fg-white)" : "var(--ko-fg-floor)",
          transition: "color var(--ko-dur-base) var(--ko-ease-out)", paddingTop: "0.6em", whiteSpace: "nowrap",
        }}>{hover ? "↗" : "—"}</span>
      </div>
    </Reveal>
  );
}

function FocusSection() {
  return (
    <section id="focus" style={{
      position: "relative", background: "var(--ko-bg-panel)",
      borderTopLeftRadius: "clamp(28px,4vw,48px)", borderTopRightRadius: "clamp(28px,4vw,48px)",
      borderTop: "1px solid var(--ko-line-hairline)",
      padding: "clamp(80px,11vw,140px) clamp(20px,4vw,40px) clamp(60px,8vw,100px)",
      zIndex: 2,
    }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <Reveal y={20} style={{ marginBottom: "clamp(40px,6vw,80px)" }}>
          <div className="ko-eyebrow" style={{ marginBottom: 16 }}>What I do — 05 services</div>
          <h2 className="kev-display" style={{ fontSize: "clamp(3rem,12vw,150px)", margin: 0 }}>Focus</h2>
        </Reveal>
        <div style={{ borderBottom: "1px solid var(--ko-line-rule)" }}>
          {FOCUS_ITEMS.map((item, i) => <FocusRow key={item[0]} item={item} index={i} />)}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   PROJECTS — sticky stacking cards
   ============================================================ */
const PROJECTS = [
  { num: "01", cat: "Personal app", name: "DeepWork", ids: ["p1a", "p1b", "p1c"] },
  { num: "02", cat: "Studio", name: "K.O. Systems", ids: ["p2a", "p2b", "p2c"] },
  { num: "03", cat: "Newsletter", name: "Field Guide", ids: ["p3a", "p3b", "p3c"] },
];

function ProjectCard({ project, index, total }) {
  const ctx = useContext(KevCtx);
  const containerRef = useRef(null);
  const cardRef = useRef(null);
  const targetScale = 1 - (total - 1 - index) * 0.04;
  const stickyTop = `calc(clamp(88px,11vh,128px) + ${index * 26}px)`;

  useEffect(() => {
    if (ctx.reveal === false) { if (cardRef.current) cardRef.current.style.transform = "none"; return; }
    let raf;
    const update = () => {
      const c = containerRef.current, card = cardRef.current;
      if (!c || !card) return;
      const rect = c.getBoundingClientRect();
      let p = -rect.top / rect.height;
      p = Math.min(1, Math.max(0, p));
      const scale = 1 - (1 - targetScale) * p;
      card.style.transform = `scale(${scale.toFixed(4)})`;
    };
    const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(update); };
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    update();
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); cancelAnimationFrame(raf); };
  }, [targetScale, ctx.reveal]);

  const imgBase = { display: "block", width: "100%", border: "1px solid var(--ko-line-hairline)" };

  return (
    <div ref={containerRef} style={{ height: "100vh", display: "flex", alignItems: "flex-start", justifyContent: "center" }}>
      <div ref={cardRef} data-glow style={{
        "--glow-radius": 22,
        position: "sticky", top: stickyTop, transformOrigin: "top center",
        width: "100%", maxWidth: 1180,
        background: "var(--ko-bg-base)", border: "1px solid var(--ko-line-strong)",
        borderRadius: "clamp(16px,2vw,24px)", padding: "clamp(16px,2.2vw,32px)",
      }}>
        {/* top row */}
        <div style={{ position: "relative", zIndex: 1, display: "flex", alignItems: "flex-start", gap: "clamp(16px,2.5vw,40px)", marginBottom: "clamp(16px,2vw,28px)", flexWrap: "wrap" }}>
          <span style={{
            fontFamily: "var(--ko-font-display)", fontSize: "clamp(2.4rem,7vw,110px)",
            lineHeight: 0.8, color: "var(--ko-fg-white)",
          }}>{project.num}</span>
          <div style={{ flex: 1, minWidth: 180, paddingTop: "0.3em" }}>
            <div className="ko-eyebrow" style={{ marginBottom: 8 }}>{project.cat}</div>
            <h3 style={{ fontSize: "clamp(1.4rem,3vw,2.4rem)", fontWeight: 600, letterSpacing: "var(--ko-track-tight)", margin: 0, color: "var(--ko-fg-white)" }}>
              {project.name}
            </h3>
          </div>
          <GhostButton label="View project" style={{ alignSelf: "center" }} />
        </div>

        {/* image grid */}
        <div className="ko-project-grid" style={{ position: "relative", zIndex: 1, display: "grid", gridTemplateColumns: "40fr 60fr", gap: "clamp(10px,1.4vw,18px)" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: "clamp(10px,1.4vw,18px)" }}>
            <image-slot id={project.ids[0]} shape="rounded" radius="10" placeholder="Drop image"
              style={{ ...imgBase, height: "clamp(120px,16vw,220px)", borderRadius: "clamp(12px,1.6vw,20px)" }}></image-slot>
            <image-slot id={project.ids[1]} shape="rounded" radius="10" placeholder="Drop image"
              style={{ ...imgBase, height: "clamp(150px,22vw,330px)", borderRadius: "clamp(12px,1.6vw,20px)" }}></image-slot>
          </div>
          <image-slot id={project.ids[2]} shape="rounded" radius="10" placeholder="Drop image"
            style={{ ...imgBase, height: "100%", minHeight: 200, borderRadius: "clamp(12px,1.6vw,20px)" }}></image-slot>
        </div>
      </div>
    </div>
  );
}

function ProjectsSection() {
  return (
    <section id="projects" style={{
      position: "relative", background: "var(--ko-bg-void)",
      borderTopLeftRadius: "clamp(28px,4vw,48px)", borderTopRightRadius: "clamp(28px,4vw,48px)",
      marginTop: "clamp(-56px,-6vw,-40px)", zIndex: 10,
      padding: "clamp(60px,8vw,110px) clamp(20px,4vw,40px) clamp(40px,6vw,80px)",
      borderTop: "1px solid var(--ko-line-hairline)",
    }}>
      <div style={{ maxWidth: 1180, margin: "0 auto clamp(20px,3vw,40px)" }}>
        <Reveal y={20}>
          <div className="ko-eyebrow" style={{ marginBottom: 16 }}>Selected builds — 03</div>
          <h2 className="kev-display" style={{ fontSize: "clamp(3rem,12vw,150px)", margin: 0 }}>Project</h2>
        </Reveal>
      </div>
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        {PROJECTS.map((p, i) => <ProjectCard key={p.num} project={p} index={i} total={PROJECTS.length} />)}
      </div>
    </section>
  );
}

/* ============================================================
   FOOTER
   ============================================================ */
function FooterSection() {
  return (
    <footer id="contact" style={{
      background: "var(--ko-bg-void)", borderTop: "1px solid var(--ko-line-hairline)",
      padding: "clamp(60px,9vw,120px) clamp(20px,4vw,40px) clamp(40px,5vw,60px)",
    }}>
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        <Reveal y={20}>
          <div className="ko-eyebrow" style={{ marginBottom: "clamp(20px,3vw,32px)" }}>Get in touch</div>
          <a href="mailto:kevin@kevinortiz.net" className="kev-display" style={{
            fontSize: "clamp(2.2rem,9vw,128px)", display: "block", color: "var(--ko-fg-white)",
            textDecoration: "none", lineHeight: 0.9, margin: 0,
          }}>
            Let&apos;s build →
          </a>
        </Reveal>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24,
          marginTop: "clamp(48px,7vw,96px)", paddingTop: 24, borderTop: "1px solid var(--ko-line-rule)",
        }}>
          <span className="ko-spec" style={{ color: "var(--ko-fg-mute-2)" }}>© 2026 KEVIN ORTIZ · ALL RIGHTS RESERVED</span>
          <div style={{ display: "flex", gap: "clamp(16px,2vw,28px)" }}>
            {["Email", "GitHub", "YouTube", "Newsletter"].map((l) => (
              <a key={l} href="#" className="kev-nav-link" style={{ fontSize: 12 }}>{l}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { AboutSection, FocusSection, ProjectsSection, FooterSection });