const DS3 = window.LakshayKumarDesignSystem_3ad00d;
const { Button: B3, Card: C3, Icon: I3, Tag: T3, SectionHeading: SH3, TimelineItem, Quote, FormField, Input, Textarea, SiteFooter } = DS3;

function Journey() {
  const S = window.SITE;
  return (
    <Section id="journey">
      <Reveal><SH3 eyebrow="2021 — now" title="How I got here" lead="Five roles at HCLTech, a degree taken alongside them, and a side practice that turned into client work." /></Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.6fr) minmax(0,1fr)", gap: "var(--space-8)", marginTop: "var(--space-7)", alignItems: "start" }} className="two-col">
        <div>
          {S.timeline.map((t, i) => (
            <Reveal key={t.role} delay={i * 70}>
              <TimelineItem {...t} last={i === S.timeline.length - 1} />
            </Reveal>
          ))}
        </div>
        <Reveal delay={100}>
          <C3 padding="lg">
            <div style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-meta)", letterSpacing: "var(--text-meta-ls)", textTransform: "uppercase", color: "var(--accent)" }}>Certifications</div>
            <ul style={{ listStyle: "none", margin: "20px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 16 }}>
              {S.certifications.map(([n, d]) => (
                <li key={n} style={{ display: "grid", gap: 3 }}>
                  <span style={{ fontSize: "var(--text-small)", color: "var(--text)", fontWeight: "var(--weight-medium)" }}>{n}</span>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-meta)", letterSpacing: "var(--text-meta-ls)", textTransform: "uppercase", color: "var(--text-faint)" }}>{d}</span>
                </li>
              ))}
            </ul>
          </C3>
        </Reveal>
      </div>
    </Section>
  );
}

function Learning() {
  return (
    <Section id="learning" tone="subtle">
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,.8fr) minmax(0,1.2fr)", gap: "var(--space-8)", alignItems: "start" }} className="two-col">
        <Reveal><SH3 eyebrow="Right now" title="Currently learning" /></Reveal>
        <Reveal delay={80}>
          <div style={{ display: "grid", gap: 14 }}>
            {window.SITE.learning.map(([k, v]) => (
              <div key={k} style={{ display: "grid", gridTemplateColumns: "92px 1fr", gap: 16, alignItems: "baseline", paddingBottom: 14, borderBottom: "1px solid var(--border-subtle)" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-meta)", letterSpacing: "var(--text-meta-ls)", textTransform: "uppercase", color: "var(--text-faint)" }}>{k}</span>
                <span style={{ fontSize: "var(--text-body)", lineHeight: 1.55, color: "var(--text-secondary)" }}>{v}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

function Blog() {
  return (
    <Section id="blog">
      <Reveal><SH3 eyebrow="Writing" title="Notes, soon" lead="Longer versions of what I post as video: automation frameworks, WordPress performance, and the AI tools that survived my testing." /></Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(280px,1fr))", gap: 20, marginTop: "var(--space-7)" }}>
        {[["Automation", "Why my Playwright suite runs in a third of the time"], ["WordPress", "Core Web Vitals on a shared host, honestly"], ["AI", "The three AI tools I still open every week"]].map(([cat, title], i) => (
          <Reveal key={title} delay={i * 80}>
            <div style={{ border: "1px dashed var(--border-strong)", borderRadius: "var(--radius-lg)", padding: "var(--card-pad-lg, 28px)", height: "100%", display: "flex", flexDirection: "column", gap: 12 }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-meta)", letterSpacing: "var(--text-meta-ls)", textTransform: "uppercase", color: "var(--accent)" }}>{cat}</span>
              <span style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-heading)", fontWeight: "var(--weight-semibold)", letterSpacing: "-0.015em", lineHeight: 1.25, color: "var(--text-faint)" }}>{title}</span>
              <span style={{ marginTop: "auto", fontSize: "var(--text-caption)", color: "var(--text-faint)" }}>Draft in progress</span>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function Contact() {
  const S = window.SITE;
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    const f = new FormData(e.target);
    window.location.href = `mailto:${S.email}?subject=${encodeURIComponent("Project enquiry — " + (f.get("name") || ""))}&body=${encodeURIComponent(f.get("message") || "")}`;
    setSent(true);
  };
  return (
    <Section id="contact" tone="subtle">
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: "var(--space-8)", alignItems: "start" }} className="two-col">
        <Reveal>
          <div>
            <SH3 eyebrow="Contact" title="Say hi" lead="A website, a broken test suite, a content collaboration, or nothing in particular. I reply to everything within 24 hours." />
            <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: "var(--space-6)" }}>
              <B3 size="lg" href={`mailto:${S.email}`} icon="mail">{S.email}</B3>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <B3 variant="secondary" href={S.linkedin} iconRight="arrow-up-right">LinkedIn</B3>
                <B3 variant="secondary" href={S.instagram} iconRight="arrow-up-right">Instagram</B3>
                <B3 variant="ghost" href="uploads/resume-1786045404624.pdf" icon="download" download>Résumé</B3>
              </div>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 9, marginTop: "var(--space-6)", fontSize: "var(--text-caption)", color: "var(--text-muted)" }}>
              <span className="live-dot"></span>Based in India, working with clients worldwide
            </div>
          </div>
        </Reveal>
        <Reveal delay={100}>
          <C3 padding="lg">
            <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <FormField label="Your name" htmlFor="cf-name" required><Input id="cf-name" name="name" placeholder="Arjun Mehta" required /></FormField>
              <FormField label="Email" htmlFor="cf-email" required><Input id="cf-email" name="email" type="email" placeholder="you@company.com" required /></FormField>
              <FormField label="What do you need?" htmlFor="cf-msg" hint="A rough idea is enough."><Textarea id="cf-msg" name="message" rows={5} placeholder="We need a faster site before our next campaign." /></FormField>
              <B3 type="submit" size="lg" fullWidth iconRight="arrow-up-right">Send it</B3>
              {sent ? <div style={{ fontSize: "var(--text-caption)", color: "var(--success)" }}>Your mail client should be opening. If not, write to {S.email}.</div> : null}
            </form>
          </C3>
        </Reveal>
      </div>
    </Section>
  );
}

function Footer() {
  const S = window.SITE;
  return (
    <SiteFooter
      name={S.name}
      note="AI creator, WordPress developer and automation engineer. India, available worldwide."
      socials={[
        { icon: "instagram", label: "Instagram", onClick: () => window.open(S.instagram, "_blank") },
        { icon: "linkedin", label: "LinkedIn", onClick: () => window.open(S.linkedin, "_blank") },
        { icon: "mail", label: "Email", onClick: () => { window.location.href = "mailto:" + S.email; } }
      ]}
      columns={[
        { title: "Site", items: [{ label: "Work", href: "#work" }, { label: "Content", href: "#content" }, { label: "Skills", href: "#skills" }, { label: "Contact", href: "#contact" }] },
        { title: "Work", items: [{ label: "MSExpress", href: "https://msexpress.com.au" }, { label: "Flosse", href: "https://flosse.in" }, { label: "Nirogi Healthcare", href: "https://nirogihealthcare.in" }, { label: "AQube India", href: "https://aqubeindia.com" }] }
      ]}
    />
  );
}

Object.assign(window, { Journey, Learning, Blog, Contact, Footer });