// Zeejay Lab homepage — surface recreation
const { useState: useS1 } = React;
const useIsMobile = window.useIsMobile;

function ZeejayHomeSurface({ goto }) {
  const isMobile = useIsMobile();
  const nav = [
    { label: "👋 About", to: "about" },
    { label: "🍅 PRS 3.0", to: "prs" },
    { label: "📖 Open Source Book", to: "book" },
    { label: "📦 Products", to: "products" },
    { label: "✉️ Contact", to: "contact" },
  ];
  const projects = [
    { title: "Pomodoro Reward System 3.0", tag: "Productivity OS", cta: "Get the OS", to: "prs",
      desc: "The ultimate productivity ecosystem. Automate your tracking, kill procrastination, and earn data-backed, guilt-free downtime.",
      img: "../../assets/prs-home-card-cover.png", bg: "#000" },
    { title: "Physical AI & Humanoid Robotics", tag: "Open Source", cta: "Read the Docs", to: "book",
      desc: "From software to physical execution. Dive into the mechanics of bridging code and hardware in this completely free, open-source guide.",
      img: "../../assets/physical-ai-book-cover.png", bg: "#0a0f1a" },
    { title: "Curated Products", tag: "Affiliate Picks", cta: "Browse Products", to: "products",
      desc: "Hand-picked gear, tools, and resources that power the Lab. Every item personally used and tested — affiliate links included.",
      img: "../../assets/amazon-curated-cover.png", bg: "#0a0f1a" },
  ];
  return (
    <main style={{ background: "var(--bg)", color: "var(--fg-1)", minHeight: "100vh" }}>
      <HeroBG>
        <Container pad="hero">
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "40% 60%", gap: 40, alignItems: "center", padding: isMobile ? "20px 0" : "40px 0" }}>
            <div style={{ display: "flex", justifyContent: "center", order: isMobile ? 1 : 0 }}>
              <FlipCard size={isMobile ? 300 : 340}
                front={<img src="../../assets/zeejaylab-logo-square.jpg" alt="Zeejay Lab" style={{ width: "100%", height: "100%", objectFit: "contain", mixBlendMode: "multiply", background: "#fff" }}/>}
                back={[
                  { emoji: "🤖", text: "Agentic AI & OpenClaw" },
                  { emoji: "⚡", text: "Claude Code + APIs" },
                  { emoji: "🔄", text: "Make / n8n Automation" },
                  { emoji: "🧠", text: "MCP Servers • Notion" },
                ].map(item => (
                  <div key={item.text}
                    style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 20px",
                      borderRadius: 14, fontSize: 16, fontWeight: 600, color: "var(--brand-primary)",
                      cursor: "default", transition: "all 300ms ease", letterSpacing: "-0.01em",
                      border: "1px solid transparent" }}
                    onMouseEnter={e => { e.currentTarget.style.background = "var(--brand-primary)"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.borderColor = "var(--brand-primary)"; e.currentTarget.style.transform = "scale(1.04)"; }}
                    onMouseLeave={e => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--brand-primary)"; e.currentTarget.style.borderColor = "transparent"; e.currentTarget.style.transform = "scale(1)"; }}
                  >
                    <span style={{ fontSize: 22 }}>{item.emoji}</span>
                    <span>{item.text}</span>
                  </div>
                ))}
              />
            </div>
            <div style={{ maxWidth: 620, textAlign: isMobile ? "center" : "left", display: "flex", flexDirection: "column", alignItems: isMobile ? "center" : "flex-start" }}>
              <h1 style={{ color: "var(--brand-primary)", fontWeight: 500, letterSpacing: "-0.06em", fontSize: isMobile ? 40 : 56, lineHeight: 1.05 }}>
                Engineering Intelligent Workflows<br/>
                <span style={{ color: "var(--fg-4)" }}>& Automated Systems.</span>
              </h1>
              <p style={{ color: "var(--fg-3)", fontSize: 18, lineHeight: 1.7, marginTop: 24, maxWidth: 540 }}>
                Bridging the gap between Agentic AI, high-performance code, and productivity.
                Whether you need custom OpenClaw integration or a zero-friction focus OS,
                Zeejay Lab builds solutions that execute.
              </p>
            </div>
          </div>
        </Container>
      </HeroBG>

      <Container pad="section">
        <Kicker>Selected Work</Kicker>
        <Hairline/>
        <h2 style={{ color: "var(--brand-primary)", fontWeight: 500, letterSpacing: "-0.05em", fontSize: isMobile ? 36 : 44 }}>Featured Projects</h2>
        <p style={{ color: "var(--fg-3)", fontSize: 17, lineHeight: 1.7, marginTop: 14, maxWidth: 620 }}>
          A focused set of systems, tools, and guides built for deep work, automation, and intelligent execution.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: 24, marginTop: 40 }}>
          {projects.map(p => (
            <FolioCard key={p.title} onClick={() => goto(p.to)}>
              <div style={{ borderRadius: 20, border: "1px solid var(--border)", background: p.bg, overflow: "hidden" }}>
                {p.img ? <img src={p.img} alt={p.title} style={{ width: "100%", height: "auto", display: "block" }}/>
                 : p.robot ? <div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "80px 0" }}><span style={{ color: "#94a3b8", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: 3 }}>HUMANOID · AI</span></div>
                 : <div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "80px 0" }}><span style={{ fontSize: 48 }}>📦</span></div>}
              </div>
              <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
                <Kicker>{p.tag}</Kicker>
                <h3 style={{ marginTop: 10, fontSize: 20, fontWeight: 500, letterSpacing: "-0.04em", color: "var(--brand-primary)" }}>{p.title}</h3>
                <p style={{ color: "var(--fg-3)", fontSize: 15, lineHeight: 1.65, marginTop: 10, flex: 1 }}>{p.desc}</p>
                <div style={{ marginTop: 20 }}>
                  <Button variant="outline" icon={<ArrowRight size={14}/>}>{p.cta}</Button>
                </div>
              </div>
            </FolioCard>
          ))}
        </div>
      </Container>

      <Container pad="section" innerStyle={isMobile ? {} : { paddingTop: 0 }}>
        <Kicker>About Me</Kicker>
        <Hairline/>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "40% 60%", gap: 48, alignItems: "center", marginTop: 16 }}>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <FlipCard size={isMobile ? 300 : 340}
              front={<img src="../../assets/zohaib.jpg" alt="Zohaib" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }}/>}
              back={
                <div style={{ padding: "8px", display: "flex", flexDirection: "column", height: "100%", justifyContent: "space-between" }}>
                  <div>
                    <p style={{ margin: 0, fontSize: 22, fontWeight: 500, letterSpacing: "-0.04em", color: "var(--brand-primary)", lineHeight: 1.1 }}>Zohaib Javed (Zeejay)</p>
                    <p style={{ margin: "8px 0 0 0", fontSize: 13, fontWeight: 500, color: "var(--fg-2)", letterSpacing: "-0.01em" }}>Lead AI &amp; Automation Engineer</p>
                    <p style={{ margin: "12px 0 0 0", fontSize: 13, color: "var(--fg-3)", lineHeight: 1.55 }}>Building autonomous ecosystems and zero-friction workflows.</p>
                  </div>
                  <div>
                    <p style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--fg-4)" }}>Core Stack</p>
                    <ul style={{ margin: "10px 0 0 0", padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 6 }}>
                      {[
                        "Agentic AI & OpenClaw",
                        "Make / n8n Automation",
                        "MCP Servers & OpenAI SDK",
                        "Next.js & Notion Systems",
                      ].map(s => (
                        <li key={s} style={{ fontSize: 13, color: "var(--fg-2)", display: "flex", gap: 8, alignItems: "baseline", lineHeight: 1.45 }}>
                          <span style={{ color: "var(--brand-primary)", fontWeight: 600 }}>•</span>
                          <span>{s}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              }
            />
          </div>
          <div style={{ maxWidth: 620 }}>
            <h2 style={{ color: "var(--brand-primary)", fontWeight: 500, letterSpacing: "-0.05em", fontSize: 40, lineHeight: 1.05 }}>Expertise</h2>
            <p style={{ color: "var(--fg-3)", fontSize: 17, lineHeight: 1.75, marginTop: 20, maxWidth: 540 }}>
              I build systems that sit at the intersection of agentic AI, productivity design,
              and automation. From idea to shipped product — I own the full stack: research,
              design, logic, and execution.
            </p>
            <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 24 }}>
              <div>
                <p style={{ fontSize: 13, fontWeight: 600, letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--brand-primary)" }}>How did you get started?</p>
                <p style={{ color: "var(--fg-3)", fontSize: 16, lineHeight: 1.75, marginTop: 10, maxWidth: 540 }}>
                  Started by solving my own focus problem. Built the Pomodoro Reward System to track where my time actually went, then refined it over 360+ days of daily use until it became a sellable product.
                </p>
              </div>
              <div>
                <p style={{ fontSize: 13, fontWeight: 600, letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--brand-primary)" }}>What drives the work?</p>
                <p style={{ color: "var(--fg-3)", fontSize: 16, lineHeight: 1.75, marginTop: 10, maxWidth: 540 }}>
                  I care about systems that work in real life — low friction, high output. Remove the noise and let the work speak.
                </p>
              </div>
            </div>
          </div>
        </div>
      </Container>

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