const DS1 = window.LakshayKumarDesignSystem_3ad00d;
const { Button, Card, Tag, Icon, SectionHeading } = DS1;

function Section({ id, tone = "bg", children, style }) {
  return (
    <section id={id} style={{ background: tone === "subtle" ? "var(--bg-subtle)" : "var(--bg)", padding: "var(--section-y, 96px) var(--page-gutter)", ...style }}>
      <div style={{ maxWidth: "var(--container-wide)", margin: "0 auto" }}>{children}</div>
    </section>
  );
}

function AuroraField() {
  const a = useParallax(0.05), b = useParallax(-0.04);
  return (
    <div aria-hidden="true" className="aurora-field">
      <div ref={a} className="aurora aurora-a"></div>
      <div ref={b} className="aurora aurora-b"></div>
      <div className="grid-veil"></div>
    </div>
  );
}

function Hero() {
  const S = window.SITE;
  const portrait = useParallax(-0.05);
  return (
    <GlowSurface id="top" radius={520} style={{ overflow: "hidden", borderBottom: "1px solid var(--border-subtle)" }}>
      <AuroraField />
      <div style={{ maxWidth: "var(--container-wide)", margin: "0 auto", padding: "clamp(72px,10vw,132px) var(--page-gutter) clamp(64px,8vw,104px)", display: "grid", gridTemplateColumns: "minmax(0,1.25fr) minmax(0,.85fr)", gap: "var(--space-8)", alignItems: "center" }} className="hero-grid">
        <div>
          <Reveal>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-mono)", fontSize: "var(--text-meta)", letterSpacing: "var(--text-meta-ls)", textTransform: "uppercase", color: "var(--accent)", border: "1px solid var(--border)", background: "color-mix(in srgb, var(--surface) 70%, transparent)", borderRadius: "var(--radius-pill)", padding: "7px 14px" }}>
              <span className="live-dot"></span>India — available worldwide
            </div>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--weight-semibold)", fontSize: "var(--text-hero)", lineHeight: "var(--text-hero-lh)", letterSpacing: "var(--text-hero-ls)", margin: "26px 0 0", color: "var(--text)" }}>
              Hi, I'm Lakshay Kumar.<br /><Rotator words={S.roles} />
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p style={{ fontSize: "var(--text-lead)", lineHeight: "var(--text-lead-lh)", color: "var(--text-muted)", margin: "24px 0 0", maxWidth: "44ch", textWrap: "pretty" }}>
              I build websites that grow businesses, make content that teaches people, and automate the work that shouldn't need a person. Four years of QA automation at HCLTech, on Cricket Australia and Coles.
            </p>
          </Reveal>
          <Reveal delay={240}>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 34 }}>
              <Button size="lg" href="#work" iconRight="arrow-down">View my work</Button>
              <Button size="lg" variant="secondary" href="#contact" iconRight="arrow-up-right">Say hi</Button>
              <Button size="lg" variant="ghost" href="uploads/resume-1786045404624.pdf" icon="download" download>Résumé</Button>
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--space-6)", marginTop: 44, paddingTop: 28, borderTop: "1px solid var(--border-subtle)" }}>
              {[["4+", "years in QA automation"], ["26.6K", "Instagram followers"], ["4", "client sites live"]].map(([v, l]) => (
                <div key={l}>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 30, fontWeight: "var(--weight-semibold)", letterSpacing: "-0.03em", lineHeight: 1 }}><Counter value={v} /></div>
                  <div style={{ fontSize: "var(--text-caption)", color: "var(--text-muted)", marginTop: 7 }}>{l}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
        <Reveal delay={200} y={34}>
          <div ref={portrait} style={{ position: "relative" }}>
            <Tilt max={5}>
              <div style={{ border: "1px solid var(--border)", borderRadius: "var(--radius-xl, 28px)", overflow: "hidden", boxShadow: "var(--shadow-lg, var(--shadow-md))", background: "var(--surface)", aspectRatio: "4/5" }}>
                <image-slot id="portrait" shape="rect" placeholder="Drop your portrait here" fit="cover"></image-slot>
              </div>
            </Tilt>
            <div className="float-chip" style={{ position: "absolute", left: -18, bottom: 34 }}>
              <Icon name="wand-sparkles" size={15} />Automating what repeats
            </div>
            <div className="float-chip float-chip-slow" style={{ position: "absolute", right: -14, top: 40 }}>
              <Icon name="globe" size={15} />4 sites live
            </div>
          </div>
        </Reveal>
      </div>
    </GlowSurface>
  );
}

function Marquee() {
  const items = window.SITE.marquee;
  const row = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {row.map((t, i) => (
          <span key={i} className="marquee-item">{t}<span className="marquee-sep"></span></span>
        ))}
      </div>
    </div>
  );
}

function About() {
  const cards = [
    { icon: "badge-check", title: "4+ years experience", body: "QA automation at HCLTech since October 2021, on Australian client accounts." },
    { icon: "layout-template", title: "WordPress developer", body: "Four live client sites, two paid and two volunteer, built and still supported." },
    { icon: "sparkles", title: "AI creator", body: "26.6K followers on Instagram for practical AI, SEO and productivity content." },
    { icon: "cpu", title: "Automation engineer", body: "Playwright, Selenium and API frameworks wired into Jenkins pipelines." }
  ];
  return (
    <Section id="about" tone="subtle">
      <Reveal><SectionHeading eyebrow="About" title="Three careers, one person" lead="I do the same thing in three places: find the repetitive part, and remove it." /></Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: "var(--space-7)", marginTop: "var(--space-7)", alignItems: "start" }} className="two-col">
        <Reveal delay={60}>
          <div style={{ fontSize: "var(--text-body)", lineHeight: "var(--text-body-lh)", color: "var(--text-secondary)", display: "flex", flexDirection: "column", gap: 18, maxWidth: "58ch" }}>
            <p style={{ margin: 0 }}>I started in retail support, watching Linux servers stay up. That turned into test automation, and test automation turned into a career: Playwright and Selenium frameworks for platforms that a lot of people use at the same time.</p>
            <p style={{ margin: 0 }}>Somewhere along the way I started building websites for small businesses, some paid, some not. And then I started explaining the tools I use to anyone who'd watch.</p>
            <p style={{ margin: 0 }}>The three fit together better than they sound. Testing taught me what breaks. Building taught me what clients actually need. Content taught me to explain both in under sixty seconds.</p>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 16 }}>
          {cards.map((c, i) => (
            <Reveal key={c.title} delay={100 + i * 70}>
              <Card padding="lg" style={{ height: "100%" }}>
                <div style={{ color: "var(--accent)" }}><Icon name={c.icon} size={22} /></div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-subhead)", fontWeight: "var(--weight-semibold)", letterSpacing: "-0.015em", marginTop: 14 }}>{c.title}</div>
                <p style={{ margin: "8px 0 0", fontSize: "var(--text-small)", lineHeight: 1.6, color: "var(--text-muted)" }}>{c.body}</p>
              </Card>
            </Reveal>
          ))}
        </div>
      </div>
    </Section>
  );
}

function Services() {
  return (
    <Section id="services">
      <Reveal><SectionHeading eyebrow="What I do" title="Three things, done properly" lead="Pick one, or the combination. Most clients start with the first and end up with all three." /></Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(290px,1fr))", gap: 20, marginTop: "var(--space-7)" }}>
        {window.SITE.services.map((s, i) => (
          <Reveal key={s.title} delay={i * 90}>
            <Tilt max={5} style={{ height: "100%" }}>
              <Card interactive padding="lg" style={{ height: "100%", display: "flex", flexDirection: "column", gap: 14 }}>
                <div style={{ width: 44, height: 44, borderRadius: "var(--radius-md, 14px)", background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center" }}><Icon name={s.icon} size={22} /></div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-heading)", fontWeight: "var(--weight-semibold)", letterSpacing: "-0.015em" }}>{s.title}</div>
                <p style={{ margin: 0, fontSize: "var(--text-small)", lineHeight: 1.6, color: "var(--text-muted)" }}>{s.body}</p>
                <ul style={{ listStyle: "none", margin: "6px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 9 }}>
                  {s.points.map((p) => (
                    <li key={p} style={{ display: "flex", gap: 9, alignItems: "flex-start", fontSize: "var(--text-small)", color: "var(--text-secondary)" }}>
                      <span style={{ color: "var(--accent)", marginTop: 2, flex: "none" }}><Icon name="check" size={15} /></span>{p}
                    </li>
                  ))}
                </ul>
              </Card>
            </Tilt>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

Object.assign(window, { Section, Hero, Marquee, About, Services });