import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import logo from "@/assets/kapfoundry-logo.png";
import logoFull from "@/assets/kapfoundry-logo-full.png";
import heroBg from "@/assets/hero-bg.jpg";
import vLogistics from "@/assets/vertical-logistics.jpg";
import vRetail from "@/assets/vertical-retail.jpg";
import vFintech from "@/assets/vertical-fintech.jpg";
import vAgri from "@/assets/vertical-agri.jpg";
import vFoodtech from "@/assets/vertical-foodtech.jpg";
import vCarbon from "@/assets/vertical-carbon.jpg";
import vHealthtech from "@/assets/vertical-healthtech.jpg";

export const Route = createFileRoute("/")({
  component: Home,
});

const NAV = [
  { label: "Studio", href: "#studio" },
  { label: "Framework", href: "#framework" },
  { label: "Portfolio", href: "#portfolio" },
  { label: "AI", href: "#ai" },
  { label: "Investors", href: "#investors" },
  { label: "Contact", href: "#contact" },
];

const VERTICALS = [
  {
    n: "01",
    name: "Logistics Technology",
    tag: "Fragmented · Expensive · Inefficient",
    img: vLogistics,
    problem: [
      "Last-mile delivery",
      "Fleet optimization",
      "Air cargo coordination",
      "Route planning",
      "Warehouse visibility",
      "Freight pricing and supply-chain transparency",
    ],
    solution: [
      "Route optimization",
      "Real-time fleet intelligence",
      "Air cargo platforms",
      "Warehouse automation and delivery intelligence",
      "Predictive logistics",
      "Carbon-aware route planning",
    ],
    example: "DoorMile Wings. An AI-powered domestic air cargo and express logistics network.",
  },
  {
    n: "02",
    name: "Retail Technology",
    tag: "Help merchants compete",
    img: vRetail,
    problem: [
      "Poor loyalty programs",
      "Lack of customer insights",
      "No digital engagement",
      "Ineffective promotions",
      "Limited analytics",
    ],
    solution: [
      "Customer loyalty and rewards platforms",
      "AI marketing",
      "Consumer and merchant analytics",
      "Store performance analytics",
      "Digital commerce",
    ],
    example: "Loyaly.ai. An AI loyalty and engagement platform for independent merchants.",
  },
  {
    n: "03",
    name: "Financial Technology",
    tag: "Millions underserved",
    img: vFintech,
    problem: [
      "Lending access",
      "Payments",
      "Credit visibility",
      "Collections",
      "Merchant financing",
    ],
    solution: [
      "Embedded finance",
      "Lending infrastructure and merchant credit",
      "Payment platforms",
      "Expense intelligence and financial automation",
      "Risk analytics",
    ],
  },
  {
    n: "04",
    name: "Agriculture Technology",
    tag: "Connect farms to markets",
    img: vAgri,
    problem: [
      "Low productivity",
      "Market inefficiencies",
      "Price uncertainty",
      "Limited technology adoption",
      "Climate risks",
    ],
    solution: [
      "Precision farming",
      "AI crop monitoring",
      "Marketplace platforms",
      "Supply-chain digitization",
      "Yield prediction and farm analytics",
    ],
  },
  {
    n: "05",
    name: "FoodTech",
    tag: "Powering the future of food",
    img: vFoodtech,
    problem: [
      "Customer retention",
      "Food waste",
      "Inventory management",
      "Delivery inefficiencies",
      "Demand forecasting",
    ],
    solution: [
      "Smart POS",
      "AI kitchen analytics",
      "Restaurant CRM and customer rewards",
      "Food-delivery optimization",
      "Inventory intelligence",
    ],
  },
  {
    n: "06",
    name: "Carbon Technology",
    tag: "Sustainability, made measurable",
    img: vCarbon,
    problem: [
      "Accurate emission measurement",
      "Meeting sustainability goals",
      "Regulatory reporting",
      "Green supply-chain visibility",
      "Reliable ESG tooling",
    ],
    solution: [
      "Carbon accounting",
      "ESG platforms",
      "Emission monitoring",
      "Carbon credit marketplaces",
      "Sustainability dashboards",
      "Green supply-chain intelligence",
    ],
  },
  {
    n: "07",
    name: "HealthTech",
    tag: "Care that reaches everyone",
    img: vHealthtech,
    problem: [
      "Access to quality care",
      "Fragmented patient records",
      "Rising treatment costs",
      "Clinic and hospital efficiency",
      "Preventive health at scale",
    ],
    solution: [
      "Digital health platforms",
      "AI diagnostics and triage",
      "Clinic operations software",
      "Remote care and telemedicine",
      "Health data intelligence",
      "Patient engagement tools",
    ],
  },
];

const FRAMEWORK = [
  { n: "01", title: "Discover", body: "Identify billion-dollar industry problems." },
  { n: "02", title: "Validate", body: "Customer interviews, market research, prototype testing." },
  { n: "03", title: "Build", body: "Scalable products on AI-first architecture." },
  { n: "04", title: "Launch", body: "Acquire customers and reach product-market fit." },
  { n: "05", title: "Scale", body: "Expand nationally and internationally." },
  { n: "06", title: "Spin-Off", body: "Grow into independent portfolio companies." },
];

const STACK = [
  "AI and Engineering",
  "Product Design",
  "Cloud Infrastructure",
  "Legal and Compliance",
  "Finance",
  "Marketing",
  "Sales Enablement",
  "Growth Teams",
  "Data Science",
  "Corporate Governance",
];

const AI_CAPS = [
  "Computer Vision",
  "Agentic AI",
  "Enterprise AI",
  "Predictive Analytics",
  "LLM Applications",
  "AI Automation",
  "Multi-Agent Systems",
  "Decision Intelligence",
];

const INVESTOR_REASONS = [
  "Diversified technology portfolio",
  "Reduced single-company risk",
  "AI-first businesses",
  "Experienced venture-building team",
  "Multiple growth opportunities",
  "Shared engineering and operations",
  "Long-term enterprise value",
  "Repeatable creation framework",
];

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 20);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <header
      className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${
        scrolled
          ? "bg-background/85 backdrop-blur-md border-b border-border"
          : "bg-transparent"
      }`}
    >
      <div className="container-x flex h-16 items-center justify-between">
        <a href="#top" className="flex items-center">
          <img src={logo} alt="KapFoundry" className="h-12 w-auto object-contain" />
        </a>
        <nav className="hidden md:flex items-center gap-8">
          {NAV.map((n) => (
            <a
              key={n.href}
              href={n.href}
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              {n.label}
            </a>
          ))}
        </nav>
        <a
          href="#investors"
          className="hidden md:inline-flex items-center gap-2 rounded-full border border-primary/40 bg-primary/10 px-4 py-2 text-xs font-medium tracking-wider uppercase text-primary hover:bg-primary hover:text-primary-foreground transition-colors"
        >
          Invest with us
        </a>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section id="top" className="relative min-h-[100svh] flex items-end overflow-hidden">
      <img
        src={heroBg}
        alt=""
        aria-hidden
        className="absolute inset-0 h-full w-full object-cover opacity-70"
      />
      <div className="absolute inset-0 bg-gradient-to-b from-ink/70 via-ink/60 to-background" />
      <div className="absolute inset-0 grid-lines opacity-40" />

      <div className="container-x relative pb-20 md:pb-28 pt-32 w-full">
        <div className="grid md:grid-cols-12 gap-10 items-end">
          <div className="md:col-span-8">
            <div className="flex items-center gap-3 mb-8">
              <span className="hairline" />
              <span className="eyebrow">Venture Studio · Hyderabad, India</span>
            </div>
            <h1 className="font-display font-normal text-5xl sm:text-6xl md:text-7xl lg:text-8xl leading-[0.95] tracking-tight">
              Build Bold.<br />
              <span className="italic text-primary/90">Build the Future.</span>
            </h1>
            <p className="mt-8 max-w-2xl text-lg md:text-xl text-muted-foreground leading-relaxed">
              A venture studio and technology holding company that engineers
              category-defining, AI-first companies, before they even exist.
            </p>
            <div className="mt-10 flex flex-wrap gap-4">
              <a
                href="#investors"
                className="inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition"
              >
                For Investors
                <span aria-hidden>→</span>
              </a>
              <a
                href="#portfolio"
                className="inline-flex items-center gap-2 rounded-full border border-border px-6 py-3 text-sm font-medium text-foreground hover:bg-accent transition"
              >
                Explore the portfolio
              </a>
            </div>
          </div>

          <div className="md:col-span-4 hidden md:block">
            <div className="rounded-2xl bg-cream p-6 shadow-2xl">
              <img src={logoFull} alt="KapFoundry logo" className="w-full h-auto" />
            </div>
          </div>
        </div>

        <div className="mt-16 pt-8 border-t border-border/50 flex flex-wrap items-center justify-between gap-4">
          <p className="text-sm text-muted-foreground italic">
            We don't wait for the future. We build it.
          </p>
          <div className="flex items-center gap-6 text-xs uppercase tracking-[0.2em] text-muted-foreground">
            <span>Logistics</span>
            <span>Retail</span>
            <span>Fintech</span>
            <span className="hidden sm:inline">Agritech</span>
            <span className="hidden sm:inline">FoodTech</span>
            <span className="hidden sm:inline">Carbon</span>
            <span className="hidden sm:inline">HealthTech</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionHeader({
  eyebrow,
  title,
  children,
}: {
  eyebrow: string;
  title: React.ReactNode;
  children?: React.ReactNode;
}) {
  return (
    <div className="max-w-3xl">
      <div className="flex items-center gap-3 mb-6">
        <span className="hairline" />
        <span className="eyebrow">{eyebrow}</span>
      </div>
      <h2 className="font-display text-4xl md:text-5xl lg:text-6xl leading-[1.02] tracking-tight">
        {title}
      </h2>
      {children ? <div className="mt-6 text-lg text-muted-foreground">{children}</div> : null}
    </div>
  );
}

function WhoWeAre() {
  return (
    <section id="studio" className="py-24 md:py-36 relative">
      <div className="container-x">
        <SectionHeader
          eyebrow="Who We Are"
          title={
            <>
              A venture studio and{" "}
              <span className="italic text-primary/90">technology holding company.</span>
            </>
          }
        >
          <p>
            We identify large-scale industry problems, validate market opportunities,
            create technology-first companies, and scale them into category leaders,
            designed as a portfolio, not a single startup.
          </p>
        </SectionHeader>

        <div className="mt-16 grid md:grid-cols-3 gap-6">
          {[
            {
              t: "Venture Studio",
              d: "Companies are systematically created, validated and scaled on shared infrastructure, not simply funded after formation.",
            },
            {
              t: "Holding Company",
              d: "Every venture strengthens the ecosystem while remaining capable of becoming an independent, high-growth business.",
            },
            {
              t: "Built to Compound",
              d: "Build faster, reduce risk, and maximize long-term value with one shared engine behind many companies.",
            },
          ].map((c) => (
            <div
              key={c.t}
              className="group relative rounded-xl border border-border bg-card p-8 hover:border-primary/50 transition"
            >
              <div className="font-mono text-xs text-primary mb-4">{c.t}</div>
              <h3 className="font-display text-2xl mb-4">{c.t}</h3>
              <p className="text-muted-foreground leading-relaxed">{c.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function VisionMission() {
  return (
    <section className="py-24 md:py-36 bg-ink relative overflow-hidden">
      <div className="absolute inset-0 grid-lines opacity-30" />
      <div className="container-x relative grid md:grid-cols-12 gap-12">
        <div className="md:col-span-7">
          <div className="flex items-center gap-3 mb-6">
            <span className="hairline" />
            <span className="eyebrow">Vision</span>
          </div>
          <p className="font-display text-3xl md:text-5xl leading-[1.1] tracking-tight">
            To become India's most{" "}
            <span className="italic text-primary/90">influential venture studio</span>, building
            category-defining companies that solve real-world problems for billions.
          </p>
          <p className="mt-10 max-w-xl text-muted-foreground text-lg leading-relaxed">
            The next generation of global companies will not emerge by chance. They will be
            engineered through research, technology, and repeatable company-building.
          </p>
        </div>
        <div className="md:col-span-5">
          <div className="flex items-center gap-3 mb-6">
            <span className="hairline" />
            <span className="eyebrow">Our Mission</span>
          </div>
          <ul className="space-y-4">
            {[
              "Identify large market inefficiencies.",
              "Build AI-first technology companies.",
              "Scale them with shared resources.",
              "Create long-term enterprise value.",
              "Deliver diversified returns for investors.",
              "Empower entrepreneurs with world-class execution.",
            ].map((m, i) => (
              <li key={m} className="flex items-start gap-4 pb-4 border-b border-border/50">
                <span className="font-mono text-xs text-primary pt-1">
                  0{i + 1}
                </span>
                <span className="text-base md:text-lg">{m}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

function Different() {
  return (
    <section className="py-24 md:py-36">
      <div className="container-x">
        <div className="flex items-center gap-3 mb-6">
          <span className="hairline" />
          <span className="eyebrow">What Makes Us Different</span>
        </div>
        <div className="grid md:grid-cols-12 gap-12 items-start">
          <p className="md:col-span-7 font-display text-3xl md:text-5xl leading-[1.05]">
            Traditional venture capital invests in startups after they exist.
            <br />
            <span className="italic text-primary/90">
              KapFoundry creates startups before they exist.
            </span>
          </p>
          <div className="md:col-span-5 md:pt-4">
            <p className="text-lg text-muted-foreground leading-relaxed">
              Every company begins with extensive market research, customer discovery, product
              validation, and AI-driven technology development,{" "}
              <span className="text-foreground">before a single rupee of capital is deployed.</span>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function StudioAdvantage() {
  return (
    <section className="py-24 md:py-36 bg-ink relative">
      <div className="container-x">
        <SectionHeader
          eyebrow="The Studio Advantage"
          title={
            <>
              Every venture launches with a{" "}
              <span className="italic text-primary/90">mature company's stack.</span>
            </>
          }
        />
        <div className="mt-14 grid sm:grid-cols-2 md:grid-cols-5 gap-px bg-border/60 rounded-xl overflow-hidden border border-border">
          {STACK.map((s, i) => (
            <div
              key={s}
              className="bg-ink p-6 min-h-[110px] flex flex-col justify-between hover:bg-accent transition"
            >
              <span className="font-mono text-[11px] text-primary">
                {String(i + 1).padStart(2, "0")}
              </span>
              <span className="font-display text-lg leading-tight">{s}</span>
            </div>
          ))}
        </div>
        <p className="mt-10 max-w-2xl text-lg text-muted-foreground">
          <span className="text-foreground font-medium">The result:</span> dramatically reduced
          startup risk, with meaningfully faster execution.
        </p>
      </div>
    </section>
  );
}

function Framework() {
  return (
    <section id="framework" className="py-24 md:py-36">
      <div className="container-x">
        <SectionHeader
          eyebrow="Repeatable by Design"
          title={
            <>
              Our{" "}
              <span className="italic text-primary/90">venture-building</span> framework.
            </>
          }
        />
        <div className="mt-16 grid md:grid-cols-3 lg:grid-cols-6 gap-px bg-border/60 rounded-xl overflow-hidden border border-border">
          {FRAMEWORK.map((f) => (
            <div key={f.n} className="bg-card p-8 flex flex-col gap-6 min-h-[240px]">
              <span className="font-mono text-xs text-primary">{f.n}</span>
              <h3 className="font-display text-2xl">{f.title}</h3>
              <p className="text-sm text-muted-foreground leading-relaxed mt-auto">{f.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Portfolio() {
  return (
    <section id="portfolio" className="py-24 md:py-36 bg-ink relative">
      <div className="container-x">
        <SectionHeader
          eyebrow="Our Portfolio Verticals"
          title={
            <>
              Seven industries,{" "}
              <span className="italic text-primary/90">one AI engine.</span>
            </>
          }
        >
          <p>
            <span className="text-foreground">Artificial Intelligence</span>. The foundation
            beneath every venture, not a vertical of its own.
          </p>
        </SectionHeader>

        <div className="mt-16 space-y-6">
          {VERTICALS.map((v, i) => (
            <article
              key={v.n}
              className={`grid md:grid-cols-12 gap-0 rounded-2xl overflow-hidden border border-border bg-card`}
            >
              <div
                className={`md:col-span-5 relative min-h-[280px] md:min-h-[420px] ${
                  i % 2 === 1 ? "md:order-2" : ""
                }`}
              >
                <img
                  src={v.img}
                  alt={v.name}
                  loading="lazy"
                  width={1200}
                  height={900}
                  className="absolute inset-0 h-full w-full object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-ink/80 via-ink/20 to-transparent" />
                <div className="absolute top-6 left-6 flex items-center gap-3">
                  <span className="font-mono text-xs text-primary bg-ink/70 px-2 py-1 rounded">
                    Portfolio · {v.n} / 07
                  </span>
                </div>
                <div className="absolute bottom-6 left-6 right-6">
                  <div className="text-xs uppercase tracking-[0.2em] text-primary/90 mb-2">
                    {v.tag}
                  </div>
                  <h3 className="font-display text-3xl md:text-4xl leading-tight text-white">
                    {v.name}
                  </h3>
                </div>
              </div>

              <div className="md:col-span-7 p-8 md:p-12 grid sm:grid-cols-2 gap-8">
                <div>
                  <div className="font-mono text-[11px] tracking-widest text-muted-foreground uppercase mb-4">
                    The Problem
                  </div>
                  <ul className="space-y-2.5">
                    {v.problem.map((p) => (
                      <li key={p} className="text-sm text-muted-foreground flex gap-2">
                        <span className="text-primary mt-1.5 w-1 h-1 rounded-full bg-primary shrink-0" />
                        {p}
                      </li>
                    ))}
                  </ul>
                </div>
                <div>
                  <div className="font-mono text-[11px] tracking-widest text-primary uppercase mb-4">
                    Our Solution
                  </div>
                  <ul className="space-y-2.5">
                    {v.solution.map((p) => (
                      <li key={p} className="text-sm text-foreground flex gap-2">
                        <span className="text-primary mt-1.5 w-1 h-1 rounded-full bg-primary shrink-0" />
                        {p}
                      </li>
                    ))}
                  </ul>
                </div>
                {v.example ? (
                  <div className="sm:col-span-2 mt-2 pt-6 border-t border-border">
                    <div className="text-[11px] tracking-widest text-primary uppercase mb-2">
                      Example Venture
                    </div>
                    <p className="text-base text-foreground">{v.example}</p>
                  </div>
                ) : null}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function AISection() {
  return (
    <section id="ai" className="py-24 md:py-36 relative overflow-hidden">
      <div className="absolute inset-0 grid-lines opacity-30" />
      <div className="container-x relative">
        <SectionHeader
          eyebrow="Artificial Intelligence"
          title={
            <>
              AI is not a vertical.<br />
              <span className="italic text-primary/90">
                It's the foundation under every company we build.
              </span>
            </>
          }
        >
          <p>
            Every venture is designed <span className="text-foreground">AI-first</span>, not
            just AI-enabled.
          </p>
        </SectionHeader>

        <div className="mt-14 flex flex-wrap gap-3">
          {AI_CAPS.map((a) => (
            <span
              key={a}
              className="px-5 py-3 rounded-full border border-border bg-card text-sm hover:border-primary/60 hover:text-primary transition"
            >
              {a}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function Investors() {
  return (
    <section id="investors" className="py-24 md:py-36 bg-ink">
      <div className="container-x">
        <div className="grid md:grid-cols-12 gap-12">
          <div className="md:col-span-6">
            <div className="flex items-center gap-3 mb-6">
              <span className="hairline" />
              <span className="eyebrow">Our Investment Philosophy</span>
            </div>
            <h2 className="font-display text-4xl md:text-5xl lg:text-6xl leading-[1.02]">
              A diversified portfolio,<br />
              <span className="italic text-primary/90">not a single bet.</span>
            </h2>
            <p className="mt-8 text-lg text-muted-foreground leading-relaxed">
              Rather than depending on one company, investors gain exposure to a portfolio of
              ventures across multiple industries, spreading risk while multiplying the chances
              to participate in high-growth markets.
            </p>
            <p className="mt-6 font-display text-2xl md:text-3xl leading-snug">
              Instead of asking{" "}
              <span className="italic text-muted-foreground">"Which startup will succeed?"</span>
              <br />
              <span className="text-primary">
                We build an ecosystem where many companies can succeed.
              </span>
            </p>

            <a
              href="#contact"
              className="mt-10 inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition"
            >
              Speak with our team
              <span aria-hidden>→</span>
            </a>
          </div>

          <div className="md:col-span-6">
            <div className="rounded-2xl border border-border p-8">
              <div className="text-xs uppercase tracking-[0.22em] text-primary mb-6">
                Why Investors Choose Us
              </div>
              <ul className="grid sm:grid-cols-2 gap-x-6">
                {INVESTOR_REASONS.map((r, i) => (
                  <li
                    key={r}
                    className="flex items-start gap-3 py-4 border-b border-border/60 last:border-0"
                  >
                    <span className="font-mono text-[11px] text-primary pt-1.5">
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <span className="text-sm md:text-base">{r}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [state, setState] = useState<"idle" | "sent">("idle");
  return (
    <section id="contact" className="py-24 md:py-36 relative">
      <div className="container-x">
        <div className="grid md:grid-cols-12 gap-12">
          <div className="md:col-span-5">
            <div className="flex items-center gap-3 mb-6">
              <span className="hairline" />
              <span className="eyebrow">Get in touch</span>
            </div>
            <h2 className="font-display text-4xl md:text-5xl leading-[1.05]">
              Build with us.<br />
              <span className="italic text-primary/90">Invest with us.</span>
            </h2>
            <p className="mt-6 text-muted-foreground text-lg leading-relaxed">
              We work with institutional investors, family offices, and operators who want
              exposure to India's next generation of AI-first companies.
            </p>

            <dl className="mt-10 space-y-6 text-sm">
              <div>
                <dt className="text-[11px] uppercase tracking-[0.22em] text-primary mb-1">
                  Studio
                </dt>
                <dd>Hyderabad, India</dd>
              </div>
              <div>
                <dt className="text-[11px] uppercase tracking-[0.22em] text-primary mb-1">
                  Email
                </dt>
                <dd>
                  <a href="mailto:hello@kapfoundry.com" className="hover:text-primary transition">
                    hello@kapfoundry.com
                  </a>
                </dd>
              </div>
            </dl>
          </div>

          <div className="md:col-span-7">
            <form
              onSubmit={(e) => {
                e.preventDefault();
                setState("sent");
              }}
              className="rounded-2xl border border-border bg-card p-8 md:p-10 space-y-6"
            >
              <div className="grid sm:grid-cols-2 gap-6">
                <label className="block">
                  <span className="text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
                    Full name
                  </span>
                  <input
                    required
                    type="text"
                    className="mt-2 w-full bg-transparent border-b border-border py-2 text-base focus:outline-none focus:border-primary transition"
                  />
                </label>
                <label className="block">
                  <span className="text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
                    Organization
                  </span>
                  <input
                    type="text"
                    className="mt-2 w-full bg-transparent border-b border-border py-2 text-base focus:outline-none focus:border-primary transition"
                  />
                </label>
              </div>
              <label className="block">
                <span className="text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
                  Email
                </span>
                <input
                  required
                  type="email"
                  className="mt-2 w-full bg-transparent border-b border-border py-2 text-base focus:outline-none focus:border-primary transition"
                />
              </label>
              <label className="block">
                <span className="text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
                  I'm interested in
                </span>
                <select className="mt-2 w-full bg-transparent border-b border-border py-2 text-base focus:outline-none focus:border-primary transition">
                  <option className="bg-card">Investing in the studio</option>
                  <option className="bg-card">Co-founding a venture</option>
                  <option className="bg-card">Partnership or collaboration</option>
                  <option className="bg-card">General enquiry</option>
                </select>
              </label>
              <label className="block">
                <span className="text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
                  Message
                </span>
                <textarea
                  rows={4}
                  className="mt-2 w-full bg-transparent border-b border-border py-2 text-base focus:outline-none focus:border-primary transition resize-none"
                />
              </label>

              <div className="flex items-center justify-between pt-2">
                <p className="text-xs text-muted-foreground">
                  We respond to investor enquiries within 48 hours.
                </p>
                <button
                  type="submit"
                  className="inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition"
                >
                  {state === "sent" ? "Message sent ✓" : "Send message →"}
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="border-t border-border py-12">
      <div className="container-x">
        <div className="grid md:grid-cols-12 gap-8 items-end">
          <div className="md:col-span-6">
            <div className="flex items-center">
              <img src={logo} alt="KapFoundry" className="h-10 w-auto object-contain" />
            </div>
            <p className="mt-6 max-w-md text-sm text-muted-foreground leading-relaxed">
              We identify the problems, engineer the companies, and scale them with a shared
              engine, building an ecosystem where many companies can succeed.
            </p>
          </div>
          <div className="md:col-span-6 md:text-right space-y-2 text-sm text-muted-foreground">
            <div>Venture Studio · Hyderabad, India</div>
            <div>
              <a href="mailto:hello@kapfoundry.com" className="hover:text-primary transition">
                hello@kapfoundry.com
              </a>
            </div>
            <div className="text-xs pt-4">
              © {new Date().getFullYear()} KapFoundry. All rights reserved.
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

function Home() {
  return (
    <main className="min-h-screen bg-background text-foreground">
      <Nav />
      <Hero />
      <WhoWeAre />
      <VisionMission />
      <Different />
      <StudioAdvantage />
      <Framework />
      <Portfolio />
      <AISection />
      <Investors />
      <Contact />
      <Footer />
    </main>
  );
}
