// Hostess / staff editorial section — emphasises the people, not the space.

const HOSTS = [
  {
    name: "HA-EUN",
    kr: "하은",
    role: "HEAD HOSTESS",
    tenure: "EST. 2023",
    quote: "가장 조용한 순간이, 가장 비싼 순간이에요.",
    quoteEn: "The quietest moment is the most expensive one.",
    img: "uploads/u1862462214_A_hyper-realistic_editorial-style_portrait_of_a_s_6792b6bf-53c9-401d-b0e3-27d73182629f_2.png",
    specialty: ["FLOOR DIRECTION", "VIP PROTOCOL"],
    pos: "50% 20%",
  },
  {
    name: "SO-RA",
    kr: "소라",
    role: "SOMMELIÈRE",
    tenure: "WSET LVL 3",
    quote: "잔이 비기 전에, 이야기가 비지 않도록.",
    quoteEn: "Before the glass empties, the story never should.",
    img: "uploads/u1862462214_Beautiful_Korean_woman_clean_minimal_background_w_1bc81eb2-d40a-47dc-8779-e3050cfbd0fd_0.png",
    specialty: ["WHISKY PAIRING", "CHAMPAGNE SERVICE"],
    pos: "50% 18%",
  },
  {
    name: "YOO-JIN",
    kr: "유진",
    role: "KARAOKE HOST",
    tenure: "VOCAL COACH",
    quote: "음이탈은 이곳에서만 로맨틱합니다.",
    quoteEn: "A cracked note is only romantic in here.",
    img: "uploads/u1862462214_beautiful_korean_woman_soft_facial_features_pale__80dc31f4-9ee0-46c4-9566-ee730f9b46e3_0.png",
    specialty: ["DUET COACHING", "KEY SETTING"],
    pos: "50% 25%",
  },
  {
    name: "SEO-YEON",
    kr: "서연",
    role: "NIGHT CONCIERGE",
    tenure: "EN · KR · JP",
    quote: "손님의 이름보다 취향을 먼저 외웁니다.",
    quoteEn: "We memorise your taste before your name.",
    img: "uploads/u1862462214_Beautiful_Korean_woman_clean_minimal_background_w_c0f8d224-1c8d-48f7-a46e-e42d9903e103_1.png",
    specialty: ["GUEST MATCHING", "PRIVATE TRANSPORT"],
    pos: "50% 18%",
  },
];

function HostsSection() {
  const [active, setActive] = React.useState(0);
  const host = HOSTS[active];

  return (
    <section
      id="hosts"
      data-screen-label="02 Hosts"
      style={{
        background: "#0A0A0A",
        color: "#F4F2ED",
        padding: "120px 0 100px",
        position: "relative",
        overflow: "hidden",
      }}
    >
      {/* header */}
      <div style={{ padding: "0 32px", marginBottom: 60 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32 }}>
          <span className="meta" style={{ color: "rgba(255,255,255,0.6)" }}>CHAPTER I½ · HOSTS</span>
          <span className="meta" style={{ color: "rgba(255,255,255,0.6)" }}>FOUR PORTRAITS · NO STAGE NAMES</span>
        </div>
        <div style={{ height: 1, background: "rgba(255,255,255,0.2)" }} />

        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 40, alignItems: "end", marginTop: 40 }}>
          <h2 className="display clip-reveal" style={{
            fontSize: "clamp(80px, 13vw, 220px)",
            lineHeight: 0.85,
            letterSpacing: "-0.05em",
          }}>
            The <span className="display-italic" style={{ fontStyle: "italic" }}>people</span><br/>
            of the night.
          </h2>
          <p className="kr-display slide-right" style={{ fontSize: 22, lineHeight: 1.3, paddingBottom: 24, maxWidth: 440 }}>
            공간이 아닌, <span style={{ fontStyle: "italic", color: "rgba(255,255,255,0.7)" }}>사람이 먼저</span>.<br/>
            당신의 밤을 담당하는 호스트.
          </p>
        </div>
      </div>

      {/* editorial spread: big portrait left, meta right */}
      <div style={{
        padding: "0 32px",
        display: "grid",
        gridTemplateColumns: "1.1fr 1fr",
        gap: 32,
        alignItems: "stretch",
        minHeight: 720,
      }}>
        {/* left: hero portrait */}
        <div
          className="host-portrait-wrap sr-blur"
          style={{ position: "relative", overflow: "hidden", background: "#141414" }}
          onMouseMove={(e) => {
            const el = e.currentTarget;
            const r = el.getBoundingClientRect();
            const x = ((e.clientX - r.left) / r.width * 100).toFixed(1);
            const y = ((e.clientY - r.top) / r.height * 100).toFixed(1);
            el.style.setProperty("--mx", x + "%");
            el.style.setProperty("--my", y + "%");
          }}
        >
          <div className="host-glow"></div>
          {HOSTS.map((h, i) => (
            <img
              key={h.name}
              src={h.img}
              alt={h.name}
              style={{
                position: "absolute", inset: 0,
                width: "100%", height: "100%", objectFit: "cover",
                objectPosition: h.pos,
                filter: "grayscale(0.4) contrast(1.1) brightness(0.9)",
                opacity: i === active ? 1 : 0,
                transform: i === active ? "scale(1)" : "scale(1.04)",
                transition: "opacity 600ms ease, transform 1200ms cubic-bezier(0.2,0.7,0.2,1)",
              }}
            />
          ))}
          <div style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(180deg, rgba(10,10,10,0.3) 0%, transparent 25%, transparent 55%, rgba(10,10,10,0.85) 100%)",
            pointerEvents: "none",
          }} />

          {/* meta corner */}
          <div style={{
            position: "absolute", top: 20, left: 20, right: 20,
            display: "flex", justifyContent: "space-between",
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 10, letterSpacing: "0.2em",
            color: "rgba(255,255,255,0.85)",
          }}>
            <span>PORTRAIT N° {String(active + 1).padStart(3, "0")}</span>
            <span>NC / HOSTS / SS26</span>
          </div>

          {/* name + role block — bottom */}
          <div style={{ position: "absolute", left: 24, right: 24, bottom: 24 }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", opacity: 0.75, marginBottom: 8 }}>
              {host.role} · {host.tenure}
            </div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 18, flexWrap: "wrap" }}>
              <h3 className="display" style={{ fontSize: "clamp(54px, 7vw, 110px)", letterSpacing: "-0.04em", lineHeight: 0.9, margin: 0 }}>
                {host.name}
              </h3>
              <span className="kr-display" style={{ fontSize: 32, opacity: 0.7 }}>{host.kr}</span>
            </div>
            <div style={{ display: "flex", gap: 6, marginTop: 14, flexWrap: "wrap" }}>
              {host.specialty.map((s) => (
                <span key={s} className="mono" style={{
                  fontSize: 9, letterSpacing: "0.18em",
                  padding: "5px 9px",
                  border: "1px solid rgba(255,255,255,0.4)",
                }}>
                  {s}
                </span>
              ))}
            </div>
          </div>
        </div>

        {/* right: quote + index of hosts */}
        <div className="sr-right" style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 32, paddingLeft: 12 }}>
          {/* pull quote */}
          <div>
            <div className="display" style={{
              fontSize: 140, lineHeight: 0.5,
              color: "#2F4BFF",
              marginBottom: -30,
              fontStyle: "italic",
              fontWeight: 300,
            }}>
              &ldquo;
            </div>
            <p className="kr-display" style={{ fontSize: 34, lineHeight: 1.2, marginBottom: 14, maxWidth: 520 }}>
              {host.quote}
            </p>
            <p className="sans-tight" style={{ fontSize: 13, lineHeight: 1.5, fontStyle: "italic", color: "rgba(255,255,255,0.6)", maxWidth: 480 }}>
              &ldquo;{host.quoteEn}&rdquo;
            </p>
            <div style={{ marginTop: 24, display: "flex", alignItems: "center", gap: 10 }}>
              <div style={{ width: 36, height: 1, background: "rgba(255,255,255,0.5)" }} />
              <span className="mono" style={{ fontSize: 10, letterSpacing: "0.2em", color: "rgba(255,255,255,0.7)" }}>
                — {host.name} / {host.role}
              </span>
            </div>
          </div>

          {/* host index — clickable */}
          <div>
            <div className="meta" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 12 }}>
              INDEX · 0{active + 1} / 0{HOSTS.length}
            </div>
            <div data-stagger-parent style={{ borderTop: "1px solid rgba(255,255,255,0.2)" }}>
              {HOSTS.map((h, i) => (
                <button
                  key={h.name}
                  onMouseEnter={() => setActive(i)}
                  onClick={() => setActive(i)}
                  data-stagger
                  style={{
                    width: "100%",
                    display: "grid",
                    gridTemplateColumns: "40px 1fr 1fr auto",
                    gap: 16,
                    alignItems: "center",
                    padding: "18px 0",
                    borderBottom: "1px solid rgba(255,255,255,0.15)",
                    background: i === active ? "rgba(47,75,255,0.08)" : "transparent",
                    border: "none",
                    borderBottomWidth: 1, borderBottomStyle: "solid",
                    borderBottomColor: "rgba(255,255,255,0.15)",
                    borderLeft: i === active ? "2px solid #2F4BFF" : "2px solid transparent",
                    paddingLeft: 14,
                    color: "inherit",
                    cursor: "pointer",
                    textAlign: "left",
                    transition: "background 180ms ease, border-color 180ms ease",
                  }}
                >
                  <span className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", opacity: 0.5 }}>
                    0{i + 1}
                  </span>
                  <div>
                    <div className="display" style={{ fontSize: 26, letterSpacing: "-0.03em", lineHeight: 1 }}>
                      {i === active ? <span className="display-italic" style={{ fontStyle: "italic" }}>{h.name}</span> : h.name}
                    </div>
                    <div className="kr-sans" style={{ fontSize: 11, opacity: 0.55, marginTop: 3 }}>{h.kr}</div>
                  </div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", opacity: 0.7 }}>
                    {h.role}
                  </div>
                  <span className="mono" style={{ fontSize: 14, opacity: i === active ? 1 : 0.3, color: i === active ? "#2F4BFF" : "inherit" }}>
                    →
                  </span>
                </button>
              ))}
            </div>
          </div>

          {/* footer note */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
            <p className="kr-sans" style={{ fontSize: 11, opacity: 0.45, maxWidth: 340, lineHeight: 1.5 }}>
              * 본 포트레이트는 NOIR/CLUB 공식 호스트로, 예약 시 지정이 가능합니다. 지정 시 서비스 차지 별도 15%.
            </p>
            <a href="#rooms" className="btn" style={{ color: "#F4F2ED", borderColor: "#F4F2ED", padding: "12px 16px" }}>
              REQUEST HOST →
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.HostsSection = HostsSection;