// Book / About / Products compact surfaces
function BookSurface({ goto }) {
  const isMobile = window.useIsMobile();
  const modules = [
    { n: "01", t: "ROS 2 — The Robotic Nervous System", d: "Master the middleware that connects all robot components. Learn nodes, topics, services, URDF, and Python-based robot control.", c: 13, w: "2-3 weeks", firstSlug: "what-is-ros2" },
    { n: "02", t: "Digital Twin — Gazebo & Unity", d: "Build virtual replicas of physical robots. Create physics-accurate simulations and photorealistic environments for testing.", c: 13, w: "2-3 weeks", firstSlug: "what-is-digital-twin" },
    { n: "03", t: "AI-Robot Brain — NVIDIA Isaac", d: "Implement GPU-accelerated perception with Isaac Sim, VSLAM, and Nav2 for intelligent navigation.", c: 13, w: "3-4 weeks", firstSlug: "isaac-sim-overview" },
    { n: "04", t: "Vision-Language-Action", d: "Create autonomous robots that respond to voice commands using LLMs, perceive their environment, and execute manipulation tasks.", c: 14, w: "3-4 weeks", firstSlug: "what-is-vla" },
  ];
  return (
    <main style={{ background: "var(--bg)", color: "var(--fg-1)", minHeight: "100vh" }}>
      <HeroBG>
        <Container pad="hero">
          <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingBottom: 20, borderBottom: "1px solid var(--border)" }}>
            <Button variant="outline" onClick={() => goto("home")} icon={null}>
              <ArrowLeft size={14}/> Back
            </Button>
          </header>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center", padding: "56px 0" }}>
            <div>
              <Kicker>Open Source Book</Kicker>
              <Hairline maxWidth={260}/>
              <h1 style={{ fontSize: 72, fontWeight: 500, letterSpacing: "-0.06em", color: "var(--brand-primary)", lineHeight: 1.05 }}>
                Physical AI &<br/><span style={{ color: "var(--fg-4)" }}>Humanoid Robotics.</span>
              </h1>
              <p style={{ marginTop: 20, color: "var(--fg-3)", fontSize: 18, lineHeight: 1.75, maxWidth: 540 }}>
                From software to physical execution. A complete guide covering ROS 2, digital twin simulation, NVIDIA Isaac, and Vision-Language-Action systems. Completely free and open-source.
              </p>
              <div style={{ marginTop: 28 }}>
                <Button size="lg" onClick={() => goto("book-reader", "intro")} icon={<ArrowRight size={16}/>}><Book size={16}/> Start Reading</Button>
              </div>
              <div style={{ marginTop: 28, display: "flex", gap: 36 }}>
                {[{n:"55",l:"Chapters"},{n:"4",l:"Modules"},{n:"10-14",l:"Weeks"}].map(s => (
                  <div key={s.l}><span style={{ display: "block", fontSize: 28, fontWeight: 500, color: "var(--brand-primary)", letterSpacing: "-0.04em" }}>{s.n}</span><span style={{ color: "var(--fg-3)", fontSize: 14 }}>{s.l}</span></div>
                ))}
              </div>
            </div>
            <div style={{ borderRadius: 24, border: "1px solid var(--border)", overflow: "hidden", background: "#0a0f1a" }}>
              <img src="../../assets/physical-ai-book-cover.png" alt="Physical AI & Humanoid Robotics"
                style={{ width: "100%", height: "auto", display: "block" }}/>
            </div>
          </div>
        </Container>
      </HeroBG>

      <Container pad="section">
        <SectionHead kicker="Curriculum" title="What You'll Learn" description="Four progressive modules that take you from ROS 2 fundamentals to building an autonomous humanoid robot that understands voice commands."/>
        <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: 24 }}>
          {modules.map(m => (
            <div key={m.n}
              onClick={() => goto("book-reader", m.firstSlug)}
              style={{ borderRadius: 20, border: "1px solid var(--border)", background: "#fff", padding: 28, position: "relative", cursor: "pointer", transition: "box-shadow 220ms ease, transform 220ms ease" }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = "0 8px 28px rgba(22,59,107,0.12)"; e.currentTarget.style.transform = "scale(1.012)"; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.transform = "scale(1)"; }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 12 }}>
                <span style={{ width: 40, height: 40, borderRadius: 14, background: "rgba(22,59,107,0.08)", color: "var(--brand-primary)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, fontSize: 13, flexShrink: 0 }}>{m.n}</span>
                <h3 style={{ margin: 0, fontSize: 18, fontWeight: 500, letterSpacing: "-0.02em", color: "var(--brand-primary)" }}>{m.t}</h3>
              </div>
              <p style={{ fontSize: 14, color: "var(--fg-3)", lineHeight: 1.6, marginBottom: 14 }}>{m.d}</p>
              <div style={{ fontSize: 12, color: "var(--fg-4)", display: "flex", gap: 10 }}>
                <span>{m.c} chapters</span><span>•</span><span>{m.w}</span>
              </div>
            </div>
          ))}
        </div>
      </Container>

      <Footer onNav={goto}/>
    </main>
  );
}
window.BookSurface = BookSurface;

function ProductsSurface({ goto }) {
  return (
    <main style={{ background: "var(--bg)", minHeight: "100vh", color: "var(--fg-1)" }}>
      <Container pad="hero">
        <div style={{ padding: "32px 0 32px" }}>
          <Hairline/>
          <h1 style={{ fontSize: 64, fontWeight: 500, letterSpacing: "-0.06em", color: "var(--brand-primary)", lineHeight: 1.05 }}>Products</h1>
          <p style={{ marginTop: 20, color: "var(--fg-3)", fontSize: 18, lineHeight: 1.75, maxWidth: 520 }}>
            Hand-picked tools, gear, and resources that power the Lab. Everything here is personally used and tested.
          </p>
        </div>
        <div style={{ paddingBottom: 96 }}>
          <img
            src="../../assets/amazon-curated-cover.png"
            alt="Amazon Curated Affiliate Products"
            style={{ width: "100%", borderRadius: 20, display: "block", marginBottom: 56 }}
          />
          <SectionHead
            kicker="Curated Products"
            title="Coming Soon"
            description="Product recommendations are being curated. Check back soon."
          />
          <div style={{ marginTop: 28 }}>
            <Button onClick={() => goto("home")} icon={<ArrowRight size={14}/>}>Back to Home</Button>
          </div>
        </div>
      </Container>
      <Footer onNav={goto}/>
    </main>
  );
}
window.ProductsSurface = ProductsSurface;

function AboutSurface({ goto }) {
  const isMobile = window.useIsMobile();
  return (
    <main style={{ background: "var(--bg)", minHeight: "100vh", color: "var(--fg-1)" }}>
      <nav style={{ position: "sticky", top: 0, zIndex: 10, background: "rgba(255,255,255,0.8)", backdropFilter: "blur(8px)", borderBottom: "1px solid var(--border)" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 32px", height: 64, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <a onClick={() => goto("home")} style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--brand-primary)", fontWeight: 600, cursor: "pointer", textDecoration: "none" }}>
            <ChevL size={18}/> Back to Home
          </a>
          {!isMobile && <span style={{ fontSize: 13, fontWeight: 500, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--fg-4)" }}>About Zeejay Lab</span>}
        </div>
      </nav>
      <div style={{ maxWidth: 900, margin: "0 auto", padding: isMobile ? "64px 24px 64px" : "128px 24px 96px" }}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 220px", gap: 40, alignItems: "center", marginBottom: 80, textAlign: isMobile ? "center" : "left" }}>
          <div style={{ order: isMobile ? 1 : 0 }}>
            <h1 style={{ fontSize: isMobile ? 40 : 56, fontWeight: 500, letterSpacing: "-0.04em", color: "var(--brand-primary)", lineHeight: 1.1 }}>
              Engineering at the intersection of <br/><span style={{ color: "var(--fg-4)" }}>AI and Human Focus.</span>
            </h1>
            <p style={{ marginTop: 28, fontSize: isMobile ? 18 : 20, color: "var(--fg-2)", lineHeight: 1.6, maxWidth: "100%" }}>
              I am <strong style={{ color: "var(--brand-primary)", fontWeight: 500 }}>Zohaib Javed</strong>, the founder of Zeejay Lab. I build low-friction automation systems, highly optimized workspaces, and experimental physical AI infrastructure.
            </p>
          </div>
          <div style={{ aspectRatio: 1, borderRadius: "50%", overflow: "hidden", border: "4px solid #fff", boxShadow: "0 14px 40px rgba(15,23,42,0.14)", transform: "rotate(3deg)", width: isMobile ? 200 : "100%", margin: isMobile ? "0 auto" : "0", order: isMobile ? 0 : 1 }}>
            <img src="../../assets/zohaib.jpg" alt="Zohaib" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }}/>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: 24, marginBottom: 24 }}>
          {[{t:"Product Design",x:"Designing interfaces that eliminate friction. Products should feel like a natural extension of your workflow."},
            {t:"Data Automation",x:"Connecting disconnected systems. Webhooks, custom APIs, and Make.com pipelines to eliminate manual data entry."},
            {t:"Agentic AI",x:"Deploying intelligent agents that understand context and execute tasks autonomously."}
          ].map(c => (
            <FolioCard key={c.t} style={{ padding: 0, background: "var(--bg-muted)", border: "1px solid var(--border)", borderRadius: 20, overflow: "hidden" }}>
              <div style={{ padding: 24 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
                  <div style={{ width: 40, height: 40, borderRadius: 9999, background: "rgba(22,59,107,0.1)", color: "var(--brand-primary)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    <Sparkles size={18}/>
                  </div>
                  <h3 style={{ margin: 0, fontSize: 17, fontWeight: 500, color: "var(--brand-primary)" }}>{c.t}</h3>
                </div>
                <p style={{ margin: 0, fontSize: 14, color: "var(--fg-3)", lineHeight: 1.65 }}>{c.x}</p>
              </div>
            </FolioCard>
          ))}
        </div>
        <div id="contact-cards" style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: 24, marginBottom: 96 }}>
          {[{t:"Email me",x:"zeejay.lab@gmail.com", href:"mailto:zeejay.lab@gmail.com", banner:"linear-gradient(135deg, #EA4335, #d63029)",
              icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6z" stroke="#EA4335" strokeWidth="1.5" fill="none"/><path d="M22 6l-10 7L2 6" stroke="#EA4335" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>},
            {t:"WhatsApp",x:"+923303169296", href:"https://wa.me/923303169296", banner:"linear-gradient(135deg, #25D366, #128C7E)",
              icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="#25D366"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>},
            {t:"LinkedIn",x:"linkedin.com/in/zohaib-javd", href:"https://www.linkedin.com/in/zohaib-javd/", banner:"linear-gradient(135deg, #0A66C2, #004182)",
              icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="#0A66C2"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>}
          ].map(c => (
            <FolioCard key={c.t} style={{ padding: 0, background: "var(--bg-muted)", border: "1px solid var(--border)", borderRadius: 20, overflow: "hidden" }}>
              <div style={{ background: c.banner, padding: "20px 24px", display: "flex", alignItems: "center", gap: 14 }}>
                <div style={{ width: 40, height: 40, borderRadius: 12, background: "rgba(255,255,255,0.95)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  {c.icon}
                </div>
                <h3 style={{ fontSize: 17, fontWeight: 600, color: "#fff", letterSpacing: "-0.01em" }}>{c.t}</h3>
              </div>
              <div style={{ padding: "20px 24px" }}>
                <a href={c.href} target={c.href.startsWith("http") ? "_blank" : "_self"} style={{ fontSize: 14, color: "var(--brand-primary)", lineHeight: 1.65, textDecoration: "none", wordBreak: "break-all", fontWeight: 500 }}>{c.x}</a>
              </div>
            </FolioCard>
          ))}
        </div>
      </div>
      <Footer onNav={goto}/>
    </main>
  );
}
window.AboutSurface = AboutSurface;