const DS2 = window.LakshayKumarDesignSystem_3ad00d;
const { Button: B2, Card: C2, Icon: I2, Tag: T2, SectionHeading: SH2, ProjectCard, StatBlock } = DS2;

function Projects() {
  return (
    <Section id="work" tone="subtle">
      <Reveal><SH2 eyebrow="Selected work" title="Sites that are live right now" lead="Four builds for real businesses. Two paid, two volunteer. Every one still online." action={<B2 variant="secondary" href="#contact" iconRight="arrow-up-right">Start a project</B2>} /></Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(300px,1fr))", gap: 20, marginTop: "var(--space-7)" }}>
        {window.SITE.projects.map((p, i) => (
          <Reveal key={p.name} delay={i * 80}>
            <Tilt max={4} style={{ height: "100%" }}>
              <ProjectCard {...p} style={{ height: "100%" }} target="_blank" rel="noopener" />
            </Tilt>
          </Reveal>
        ))}
      </div>
      <Reveal delay={140}>
        <div style={{ marginTop: 20, border: "1px dashed var(--border-strong)", borderRadius: "var(--radius-lg)", padding: "var(--card-pad-lg, 28px)", display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap", color: "var(--text-muted)" }}>
          <span style={{ color: "var(--accent)" }}><I2 name="file-plus-2" size={20} /></span>
          <span style={{ fontSize: "var(--text-small)" }}>Case studies for each build are being written — problem, what I changed, what it did for the numbers.</span>
        </div>
      </Reveal>
    </Section>
  );
}

/* Live third-party embed in a design-system card, with a link fallback beneath. */
function Embed({ src, ratio, icon, meta, href, linkLabel }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10, height: "100%" }}>
      <div style={{ border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", overflow: "hidden", background: "var(--surface)", boxShadow: "var(--shadow-sm)", aspectRatio: ratio }}>
        <iframe src={src} title={meta} loading="lazy" scrolling="no" allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen style={{ width: "100%", height: "100%", border: 0, display: "block" }}></iframe>
      </div>
      <a href={href} target="_blank" rel="noopener" style={{ display: "inline-flex", alignItems: "center", gap: 7, fontFamily: "var(--font-mono)", fontSize: "var(--text-meta)", letterSpacing: "var(--text-meta-ls)", textTransform: "uppercase", color: "var(--text-muted)", textDecoration: "none" }}>
        <I2 name={icon} size={14} />{linkLabel}
      </a>
    </div>
  );
}

function Creator() {
  const S = window.SITE;
  return (
    <Section id="content">
      <Reveal><SH2 eyebrow="Content" title="26.6K people follow along" lead="Short-form on AI, websites, SEO and the tools I actually use. Entrepreneurs, creators, developers and students, mostly." action={<B2 variant="secondary" href={S.instagram} iconRight="arrow-up-right">@techlakshay</B2>} /></Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(200px,1fr))", gap: 20, marginTop: "var(--space-7)", padding: "var(--space-6) 0", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)" }}>
        {S.stats.map((s, i) => (
          <Reveal key={s.label} delay={i * 70}>
            <StatBlock value={<Counter value={s.value} />} label={s.label} sub={s.sub} />
          </Reveal>
        ))}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(260px,1fr))", gap: 20, marginTop: "var(--space-7)" }}>
        {S.reels.map((r, i) => (
          <Reveal key={r.id} delay={i * 80}>
            <Embed src={`https://www.instagram.com/reel/${r.id}/embed/`} ratio="9/15" icon="instagram" meta={`Instagram reel — ${r.id}`} href={`https://www.instagram.com/reel/${r.id}/`} linkLabel={r.label} />
          </Reveal>
        ))}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(340px,1fr))", gap: 20, marginTop: 20 }}>
        <Reveal>
          <Embed src="https://www.linkedin.com/embed/feed/update/urn:li:activity:7364926966287777792" ratio="4/3" icon="linkedin" meta="LinkedIn post" href={S.linkedin} linkLabel="Read on LinkedIn" />
        </Reveal>
      </div>
      <Reveal delay={120}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: "var(--space-6)" }}>
          {["Wins", "Free tools", "Brand deals", "Q&A", "Creator growth", "Monetisation", "Career advice"].map((t) => <T2 key={t}>{t}</T2>)}
        </div>
      </Reveal>
    </Section>
  );
}

function SkillBar({ name, yrs, max = 4, delay = 0 }) {
  const [ref, shown] = useReveal(delay);
  return (
    <div ref={ref} style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: "4px 12px", alignItems: "baseline" }}>
      <span style={{ fontSize: "var(--text-small)", color: "var(--text-secondary)" }}>{name}</span>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-meta)", letterSpacing: "var(--text-meta-ls)", color: "var(--text-faint)" }}>{yrs} YR{yrs > 1 ? "S" : ""}</span>
      <span style={{ gridColumn: "1 / -1", height: 5, borderRadius: 99, background: "var(--bg-sunken)", overflow: "hidden", display: "block", marginTop: 4 }}>
        <span style={{ display: "block", height: "100%", borderRadius: 99, background: "var(--accent)", width: shown ? `${(yrs / max) * 100}%` : "0%", transition: "width 1s cubic-bezier(.2,.7,.3,1)" }}></span>
      </span>
    </div>
  );
}

function Skills() {
  return (
    <Section id="skills" tone="subtle">
      <Reveal><SH2 eyebrow="Skills" title="The stack, with honest mileage" lead="Bars are years of hands-on use, not a confidence score." /></Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(270px,1fr))", gap: 20, marginTop: "var(--space-7)" }}>
        {window.SITE.skills.map((g, gi) => (
          <Reveal key={g.group} delay={gi * 80}>
            <C2 padding="lg" style={{ height: "100%" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-meta)", letterSpacing: "var(--text-meta-ls)", textTransform: "uppercase", color: "var(--accent)" }}>{g.group}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 18, marginTop: 20 }}>
                {g.items.map(([n, y], i) => <SkillBar key={n} name={n} yrs={y} delay={gi * 80 + i * 60} />)}
              </div>
            </C2>
          </Reveal>
        ))}
      </div>
      <Reveal delay={120}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: "var(--space-6)" }}>
          {["JIRA", "TestRail", "Zephyr Scale", "JMeter", "Agile / Scrum", "STLC", "Regression", "Smoke", "End-to-end", "Landing pages", "Schema markup", "DigitalOcean"].map((t) => <T2 key={t} size="sm">{t}</T2>)}
        </div>
      </Reveal>
    </Section>
  );
}

Object.assign(window, { Projects, Creator, Skills, Embed, SkillBar });