// Team: the people behind Ansys Digital. Photos are drop-in <image-slot>s (persist on drop).
const NS_TEAM = window.AnsysDigitalDesignSystem_4543d7;

function TeamCard({ slotId, photo, name, role, bio, reverse, zoom, focus }) {
  return (
    <div className="reveal team-card" style={{ background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", overflow: "hidden", display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1.1fr)" }}>
      <div style={{ position: "relative", minHeight: 460, overflow: "hidden", background: "var(--surface-subtle)", order: reverse ? 2 : 1 }}>
        {photo
          ? <img src={photo} alt={name} loading="lazy" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center " + (focus || "top"), transform: "scale(" + (zoom || 1) + ")", transformOrigin: "center " + (focus || "top") }} />
          : <image-slot id={slotId} shape="rect" placeholder={"Drop " + name + "'s photo"} style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}></image-slot>}
      </div>
      <div style={{ padding: "clamp(28px,4vw,44px)", display: "flex", flexDirection: "column", justifyContent: "center", order: reverse ? 1 : 2 }}>
        <h3 style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 700, letterSpacing: "var(--tracking-tight)" }}>{name}</h3>
        <div style={{ marginTop: 6, fontFamily: "var(--font-mono)", fontSize: 12.5, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--brand)", fontWeight: 600 }}>{role}</div>
        <p style={{ margin: "16px 0 0", fontSize: 15.5, lineHeight: 1.65, color: "var(--text-secondary)", textWrap: "pretty" }}>{bio}</p>
      </div>
    </div>
  );
}

function Team() {
  const { SectionHeading } = NS_TEAM;
  return (
    <section id="team" style={{ background: "var(--surface-page)" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "var(--section-y) var(--gutter)" }}>
        <div className="reveal" style={{ textAlign: "center", maxWidth: 640, margin: "0 auto clamp(2rem,4vw,3rem)" }}>
          <SectionHeading align="center" eyebrow="Our team" title="Meet the people behind Ansys Digital" description="A small, senior team — you work directly with the people who design and build your store. No account managers, no hand-offs." />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: "clamp(20px,3vw,28px)", maxWidth: 900, margin: "0 auto" }} className="team-grid">
          <TeamCard
            slotId="team-manish"
            photo="assets/manish.jpg"
            name="Manish Prajapati"
            role="Founder & Lead Shopify Developer"
            bio="Leads development end to end — custom themes, Shopify Plus builds, migrations and performance. Every store we ship is architected and quality-checked by Manish."
            zoom={1.15}
            focus="30%"
          />
          <TeamCard
            slotId="team-vivek"
            photo="assets/vivek.jpg"
            name="Vivek Kumar"
            role="Co-founder & Design / CRO Lead"
            bio="Owns design, UX and conversion — turning brand and product depth into clean, high-converting storefronts, and optimizing them after launch to keep growing revenue."
            reverse
            zoom={1.15}
            focus="20%"
          />
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Team });