/* Kharaayo Home — 9 sections per index.md */
(function () {
  const { useEffect } = React;
  const { Navbar, Footer, Eyebrow, Tag, EngineDot, ArrowLink, GlassPill, CtaPill, Reveal, Placeholder, SectionHead, NumberBadge, FinalCTA } = window;
  const Icon = window.Icon, Logo = window.Logo;

  const ENGINES = [
    { key: "tech", title: "Tech", color: "var(--primary-color)", href: "tech-ai-native-mvp.html", icon: "cpu",
      desc: "AI-native engineering. From first-line MVPs to multi-agent systems running in production. Agentic AI, AI integration, fractional teams.", cta: "Explore Tech services" },
    { key: "studio", title: "Studio", color: "var(--accent-color)", href: "studio-brand-identity.html", icon: "palette",
      desc: "Brand and craft. Identity systems, product design, motion, and the creative engines that take great products to market.", cta: "Explore Studio services" },
    { key: "venture", title: "Ventures", color: "var(--brand-deep)", href: "ventures-build-with-us.html", icon: "bolt",
      desc: "Company-building. Incubator programs for founders, co-creation for corporates, and the studios behind our own products.", cta: "Explore Ventures" },
  ];

  const WHY = [
    { n: "01", t: "AI-Native, Not AI-Bolted-On", d: "We build for the agentic era from day one. Multi-agent orchestration, MCP-protocol systems, governed RAG, function calling — these are our defaults, not our specialties." },
    { n: "02", t: "Venture-Grade, Not Service-Grade", d: "Our own products run on the same architecture we ship to clients. Production-ready code, owned IP, no shortcuts, no AI-shop theater." },
    { n: "03", t: "Built for International Teams", d: "Remote-first, async by default, English-fluent. We work US, EU, Japan, and Australia hours when the project calls for it." },
    { n: "04", t: "Fair Price, Real Quality", d: "World-class engineering without the off-shore quality tax. Transparent rates, transparent scope, no surprises." },
  ];

  const STEPS = [
    { n: "01", t: "Discover", d: "We listen first. A short, focused conversation to understand the problem, the constraints, and the outcome you actually need." },
    { n: "02", t: "Scope", d: "A written proposal with honest pricing, honest timelines, and the team that will do the work. No bait-and-switch." },
    { n: "03", t: "Build", d: "Two-week sprints with weekly demos. You see the work as it forms. Changes happen early and cheaply, not late and expensively." },
    { n: "04", t: "Ship & Support", d: "Production deployment, full documentation, and a clear handoff. Optional ongoing partnership if you want us to keep building with you." },
  ];

  function Hero() {
    return (
      <section style={{ position: "relative", minHeight: "92vh", display: "flex", alignItems: "center", overflow: "hidden", marginTop: -68, paddingTop: 68 }}>
        <video autoPlay muted loop playsInline poster="assets/hero-video-poster.webp"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", zIndex: 0 }}>
          <source src="assets/hero-video.webm" type="video/webm" />
        </video>
        {/* protection veils */}
        <div style={{ position: "absolute", inset: 0, zIndex: 1, background: "linear-gradient(180deg, rgba(8,8,10,.72) 0%, rgba(8,8,10,.55) 45%, rgba(8,8,10,.82) 100%)" }}></div>
        <div style={{ position: "absolute", inset: 0, zIndex: 1, background: "radial-gradient(120% 90% at 15% 30%, color-mix(in srgb, var(--accent-color) 26%, transparent) 0%, transparent 55%)" }}></div>
        <div className="k-wrap" style={{ position: "relative", zIndex: 2, width: "100%" }}>
          <div style={{ maxWidth: 920 }}>
            <Reveal now>
              <span className="k-eyebrow" style={{ color: "#fff", letterSpacing: ".12em", opacity: .92 }}>Venture Studio · Built in Nepal · Serving the world</span>
            </Reveal>
            <Reveal now delay={80}>
              <h1 style={{ color: "#fff", margin: "22px 0 0", fontSize: "clamp(52px, 9vw, 132px)", lineHeight: .92 }}>We build<br />what we sell.</h1>
            </Reveal>
            <Reveal now delay={160}>
              <p style={{ color: "rgba(255,255,255,.88)", fontSize: "clamp(18px, 2.2vw, 23px)", lineHeight: 1.5, margin: "30px 0 0", maxWidth: 620 }}>
                Kharaayo is a venture studio. We ship our own AI-native products, then bring the same team — the same speed, the same craft — to yours.
              </p>
            </Reveal>
            <Reveal now delay={240}>
              <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 40 }}>
                <a className="k-glass-pill" href="contact.html" style={{ fontSize: 16 }}>
                  <span className="label">Get in Touch</span>
                  <span className="circ" style={{ background: "var(--primary-color)" }}><Icon name="plus" /></span>
                </a>
                <a className="k-glass-pill" href="#" onClick={window.kWhatsApp} style={{ fontSize: 16 }}>
                  <span className="label">WhatsApp</span>
                  <span className="circ" style={{ background: "var(--whatsapp)" }}><Icon name="whatsapp" /></span>
                </a>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    );
  }

  function EngineCard({ e }) {
    return (
      <Reveal as="a" className="k-card hover link" href={e.href} style={{ padding: 32, display: "flex", flexDirection: "column", gap: 18, minHeight: 280 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ display: "grid", placeItems: "center", width: 52, height: 52, borderRadius: 14, background: "color-mix(in srgb, " + e.color + " 14%, transparent)", color: e.color }}>
            <Icon name={e.icon} size={26} />
          </span>
          <span style={{ width: 10, height: 10, borderRadius: 9999, background: e.color }}></span>
        </div>
        <h3 style={{ margin: 0, fontSize: 30 }}>{e.title}</h3>
        <p style={{ margin: 0, color: "var(--foreground-muted)", lineHeight: 1.55, flex: 1 }}>{e.desc}</p>
        <span className="k-arrow-link" style={{ color: e.color }}>{e.cta}<Icon name="arrowRight" /></span>
      </Reveal>
    );
  }

  function Home() {
    useEffect(() => { window.kInitReveal && window.kInitReveal(); }, []);
    return (
      <React.Fragment>
        <Navbar active="home" transparentOnTop />
        <main>
          <Hero />

          {/* 2 — Three Engines */}
          <section className="k-section">
            <div className="k-wrap">
              <SectionHead eyebrow="What We Do" accent title="Three engines. One studio."
                intro="Tech ships the product. Studio shapes the brand. Ventures builds the company. Three independent forces, one compounding loop — where every venture we build makes the next one stronger." />
              <div className="k-grid-3" style={{ marginTop: 48 }}>
                {ENGINES.map(e => <EngineCard key={e.key} e={e} />)}
              </div>
            </div>
          </section>

          {/* 3 — Why Kharaayo */}
          <section className="k-section" style={{ background: "var(--background-soft)" }}>
            <div className="k-wrap">
              <SectionHead eyebrow="Why Kharaayo" accent title="Built for the agentic era. Built to ship."
                intro="Most studios sell hours. We ship products — our own and yours. Here’s what that means in practice." />
              <div className="k-grid-2" style={{ marginTop: 48 }}>
                {WHY.map(w => (
                  <Reveal key={w.n} className="k-card" style={{ padding: 36 }}>
                    <NumberBadge n={w.n} color="color-mix(in srgb, var(--accent-color) 65%, transparent)" />
                    <h3 style={{ margin: "16px 0 10px", fontSize: 24 }}>{w.t}</h3>
                    <p style={{ margin: 0, color: "var(--foreground-muted)", lineHeight: 1.6 }}>{w.d}</p>
                  </Reveal>
                ))}
              </div>
            </div>
          </section>

          {/* 4 — Featured Work */}
          <section className="k-section">
            <div className="k-wrap">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
                <SectionHead eyebrow="Featured Work" accent title="The proof is in the shipping."
                  intro="A selection of products, brands, and ventures we’ve built — for clients and for ourselves." />
                <ArrowLink href="showcase.html">See all work</ArrowLink>
              </div>
              <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 24 }} className="k-feat-grid">
                {/* large feature */}
                <Reveal className="k-card link" href="showcase-proleap.html" as="a" style={{ overflow: "hidden", display: "flex", flexDirection: "column" }}>
                  <Placeholder note="[PLACEHOLDER — top featured case study visual]" style={{ minHeight: 340, borderRadius: 0, border: "none", flex: 1 }} />
                  <div style={{ padding: 28 }}>
                    <Tag kind="venture">Venture</Tag>
                    <h3 style={{ margin: "14px 0 8px", fontSize: 26 }}>ProLeap</h3>
                    <p style={{ margin: 0, color: "var(--foreground-muted)" }}>The education &amp; talent platform we built inside Kharaayo — brand, product, and engineering, end to end.</p>
                  </div>
                </Reveal>
                {/* supporting */}
                <div style={{ display: "grid", gap: 24 }}>
                  {[{ k: "tech", label: "Tech" }, { k: "studio", label: "Studio" }].map((c, i) => (
                    <Reveal key={i} delay={i * 80} className="k-card" style={{ overflow: "hidden", display: "flex", flexDirection: "column" }}>
                      <Placeholder note={"[PLACEHOLDER — " + c.label + " case study visual]"} style={{ minHeight: 150, borderRadius: 0, border: "none", flex: 1 }} />
                      <div style={{ padding: 22 }}>
                        <Tag kind={c.k}>{c.label}</Tag>
                        <h3 style={{ margin: "12px 0 6px", fontSize: 20, color: "var(--foreground-soft)" }}>[PLACEHOLDER — project name]</h3>
                        <p style={{ margin: 0, color: "var(--foreground-muted)", fontSize: 14.5 }}>[PLACEHOLDER — one-line description + optional outcome]</p>
                      </div>
                    </Reveal>
                  ))}
                </div>
              </div>
              <p style={{ marginTop: 22, fontSize: 14, color: "var(--foreground-soft)" }}>
                Featured projects are placeholders — real case studies (top 3–4) drop in once visuals and client approval exist.
              </p>
            </div>
          </section>

          {/* 5 — Our Own Ventures (fixed dark spotlight band, both themes) */}
          <section className="k-section" style={{ background: "#0c0c0e", color: "#fff" }}>
            <div className="k-wrap">
              <Reveal>
                <span className="k-eyebrow" style={{ color: "var(--brand)" }}>Our Own Ventures</span>
                <h2 style={{ margin: "16px 0 0", color: "#fff", maxWidth: 720 }}>We don’t just build for clients. We build companies.</h2>
                <p className="k-lead" style={{ margin: "20px 0 0", maxWidth: 640, color: "rgba(255,255,255,.72)" }}>
                  Kharaayo runs its own product ventures. The same teams, tools, and standards we use for our own bets are what we bring to yours.
                </p>
              </Reveal>
              <div className="k-grid-3" style={{ marginTop: 48 }}>
                {window.VENTURES.map((v, i) => (
                  <Reveal key={v.name} delay={i * 80} as={v.ready ? "a" : "div"} href={v.ready ? v.href : undefined}
                    style={{ display: "block", textDecoration: "none", color: "inherit", borderRadius: "var(--radius-card)", overflow: "hidden",
                             background: "rgba(255,255,255,.05)", border: "1px solid rgba(255,255,255,.12)" }}>
                    <div style={{ position: "relative" }}>
                      <Placeholder note={"[PLACEHOLDER — " + v.name + " product visual]"} style={{ minHeight: 170, borderRadius: 0, border: "none", background: "rgba(255,255,255,.04)", color: "rgba(255,255,255,.5)" }} />
                      <span style={{ position: "absolute", top: 14, left: 14, display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 11px", borderRadius: 9999, background: "var(--brand-deep)", color: "#fff", fontSize: 11.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".05em" }}>
                        <span style={{ width: 6, height: 6, borderRadius: 9999, background: "var(--brand)" }}></span>Kharaayo Venture
                      </span>
                    </div>
                    <div style={{ padding: 26 }}>
                      <h3 style={{ margin: "0 0 10px", fontSize: 24, color: "#fff" }}>{v.name}</h3>
                      <p style={{ margin: "0 0 16px", color: v.ready ? "rgba(255,255,255,.7)" : "rgba(255,255,255,.5)", lineHeight: 1.55, fontSize: 15 }}>{v.desc}</p>
                      <span className="k-arrow-link" style={{ color: "var(--brand)" }}>Read the story<Icon name="arrowRight" /></span>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
          </section>

          {/* 6 — How We Work */}
          <section className="k-section">
            <div className="k-wrap">
              <SectionHead eyebrow="How We Work" accent title="A clear process. No surprises."
                intro="Every engagement follows the same disciplined arc. Honest scoping. Predictable delivery. Real handoff." />
              <div className="k-steps" style={{ marginTop: 52, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28 }}>
                {STEPS.map((s, i) => (
                  <Reveal key={s.n} delay={i * 70} style={{ position: "relative" }}>
                    {i < 3 && <span className="k-step-conn" style={{ position: "absolute", top: 26, left: "calc(100% - 14px)", width: 28, height: 2, background: "color-mix(in srgb, var(--foreground) 16%, transparent)" }}></span>}
                    <span style={{ fontFamily: "var(--font-display)", fontSize: 56, lineHeight: 1, color: "color-mix(in srgb, var(--accent-color) 22%, transparent)", letterSpacing: "-.02em" }}>{s.n}</span>
                    <h3 style={{ margin: "16px 0 10px", fontSize: 22 }}>{s.t}</h3>
                    <p style={{ margin: 0, color: "var(--foreground-muted)", lineHeight: 1.6, fontSize: 15.5 }}>{s.d}</p>
                  </Reveal>
                ))}
              </div>
            </div>
          </section>

          {/* 7 — From the Blog */}
          <section className="k-section" style={{ background: "var(--background-soft)" }}>
            <div className="k-wrap">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
                <SectionHead eyebrow="From the Blog" accent title="Thinking out loud." intro="What we’re building, learning, and arguing about." />
                <ArrowLink href="blog.html">Read all posts</ArrowLink>
              </div>
              <div className="k-grid-3" style={{ marginTop: 48 }}>
                {window.BLOG_POSTS.slice(0, 3).map((p, i) => (
                  <Reveal key={p.slug} delay={i * 70} as="a" href={p.sample ? "blog-post.html" : "blog.html"} className="k-card hover link" style={{ overflow: "hidden", display: "flex", flexDirection: "column" }}>
                    <Placeholder note={"[PLACEHOLDER — featured image]"} style={{ minHeight: 160, borderRadius: 0, border: "none", flex: "0 0 auto" }} />
                    <div style={{ padding: 24, display: "flex", flexDirection: "column", flex: 1 }}>
                      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
                        <Tag kind={p.cat === "tech" ? "tech" : p.cat === "studio" ? "studio" : "venture"}>{p.cat}</Tag>
                        <span style={{ fontSize: 13, color: "var(--foreground-soft)" }}>{p.date}</span>
                      </div>
                      <h3 style={{ margin: "0 0 10px", fontSize: 19, lineHeight: 1.3 }}>{p.title}</h3>
                      <p style={{ margin: "0 0 16px", color: "var(--foreground-muted)", fontSize: 14.5, lineHeight: 1.55, flex: 1 }}>{p.excerpt}</p>
                      <span className="k-arrow-link" style={{ fontSize: 14.5 }}>Read more<Icon name="arrowRight" /></span>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
          </section>

          {/* 8 — What People Say (hidden until real testimonials per spec) */}
          {/* Section intentionally omitted: no real testimonials available at this build (index.md §8). */}

        </main>
        {/* 9 — Final CTA */}
        <FinalCTA headline="Let’s build something worth shipping." sub="Drop us a message. We respond within one business day." />
        <Footer />
      </React.Fragment>
    );
  }
  window.HomePage = Home;
})();