/* global React */
// YachtingStack — reusable On shore product page.
const { Icon, Eyebrow, Btn, Access, Reveal } = window;

const pInner = (children, style = {}) => (
  <div style={{ maxWidth: 1080, margin: "0 auto", position: "relative", ...style }}>{children}</div>
);

function RelatedCard({ p, go }) {
  return (
    <button onClick={() => { go("product:" + p.key); }} style={{ all: "unset", cursor: "pointer", display: "block", height: "100%" }}>
      <div className="liftcard" style={{ height: "100%", padding: "20px 20px", borderRadius: 16, background: "var(--surface)",
        border: "1px solid var(--hairline)", transition: "transform .3s var(--ease), border-color .3s" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 10 }}>
          <span style={{ width: 36, height: 36, borderRadius: 10, background: "rgba(250,204,21,.08)", border: "1px solid rgba(250,204,21,.16)",
            display: "flex", alignItems: "center", justifyContent: "center", color: "var(--cyan-2)" }}><Icon name={p.icon} size={16} /></span>
          <span style={{ fontFamily: "var(--font-ui)", fontSize: 14.5, fontWeight: 600, color: "var(--ink)" }}>{p.name}</span>
        </div>
        <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 13, lineHeight: 1.5, color: "var(--ink-3)", margin: 0 }}>{p.tagline}</p>
      </div>
    </button>
  );
}

function ProductPage({ go, productKey }) {
  const PRODUCTS = window.PRODUCTS || {};
  const p = PRODUCTS[productKey] || PRODUCTS.custom;
  const related = (["custom", ...window.ONSHORE_MENU]).filter((k) => k !== p.key).map((k) => PRODUCTS[k]);

  return (
    <div style={{ background: "var(--bg)" }}>
      {/* hero */}
      <section style={{ position: "relative", overflow: "hidden", padding: "150px 32px 70px", background: "var(--bg-deep)" }}>
        {p.key === "custom" && <div aria-hidden="true" style={{ position: "absolute", inset: 0, backgroundImage: "url(assets/images/harbor.png)", backgroundSize: "cover", backgroundPosition: "center", opacity: 0.16, pointerEvents: "none" }} />}
        {p.key === "custom" && <div aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none", background: "linear-gradient(90deg, var(--bg-deep) 6%, rgba(7,20,33,.55) 52%, transparent 100%)" }} />}
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 70% 80% at 82% 10%, rgba(250,204,21,.12), transparent 58%)" }} />
        {p.key === "custom" && <div aria-hidden="true" style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: "42%", pointerEvents: "none", background: "linear-gradient(to bottom, transparent, var(--bg))" }} />}
        {pInner(
          <div>
            <button onClick={() => go("home")} style={{ all: "unset", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 7,
              fontFamily: "var(--font-ui)", fontSize: 13, color: "var(--ink-3)", marginBottom: 26 }}
              onMouseEnter={(e) => e.currentTarget.style.color = "var(--ink)"} onMouseLeave={(e) => e.currentTarget.style.color = "var(--ink-3)"}>
              <Icon name="ArrowLeft" size={15} /> On shore
            </button>
            <div style={{ display: "grid", gridTemplateColumns: p.key === "custom" ? "1fr" : "1.15fr .85fr", gap: 48, alignItems: "center" }}>
              <div>
                {p.key !== "custom" && (
                <div className="rise" style={{ animationDelay: ".05s", display: "flex", alignItems: "center", gap: 14, marginBottom: 22 }}>
                  <span style={{ width: 56, height: 56, borderRadius: 15, background: "rgba(250,204,21,.09)", border: "1px solid rgba(250,204,21,.22)",
                    display: "flex", alignItems: "center", justifyContent: "center", color: "var(--cyan-2)" }}><Icon name={p.icon} size={27} /></span>
                  <Access state={p.access} />
                </div>
                )}
                {p.key !== "custom" && <div className="rise" style={{ animationDelay: ".1s" }}><Eyebrow>{p.cat}</Eyebrow></div>}
                <h1 className="rise" style={{ animationDelay: ".16s", fontFamily: "var(--font-head)", fontWeight: 400,
                  fontSize: "clamp(34px,4.6vw,56px)", lineHeight: 1.05, letterSpacing: "-0.01em", color: "#fff", margin: "14px 0 0" }}>{p.name}</h1>
                <p className="rise" style={{ animationDelay: ".24s", fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: "clamp(17px,1.8vw,21px)",
                  lineHeight: 1.55, color: "var(--ink-2)", margin: "18px 0 0", maxWidth: 460 }}>{p.tagline}</p>
                <div className="rise" style={{ animationDelay: ".34s", display: "flex", gap: 13, marginTop: 34, flexWrap: "wrap" }}>
                  <Btn size="lg" onClick={() => go(p.cta.route)} iconRight="ArrowRight">{p.cta.label}</Btn>
                  {p.cta.route !== "onboarding" && <Btn size="lg" variant="ghost" onClick={() => go("onboarding")}>Begin Onboarding</Btn>}
                </div>
              </div>
              {/* visual */}
              {p.key !== "custom" && (
              <div className="rise" style={{ animationDelay: ".2s", position: "relative", aspectRatio: "1 / 1", borderRadius: 22,
                border: "1px solid rgba(250,204,21,.2)", background: "var(--panel)", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <div style={{ position: "absolute", inset: 0, background: "radial-gradient(closest-side at 50% 45%, rgba(250,204,21,.14), transparent 72%)" }} />
                <Icon name={p.icon} size={120} color="var(--cyan-2)" stroke={0.55} style={{ opacity: 0.55 }} />
                <span style={{ position: "absolute", bottom: 16, left: 18, fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--ink-3)", letterSpacing: ".02em" }}>{p.domain}</span>
              </div>
              )}
            </div>
          </div>
        )}
      </section>

      {/* what it is + features */}
      <section style={{ padding: "104px 32px" }}>
        {pInner(
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "start" }}>
            <Reveal>
              <Eyebrow>What it is</Eyebrow>
              <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 18 }}>
                {p.what.map((para, i) => (
                  <p key={i} style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 16, lineHeight: 1.75, color: "var(--ink-2)", margin: 0 }}>{para}</p>
                ))}
              </div>
            </Reveal>
            <Reveal delay={120} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              {p.features.map(([ic, t]) => (
                <div key={t} style={{ padding: "20px 18px", borderRadius: 15, background: "var(--surface)", border: "1px solid var(--hairline)" }}>
                  <span style={{ width: 38, height: 38, borderRadius: 11, background: "rgba(250,204,21,.08)", border: "1px solid rgba(250,204,21,.16)",
                    display: "flex", alignItems: "center", justifyContent: "center", color: "var(--cyan-2)", marginBottom: 13 }}><Icon name={ic} size={18} /></span>
                  <div style={{ fontFamily: "var(--font-ui)", fontSize: 13.5, fontWeight: 400, color: "var(--ink-2)", lineHeight: 1.5 }}>{t}</div>
                </div>
              ))}
            </Reveal>
          </div>
        )}
      </section>

      {/* related */}
      <section style={{ padding: "32px 32px 40px" }}>
        {pInner(
          <Reveal>
            <Eyebrow>More on shore</Eyebrow>
            <div style={{ display: "grid", gridTemplateColumns: `repeat(${related.length},1fr)`, gap: 14, marginTop: 20 }}>
              {related.map((rp) => <RelatedCard key={rp.key} p={rp} go={go} />)}
            </div>
          </Reveal>
        )}
      </section>

      {/* CTA */}
      <section style={{ position: "relative", overflow: "hidden", padding: "120px 32px 130px", textAlign: "center", marginTop: 48 }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 60% 70% at 50% 50%, rgba(250,204,21,.08), transparent 70%)" }} />
        <Reveal style={{ position: "relative", maxWidth: 600, margin: "0 auto" }}>
          <h2 style={{ fontFamily: "var(--font-head)", fontWeight: 400, fontSize: "clamp(28px,3.6vw,42px)", color: "var(--ink)", margin: 0 }}>
            Deploy {p.name} with us.
          </h2>
          <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 16, lineHeight: 1.7, color: "var(--ink-3)", margin: "18px auto 32px", maxWidth: 460 }}>
            It starts with onboarding — we map your operation and deploy what fits, under your supervision.
          </p>
          <Btn size="lg" onClick={() => go("onboarding")} iconRight="ArrowRight">Begin Onboarding</Btn>
        </Reveal>
      </section>
    </div>
  );
}

Object.assign(window, { ProductPage });