Team — founders duo with bios

import { Linkedin, Mail, Twitter } from "lucide-react";

const founders = [
  { name: "Maya Okonkwo", role: "Co-founder & CEO", city: "Lisbon", photo: "/team/maya.jpg", email: "maya@tallybook.example",
    bio: ["Ran a twelve-person design studio for nine years and spent too many evenings matching payments to invoices.", "Looks after product direction and talks to at least five customers every week."] },
  { name: "Felix Navarro", role: "Co-founder & CTO", city: "Valencia", photo: "/team/felix.jpg", email: "felix@tallybook.example",
    bio: ["Spent a decade building payment systems for banks before deciding small businesses deserved better tools.", "Leads engineering and still reviews every change to how money moves."] },
];

export function TeamFounders() {
  return (
    <section aria-labelledby="founders-title" className="bg-bg px-5 py-16 font-sans sm:px-10 sm:py-20">
      <div className="mx-auto max-w-6xl">
        <div className="mx-auto max-w-3xl text-center">
          <p className="text-[13px] font-medium text-primary">Our story</p>
          <h2 id="founders-title" className="mt-3 text-balance text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Started by two people tired of chasing invoices</h2>
          <p className="mt-4 text-base text-fg-muted sm:text-lg">
            Maya ran a design studio. Felix wrote payment software. In 2023 they built the tool they both wished they’d had, and they still answer support email every Friday.
          </p>
        </div>

        <div className="mt-10 grid gap-4 md:grid-cols-2">
          {founders.map((f) => (
            <figure key={f.name} className="grid content-start gap-5 rounded-xl border border-border bg-bg p-8 lg:p-10">
              <div className="flex items-center gap-[18px]">
                <img src={f.photo} alt="" className="size-[84px] shrink-0 rounded-full bg-primary-soft object-cover ring-4 ring-bg outline outline-1 outline-border" />
                <figcaption>
                  <h3 className="text-xl font-semibold tracking-tight text-fg">{f.name}</h3>
                  <p className="mt-0.5 text-sm font-medium text-primary">{f.role}</p>
                </figcaption>
              </div>
              {f.bio.map((p) => <p key={p} className="text-sm leading-relaxed text-fg-muted">{p}</p>)}
              <div className="flex flex-wrap items-center justify-between gap-3 border-t border-border pt-[18px] text-[13px] text-fg-subtle">
                <span>Based in {f.city}</span>
                <div className="flex gap-1">
                  <a href="#" aria-label={f.name + " on LinkedIn"} className="grid size-8 place-items-center rounded transition hover:bg-surface-2 hover:text-fg"><Linkedin className="size-4" aria-hidden /></a>
                  <a href="#" aria-label={f.name + " on X"} className="grid size-8 place-items-center rounded transition hover:bg-surface-2 hover:text-fg"><Twitter className="size-4" aria-hidden /></a>
                  <a href={"mailto:" + f.email} aria-label={"Email " + f.name} className="grid size-8 place-items-center rounded transition hover:bg-surface-2 hover:text-fg"><Mail className="size-4" aria-hidden /></a>
                </div>
              </div>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}