export function About() {
  return (
    <section id="about" className="py-24 px-4 sm:px-6 border-t border-border/30">
      <div className="mx-auto max-w-5xl">
        <div className="max-w-2xl mb-12">
          <h2 className="title-serif text-[36px] md:text-[48px] leading-none">
            We built it for ourselves, then open-sourced it.
          </h2>
        </div>

        <div className="max-w-3xl space-y-4 text-serif font-normal text-[15px] md:text-[16px] leading-[1.55] text-muted-foreground">
          <p>
            Greywall was built by{' '}
            <a href="https://greyhaven.co" target="_blank" rel="noopener noreferrer" className="text-foreground font-medium hover:text-primary transition-colors">Greyhaven</a>,
            where we build custom{' '}
            <a href="https://greyhaven.co/insights/greyhaven-sovereign-ai-framework" target="_blank" rel="noopener noreferrer" className="text-foreground font-medium hover:text-primary transition-colors">sovereign AI</a> solutions for enterprises.
            We needed kernel-enforced sandboxing with real-time visibility inside client environments, so we built it.
          </p>
          <p>
            It runs in production deployments today. We open-sourced it because the control layer around the agent should not depend on the company selling the model.
          </p>
        </div>

        {/* Team */}
        <div className="mt-16 border-t border-border/30 pt-16 mb-16">
          <h3 className="title-serif text-[22px] md:text-[28px] leading-[1.1] mb-8">
            The people behind it.
          </h3>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6">
            <a
              href="https://github.com/cowpig"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-start gap-3 p-4 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20 transition-all"
            >
              <img
                src="https://github.com/cowpig.png?size=64"
                alt="Max McCrea"
                width={40}
                height={40}
                className="rounded-md shrink-0 bg-muted mt-0.5"
              />
              <div>
                <div className="font-sans font-semibold text-sm text-foreground">Max McCrea</div>
                <div className="text-xs text-muted-foreground font-sans font-medium">CEO & Founder, Greyhaven</div>
                <p className="text-xs text-muted-foreground font-serif mt-1.5 leading-relaxed">
                  AI researcher, Recurse Center alumnus. Built Monadical since 2016. Now building sovereign AI infrastructure.
                </p>
              </div>
            </a>
            <a
              href="https://github.com/nikitalokhmachev-ai"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-start gap-3 p-4 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20 transition-all"
            >
              <img
                src="https://github.com/nikitalokhmachev-ai.png?size=64"
                alt="Nikita Lokhmachev"
                width={40}
                height={40}
                className="rounded-md shrink-0 bg-muted mt-0.5"
              />
              <div>
                <div className="font-sans font-semibold text-sm text-foreground">Nikita Lokhmachev</div>
                <div className="text-xs text-muted-foreground font-sans font-medium">Technical Product Lead</div>
                <p className="text-xs text-muted-foreground font-serif mt-1.5 leading-relaxed">
                  Former startup CTO, Fulbright scholar. Leads AI tooling and process engineering.
                </p>
              </div>
            </a>
            <a
              href="https://github.com/tito"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-start gap-3 p-4 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20 transition-all"
            >
              <img
                src="https://github.com/tito.png?size=64"
                alt="Mathieu Virbel"
                width={40}
                height={40}
                className="rounded-md shrink-0 bg-muted mt-0.5"
              />
              <div>
                <div className="font-sans font-semibold text-sm text-foreground">Mathieu Virbel</div>
                <div className="text-xs text-muted-foreground font-sans font-medium">Senior Team Lead</div>
                <p className="text-xs text-muted-foreground font-serif mt-1.5 leading-relaxed">
                  Creator of <a href="https://github.com/kivy/kivy" target="_blank" rel="noopener noreferrer" className="text-foreground hover:text-primary transition-colors">Kivy</a> (19k+ stars). Full stack engineer, GSoC mentor.
                </p>
              </div>
            </a>
          </div>
        </div>

        <div className="border-t border-border/30 pt-16">
          <h3 className="title-serif text-[22px] md:text-[28px] leading-[1.1] mb-4">
            Need the rest of the system?
          </h3>
          <p className="text-serif font-normal text-[15px] md:text-[16px] leading-[1.55] text-muted-foreground max-w-2xl mb-8">
            Greywall is one layer in a larger deployment model. For teams that need private model hosting, workflow design, and contained end-to-end systems, Greyhaven builds the surrounding infrastructure.
          </p>
          <a
            href="https://greyhaven.co/contact"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 px-6 py-3 rounded-lg border border-border/50 bg-card/30 font-sans text-sm font-medium text-foreground hover:border-primary/30 hover:text-primary transition-all"
          >
            Talk to our team
            <span className="text-muted-foreground">&rarr;</span>
          </a>
        </div>
      </div>
    </section>
  )
}