/* global React */
// About YachtingStack — six full-screen sections (snap route): hero · founder ·
// history · team map · mission + vision · closing. Copy lives in about-data.js.
const { Icon, Eyebrow, Btn, Reveal } = window;
const { SlSection, SlHero, SlHead, SlCards, SlClosing } = window.SL;

function AboutAvatar({ src, alt }) {
  const [failed, setFailed] = React.useState(false);
  if (failed) {
    return <div aria-hidden="true" style={{ aspectRatio: "1", width: "100%", maxWidth: 300, display: "grid", placeItems: "center", background: "var(--surface)",
      border: "1px solid var(--hairline)", borderRadius: 12, fontFamily: "var(--font-head)", fontSize: 64, color: "var(--cyan-2)" }}>FL</div>;
  }
  return <img src={src} alt={alt} onError={() => setFailed(true)}
    style={{ width: "100%", maxWidth: 300, height: "auto", display: "block", filter: "drop-shadow(0 18px 40px rgba(0,0,0,.45))" }} />;
}

// Horizontal timeline: a hairline rail with one node per year; collapses to a single
// column (rail hidden) through the shared .responsive-grid rule on narrow screens.
function Timeline({ rows }) {
  return (
    <div style={{ position: "relative", marginTop: 44 }}>
      <div aria-hidden="true" className="tl-rail" style={{ position: "absolute", left: 0, right: 0, top: 7, height: 1,
        background: "linear-gradient(90deg, transparent, var(--hairline-2) 8%, var(--hairline-2) 92%, transparent)" }} />
      <div className="responsive-grid" style={{ display: "grid", gridTemplateColumns: `repeat(${rows.length}, 1fr)`, gap: 22 }}>
        {rows.map(([year, title, body], i) => (
          <Reveal key={year} delay={i * 90}>
            <div style={{ paddingRight: 8 }}>
              <span aria-hidden="true" style={{ display: "block", width: 15, height: 15, borderRadius: "50%", background: "var(--cyan-2)",
                boxShadow: "0 0 0 5px rgba(148,193,218,.16)", position: "relative", zIndex: 1 }} />
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, fontWeight: 600, letterSpacing: ".14em", color: "var(--cyan-2)", marginTop: 18 }}>{year}</div>
              <div style={{ fontFamily: "var(--font-ui)", fontSize: 16, fontWeight: 600, color: "var(--ink)", margin: "8px 0 8px", lineHeight: 1.3 }}>{title}</div>
              <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 13.5, lineHeight: 1.55, color: "var(--ink-3)", margin: 0 }}>{body}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  );
}

// Team + client dots over the estate's world line art. Positions are percentages
// of the image (about-data.js) — no projection maths, easy to nudge by eye.
const DOT_TEAM = "#94C1DA";
const DOT_CLIENT = "#A78BFA";
function TeamMap({ team }) {
  const dot = (p, kind) => (
    <span key={kind + p.name} title={p.name} aria-label={`${p.name} — ${kind === "team" ? team.legend.team : team.legend.clients}`}
      style={{ position: "absolute", left: `${p.x}%`, top: `${p.y}%`, transform: "translate(-50%,-50%)", display: "block",
        width: kind === "team" ? 10 : 16, height: kind === "team" ? 10 : 16, borderRadius: "50%",
        background: kind === "team" ? DOT_TEAM : "transparent",
        border: kind === "team" ? "none" : `2px solid ${DOT_CLIENT}`,
        boxShadow: kind === "team" ? `0 0 0 4px rgba(148,193,218,.22)` : "none" }} />
  );
  const legendItem = (color, label, ring) => (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-ui)", fontSize: 12.5, color: "var(--ink-2)" }}>
      <span aria-hidden="true" style={{ width: ring ? 14 : 10, height: ring ? 14 : 10, borderRadius: "50%", background: ring ? "transparent" : color, border: ring ? `2px solid ${color}` : "none" }} />{label}
    </span>
  );
  return (
    <div>
      <div style={{ position: "relative", width: "100%", maxWidth: 820, margin: "26px auto 0" }}>
        <img src={team.map} alt="World map with the locations of the YachtingStack team and its clients"
          style={{ width: "100%", height: "auto", display: "block", opacity: .55 }} />
        {team.clients.map((p) => dot(p, "client"))}
        {team.team.map((p) => dot(p, "team"))}
      </div>
      <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "10px 28px", marginTop: 16 }}>
        {legendItem(DOT_TEAM, `${team.legend.team} · ${team.team.map((p) => p.name).join(", ")}`)}
        {legendItem(DOT_CLIENT, `${team.legend.clients} · ${team.clients.map((p) => p.name).join(", ")}`, true)}
      </div>
    </div>
  );
}

function AboutPage({ go }) {
  const a = window.ABOUT_PAGE;
  const p = { fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 14, lineHeight: 1.6, color: "var(--ink-3)", margin: "12px 0 0" };
  return (
    <div style={{ background: "var(--bg)" }}>
      <SlHero go={go} spec={{ ...a.hero, ctaLabel: "Contact sales", route: "about", figure: null }} />

      <SlSection>
        <div className="responsive-grid" style={{ display: "grid", gridTemplateColumns: "300px 1fr", gap: 56, alignItems: "start" }}>
          <Reveal><AboutAvatar src={a.founder.image} alt={`${a.founder.name}, ${a.founder.role} of YachtingStack`} /></Reveal>
          <Reveal>
            <Eyebrow>{a.founder.role}</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-head)", fontWeight: 400, fontSize: "clamp(28px,3.6vw,44px)", color: "var(--ink)", margin: "14px 0 6px" }}>{a.founder.name}</h2>
            {a.founder.bio.map((t, i) => <p key={i} style={p}>{t}</p>)}
          </Reveal>
        </div>
      </SlSection>

      <SlSection deep>
        <SlHead eyebrow="A short history" headline="Built in the open, close to the work." />
        <Timeline rows={a.history} />
      </SlSection>

      <SlSection>
        <SlHead eyebrow="The team" headline={a.team.headline} body={a.team.body} align="center" />
        <Reveal delay={80}><TeamMap team={a.team} /></Reveal>
      </SlSection>

      <SlSection deep>
        <SlCards items={[["Compass", a.mission.title, a.mission.text], ["Eye", a.vision.title, a.vision.text]]} cols={2} />
      </SlSection>

      <SlClosing spec={{ ...a.closing, ctaLabel: "Contact sales" }} go={go} />
    </div>
  );
}
Object.assign(window, { AboutPage });