// FireTail portfolio — About + Contact
const { Avatar, Tag, Input, Button } = window.FireTailDesignSystem_df7a18;

const EXP = [
  { y: "Nov 2025 — Now", role: "Senior Game Developer", org: "Felicity Games", note: "Live systems, puzzle mechanics, and a 20–30% perf pass on the live game." },
  { y: "Jul 2023 — Oct 2025", role: "Senior Game Developer", org: "Appsoleut Games", note: "Race systems, traffic AI, and Photon Fusion multiplayer — plus a ~50% performance turnaround and CI/CD that cut deploy time 80%." },
  { y: "Sep 2022 — Jun 2023", role: "Game Programmer", org: "Metamersive Technologies", note: "Gameplay systems, UI, and editor tooling for faster iteration." },
  { y: "Nov 2019 — Sep 2022", role: "Game Programmer", org: "Indusgeeks Solutions", note: "Gameplay features across multiple shipped interactive applications." },
];
const EDU = { deg: "Bachelor of Computer Science · University of Mumbai", org: "University of Mumbai", y: "" };

function TechChip({ slug, label }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 12px 6px 10px",
      border: "1px solid var(--border-strong)", borderRadius: "var(--radius-pill)",
      background: "var(--surface-card)",
    }}>
      <BrandIcon slug={slug} label={label} size={15} color="b3c0d8" />
      <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--text-body)" }}>{label}</span>
    </span>
  );
}

function About() {
  const skills = ["Photon Fusion", "Live Ops", "Performance Optimization", "Addressables", "AI Systems", "CI/CD", "DOTS / ECS", "Vulkan"];
  const [narrow, setNarrow] = React.useState(() => window.innerWidth < 768);
  const cardRef = React.useRef(null);
  const [stickyTop, setStickyTop] = React.useState(92);

  React.useEffect(() => {
    const mq = window.matchMedia("(max-width: 767px)");
    const fn = (e) => setNarrow(e.matches);
    mq.addEventListener("change", fn);
    return () => mq.removeEventListener("change", fn);
  }, []);

  React.useEffect(() => {
    if (!cardRef.current) return;
    if (narrow) return;
    const DOCK_SLOT = 60; // 42px height + 18px margin when expanded
    const update = () => {
      const h = cardRef.current.getBoundingClientRect().height;
      const anchor = cardRef.current.querySelector("#ft-anchor-card");
      const currentSlot = anchor ? anchor.offsetHeight + (parseFloat(anchor.style.marginTop) || 0) : 0;
      const fullH = h + (DOCK_SLOT - currentSlot);
      setStickyTop(Math.max(92, window.innerHeight - fullH - 24));
    };
    update();
    const ro = new ResizeObserver(update);
    ro.observe(cardRef.current);
    window.addEventListener("resize", update);
    return () => { ro.disconnect(); window.removeEventListener("resize", update); };
  }, [narrow]);

  const card = (
    <aside ref={cardRef} data-reveal style={{
      background: "var(--surface-card)", border: "1px solid var(--border)",
      borderRadius: "var(--radius-lg)", padding: "clamp(20px,3vw,28px)",
      ...(narrow ? { order: -1 } : { position: "sticky", top: stickyTop }),
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 20 }}>
        <Avatar name="Smit Waghela" ring size={56} />
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18, color: "var(--text-strong)" }}>Gameplay Programmer</div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--accent)" }}>Open to work</div>
        </div>
      </div>
      {[["Education", EDU.deg], ["Engines", "Unity · Unreal · C++"], ["Platforms", "Mobile · PC · WebGL"], ["Based", "Remote · GMT+5:30"]].map(([k, v]) => (
        <div key={k} style={{ display: "flex", justifyContent: "space-between", gap: 16, padding: "11px 0", borderTop: "1px solid var(--border-faint)" }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-faint)", flexShrink: 0 }}>{k}</span>
          <span style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, color: "var(--text-body)", textAlign: "right" }}>{v}</span>
        </div>
      ))}
      <div id="ft-anchor-card" style={{ height: 0, marginTop: 0, overflow: "hidden", display: "flex", justifyContent: "flex-end", alignItems: "center", transition: "height .4s var(--ease-out), margin-top .4s var(--ease-out)" }} />
    </aside>
  );

  return (
    <section id="about" style={{ padding: "clamp(56px,8vw,104px) clamp(20px,5vw,48px)", borderTop: "1px solid var(--border)" }}>
      <div style={{
        maxWidth: "var(--container)", margin: "0 auto", display: "grid",
        gridTemplateColumns: narrow ? "1fr" : "minmax(0,1.45fr) minmax(0,1fr)",
        gap: narrow ? 32 : "clamp(32px,5vw,72px)", alignItems: "start",
      }}>
        <div data-reveal>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--accent)" }}>02 / About</span>
          <h2 style={{ margin: "12px 0 24px", fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(28px,4vw,46px)", letterSpacing: "-0.02em", color: "var(--text-strong)", lineHeight: 1.1, maxWidth: 640, textWrap: "balance" }}>
            I'm Smit, and I build the quiet <em style={{ color: "var(--accent)", fontStyle: "italic" }}>fire</em>.
          </h2>
          <div style={{ display: "flex", flexDirection: "column", gap: 18, maxWidth: 600 }}>
            <p style={pp}>Six years in, and the part I love most is still the stuff nobody sees — the system quietly holding a game together. I've built that system for mobile puzzles, multiplayer shooters, and live-service games, usually as the person a team hands the hard, ambiguous problem to. Genre, platform, engine — I'll figure out how to make it work, and make it fast.</p>
            <p style={pp}>Off the clock, I build for the fun of finding out. Four game jam builds have made it to itch.io — including one built on zero sleep with a teammate in 48 hours. A few other things exist purely because I wanted to know how they work: a DOTS/ECS particle sandbox, a terrain generator that grows its own world, a Vulkan renderer built from first principles. Not everything ships. Everything teaches me something I steal for the day job.</p>
          </div>

          {/* Skills */}
          <div style={{ marginTop: 28, display: "flex", gap: 8, flexWrap: "wrap" }}>
            {TECH.map((t) => <TechChip key={t.label} slug={t.slug} label={t.label} />)}
            {skills.map((s) => <Tag key={s} tone="neutral">{s}</Tag>)}
          </div>

          {/* Experience timeline */}
          <div style={{ marginTop: "clamp(36px,5vw,52px)" }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-faint)" }}>The road so far</span>
            <ol style={{ listStyle: "none", margin: "18px 0 0", padding: 0 }}>
              {EXP.map((e, i) => (
                <li key={i} style={{ position: "relative", paddingLeft: 26, paddingBottom: i === EXP.length - 1 ? 0 : 24 }}>
                  <span style={{ position: "absolute", left: 3, top: 5, width: 9, height: 9, borderRadius: "50%", background: i === 0 ? "var(--accent)" : "var(--ink-400)", boxShadow: i === 0 ? "var(--glow-ember)" : "none" }} />
                  {i !== EXP.length - 1 && <span style={{ position: "absolute", left: 7, top: 16, bottom: 2, width: 1, background: "var(--border-strong)" }} />}
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", color: "var(--text-faint)" }}>{e.y}</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, fontWeight: 600, color: "var(--text-strong)", marginTop: 3 }}>{e.role} <span style={{ color: "var(--accent)", fontWeight: 500 }}>· {e.org}</span></div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, color: "var(--text-muted)", marginTop: 2 }}>{e.note}</div>
                </li>
              ))}
            </ol>
          </div>
        </div>
        {card}
      </div>
    </section>
  );
}

function Contact() {
  const [sent, setSent] = React.useState(false);
  return (
    <section id="contact" style={{ padding: "clamp(48px,7vw,110px) clamp(20px,5vw,48px)", position: "relative" }}>
      <div data-reveal style={{ position: "relative", maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--accent)" }}>03 / Contact</span>
        <h2 style={{ margin: "14px auto 18px", fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(32px,5.5vw,64px)", letterSpacing: "-0.02em", color: "var(--text-strong)", lineHeight: 1.04, maxWidth: 640, textWrap: "balance" }}>
          Got a fire that needs lighting?
        </h2>
        <p style={{ ...pp, color: "var(--text-muted)", margin: "0 auto 36px", maxWidth: 480 }}>Gameplay, tools, prototypes, or a full vertical slice — bring the spark, I'll bring the fire.</p>
        {sent ? (
          <div style={{ maxWidth: 520, margin: "0 auto", padding: "28px", background: "var(--surface-card)", border: "1px solid var(--accent-line)", borderRadius: "var(--radius-lg)", boxShadow: "var(--glow-ember)" }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--text-strong)", marginBottom: 6 }}>Message sent ✶</div>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-muted)" }}>Thanks — I'll get back to you within a couple of days.</div>
          </div>
        ) : (
          <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ maxWidth: 520, margin: "0 auto", display: "flex", flexDirection: "column", gap: 16, textAlign: "left" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <Input label="Name" placeholder="You / studio" required />
              <Input label="Email" type="email" placeholder="you@studio.com" required />
            </div>
            <Input label="The pitch" as="textarea" placeholder="Genre, platform, scope, timeline…" required />
            <Button size="lg" type="submit" iconRight={<span style={{ fontFamily: "var(--font-mono)" }}>→</span>}>Send it</Button>
          </form>
        )}
      </div>
    </section>
  );
}

const pp = { margin: 0, fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.66, color: "var(--text-body)" };

Object.assign(window, { About, Contact });
