// Team — "The people on your page" — role cards with approved copy.

function Team() {
  const roles = [
    { role: "Account Manager",
      sym: "◐",
      desc: "Your direct line. They know your numbers, your chatters, your schedule, and what's working. Weekly strategy calls, daily monitoring, one text away.",
      tag: "Weekly calls · Daily monitoring" },
    { role: "Chat Team",
      sym: "◑",
      desc: "Trained on your voice before they ever send a message. They know your niche, your pricing, and what you'd never say. You approve the training, they handle the volume.",
      tag: "24/7 Coverage" },
    { role: "Content Director",
      sym: "◒",
      desc: "Builds your inspo feed and posting strategy. Tells you what to film, why it'll perform, and when to post it.",
      tag: "Inspo + Strategy" },
    { role: "Growth Lead",
      sym: "◓",
      desc: "Runs your traffic — paid promo, reel strategy, Reddit campaigns, cross-platform funnels. Their whole job is bringing new eyes to your page.",
      tag: "Paid + Organic" },
    { role: "Brand & Profile",
      sym: "◆",
      desc: "Audits your bio, pricing, bundles, and PPVs. Fixes what's leaking money. Rebuilds to convert.",
      tag: "Conversion Audit" },
    { role: "Founders",
      sym: "●",
      desc: "Hands-on. You can text us. Not in a \"contact our support line\" way — in a \"here's my number\" way.",
      tag: "Palm Beach · LA" },
  ];

  return (
    <section id="team" className="relative py-40 md:py-48" data-screen-label="Team">
      <div className="absolute left-0 top-1/3 w-[500px] h-[500px] rounded-full bg-[rgba(232,160,160,0.02)] blur-[160px]"></div>
      <div className="max-w-[1600px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-12 gap-8 mb-20">
          <div className="col-span-12 md:col-span-7">
            <SecLabel num="06 / 09">The People</SecLabel>
            <h2 className="mt-6 font-display font-semibold tracking-tight leading-[0.95]" style={{ fontSize: "clamp(44px, 5.4vw, 88px)" }}>
              The people <GradientText>on your page.</GradientText>
            </h2>
          </div>
          <div className="col-span-12 md:col-span-4 md:col-start-9 self-end">
            <p className="text-[#7a7a7a] font-light leading-relaxed max-w-md text-[15px]">
              When you sign with Palm, <span className="text-[#f0ece8]">here's who's actually doing the work</span>. Not an offshore pool. Not a rotating floor. These six roles, every account.
            </p>
            <p className="mt-4 text-[11px] tracking-[0.25em] uppercase text-white/25">Real photos + names shared on your intro call</p>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-white/[0.04] border border-white/[0.04]">
          {roles.map((m, i) => (
            <div key={m.role} className="reveal bg-[#060606] p-8 group hover:bg-[rgba(232,160,160,0.02)] transition-colors duration-500 flex flex-col" style={{ transitionDelay: `${(i%3)*60}ms` }}>
              <div className="aspect-[16/10] mb-6 border border-white/[0.06] relative overflow-hidden flex items-center justify-center group-hover:border-[rgba(232,160,160,0.25)] transition-colors duration-500">
                <div className="absolute inset-0" style={{
                  background: `
                    radial-gradient(circle at ${30 + (i*11)%40}% ${40 + (i*7)%30}%, rgba(232,160,160,0.2), transparent 55%),
                    linear-gradient(135deg, #111 0%, #0a0a0a 60%, #141010 100%)
                  `
                }}></div>
                <span className="relative font-display text-[90px] leading-none text-[#E8A0A0]/50 group-hover:text-[#E8A0A0]/80 transition-colors duration-700">{m.sym}</span>
                <span className="absolute top-3 left-3 text-[9px] tracking-[0.3em] uppercase text-white/25">— 0{i+1}</span>
                <span className="absolute bottom-3 right-3 text-[9px] tracking-[0.3em] uppercase text-white/25">{m.tag}</span>
              </div>
              <h4 className="font-display text-[22px] font-semibold tracking-tight text-[#f0ece8]">{m.role}</h4>
              <p className="mt-3 text-[13px] text-[#7a7a7a] font-light leading-relaxed">{m.desc}</p>
            </div>
          ))}
        </div>

        <div className="mt-16 flex flex-col md:flex-row md:items-center justify-between gap-6 pt-10 border-t border-white/[0.04]">
          <p className="text-[13px] text-[#7a7a7a] font-light max-w-xl">
            Want to meet your pod before you sign anything? We introduce you to the exact people who'd be running your account. Always.
          </p>
          <BtnArrow variant="ghost" href="#cta">Meet your team</BtnArrow>
        </div>
      </div>
    </section>
  );
}

window.Team = Team;