/* ============================================================
   TeamGrid — portrait grid.
   Warm intro, then factual: photo, name, role, one-line bio.
   ============================================================ */

const EMMA = { name: "Emma", role: "Founder", bio: "A mum who learned to read food labels. Cooks every meal from scratch, grows vegetables on the family allotment, and still tastes every batch.", tone: "warm", image: "assets/Employees-page/emma 1.jpg" };

const TEAM = [
  { name: "Yoko",     role: "Technical Account Manager",    bio: "",                                                                                                                                                                                                      tone: "cool", image: "assets/Employees-page/yoko.png" },
  { name: "Itsuro",   role: "Quality Manager",        bio: "Cutting additives and UPFs while boosting fiber to 30g daily has transformed my gut health — I feel younger than ever!",                                                                                tone: "cool", image: "assets/Employees-page/itsuro.jpg" },
  { name: "Ran",      role: "Wholesale Manager",            bio: "UPF, ultra processed food, it harms your health. It gives your brain instant reward, making you addicted.",                                                                                             tone: "warm", image: "assets/Employees-page/ran.jpg" },
  { name: "Nancy",    role: "Technical Manager",            bio: "Raised in a health-conscious home, I learned early on to avoid chemicals.",                                                                                                                             tone: "cool", image: "assets/Employees-page/nancy.jpg" },
  { name: "Callum",   role: "Finance Manager",              bio: "Emma Basic Sesame Seeds are roasted, healthy and delicious — my favourite product!",                                                                                                                    tone: "warm", image: "assets/Employees-page/callum.jpg" },
  { name: "James",    role: "Head of Technology & E-Commerce", bio: "Being blood type B-, I am forgetful. Whenever I accidentally buy a bottle of the above, I get a shout from one of the extremists in the team!",                                                    tone: "cool", image: "assets/Employees-page/james.jpg" },
  { name: "Ling",     role: "Inventory Buyer",                        bio: "Inspire me with your creative and sustainable packages. If you have a sustainable product that matches our values, I would love to hear from you.",                                                     tone: "warm", image: "assets/Employees-page/ling.jpg" },
  { name: "Olivia",   role: "Designer",                     bio: "Growing up in a farming family made food quality second nature — from eating out of the garden to moving to London.",                                                                                   tone: "warm", image: "assets/Employees-page/olivia.jpg", imagePosition: "center 12%" },
  { name: "Taiki",    role: "Sales & Operations Executive", bio: "I love being outside — golfing, playing football, or heading out for a hike whenever I can. Clean, simple ingredients matter to me, which is why Emma Basic fits so naturally into my routine.",        tone: "cool", image: "assets/Employees-page/taiki.jpg",  imageZoom: 2.4, imagePosition: "40% center" },
  { name: "Cotton",   role: "Chief Morale Officer",         bio: "Attends every tasting. Has never approved an additive.",                                                                                                                                                tone: "warm", image: "assets/Employees-page/Cotton Popup.jpg" },
];

function TeamGrid() {
  return (
    <section style={{
      padding: "clamp(120px, 16vh, 180px) var(--pad-x) clamp(80px, 12vh, 140px)",
      background: "var(--paper)",
      color: "var(--ink)",
    }}>
      <div style={{ maxWidth: "var(--maxw)", margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr",
          gap: "clamp(32px, 6vw, 96px)", alignItems: "end",
          marginBottom: "clamp(56px, 8vh, 96px)",
        }}>
          <Reveal>
            <h2 style={{
              fontFamily: "var(--f-display)", fontWeight: 400,
              fontSize: "clamp(44px, 6vw, 92px)",
              letterSpacing: "-0.03em", lineHeight: 0.92, margin: 0,
              fontVariationSettings: '"opsz" 144, "SOFT" 30',
            }}>
              The people<br/>
              <em style={{ fontStyle: "normal", fontFamily: "var(--f-body)", fontWeight: 400, letterSpacing: "-0.02em" }}>
                behind the jar.
              </em>
            </h2>
          </Reveal>
          <Reveal delay={160}>
            <p style={{
              fontFamily: "var(--f-body)", fontSize: 18, lineHeight: 1.7,
              maxWidth: 460, margin: 0, color: "var(--ink-90)", paddingBottom: 12,
            }}>
              A small team, united by one rule —
              no additives, ever.
            </p>
          </Reveal>
        </div>

        {/* Full team grid including Emma */}
        <div className="eb-team-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: "clamp(16px, 2vw, 32px) clamp(16px, 2vw, 32px)",
          alignItems: "start",
        }}>
          <TeamMember m={EMMA} index={0} />
          {TEAM.map((m, i) => (
            <TeamMember key={i} m={m} index={i + 1} />
          ))}
        </div>

      </div>
    </section>
  );
}

function TeamMember({ m, index }) {
  const [ref, visible] = useReveal(0.1);
  const [hover, setHover] = React.useState(false);
  return (
    <div
      ref={ref}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "grid", gap: 16,
        opacity: visible ? 1 : 0,
        transform: `translateY(${visible ? 0 : 28}px)`,
        transition: `opacity 800ms var(--ease-out) ${(index % 4) * 60 + Math.floor(index / 4) * 120}ms, transform 800ms var(--ease-out) ${(index % 4) * 60 + Math.floor(index / 4) * 120}ms`,
      }}>
      <div style={{
        position: "relative",
        aspectRatio: "3/4",
        overflow: "hidden",
        background: "var(--paper-bright)",
      }}>
        <div style={{
          position: "absolute", inset: 0,
          transform: hover ? "scale(1.04)" : "scale(1)",
          transition: "transform 700ms var(--ease-out)",
        }}>
          {m.image
            ? <img src={m.image} alt={m.name} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: m.imagePosition || "center top", display: "block", transform: m.imageZoom ? `scale(${m.imageZoom})` : "none", transformOrigin: m.imagePosition || "center top" }} />
            : <Placeholder label={m.name.toUpperCase()} tone={m.tone} />
          }
        </div>
      </div>
      <div style={{ display: "grid", gap: 4 }}>
        <h3 style={{
          fontFamily: "var(--f-display)", fontWeight: 400,
          fontSize: 22, letterSpacing: "-0.01em", lineHeight: 1.1, margin: 0,
          fontVariationSettings: '"opsz" 144, "SOFT" 30',
        }}>{m.name}</h3>
        <span style={{
          fontFamily: "var(--f-body)", fontWeight: 400, fontSize: 11, letterSpacing: "0.18em",
          textTransform: "uppercase", color: "var(--ink-60)",
        }}>{m.role}</span>
        {m.bio ? <p style={{
          fontFamily: "var(--f-body)", fontSize: 16, lineHeight: 1.5,
          color: "var(--ink-90)", margin: "8px 0 0",
        }}>{m.bio}</p> : null}
      </div>
    </div>
  );
}

function EventPhoto({ src, alt, index }) {
  const [ref, visible] = useReveal(0.08);
  const [hover, setHover] = React.useState(false);
  return (
    <div
      ref={ref}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative",
        aspectRatio: "3/2",
        overflow: "hidden",
        background: "var(--paper-bright)",
        border: "1px solid var(--rule)",
        opacity: visible ? 1 : 0,
        transform: `translateY(${visible ? 0 : 28}px)`,
        transition: `opacity 800ms var(--ease-out) ${index * 100}ms, transform 800ms var(--ease-out) ${index * 100}ms`,
      }}
    >
      <div style={{
        position: "absolute", inset: 0,
        transform: hover ? "scale(1.03)" : "scale(1)",
        transition: "transform 700ms var(--ease-out)",
      }}>
        <img src={src} alt={alt} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }} />
      </div>
    </div>
  );
}

/* Inject responsive styles */
const _teamStyle = document.createElement("style");
_teamStyle.textContent = `
  .eb-team-featured { display: grid; grid-template-columns: 1fr 1fr; }
  @media (max-width: 768px) {
    .eb-team-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .eb-team-featured { grid-template-columns: 1fr !important; }
  }
  @media (max-width: 480px) {
    .eb-team-grid { grid-template-columns: repeat(2, 1fr) !important; }
  }
`;
document.head.appendChild(_teamStyle);

window.TeamGrid = TeamGrid;