/* global React, ChromeWindow, C */
const { useState } = React;

const TABS = [
  { id: "news", title: "News article - opinion piece", url: "news-site.example/opinion/article", count: 412 },
  { id: "video", title: "Video platform - long interview", url: "video-site.example/watch?id=...", count: 88 },
  { id: "shop", title: "Online shop - product page", url: "shop.example/product/...", count: 17 },
];

function Showcase() {
  const [tab, setTab] = useState(TABS[0]);

  return (
    <section id="how" className="mobile-section" style={showcaseStyles.wrap}>
      <SectionLabel kicker="How it works" title={<>The sidebar <em style={{ fontStyle: "italic", color: C.brandHi }}>lives</em> on the page you are reading.</>} />

      <div style={showcaseStyles.tabs}>
        {TABS.map((t) => (
          <button
            key={t.id}
            type="button"
            aria-pressed={tab.id === t.id}
            onClick={() => setTab(t)}
            style={{ ...showcaseStyles.tab, ...(tab.id === t.id ? showcaseStyles.tabActive : {}) }}
          >
            <span>{t.title.split(" - ")[0]}</span>
            <span style={showcaseStyles.tabN}>{t.count}</span>
          </button>
        ))}
      </div>

      <div style={showcaseStyles.frame}>
        <ChromeWindow url={tab.url} tabs={[{ title: tab.title }]} width="100%" height={600}>
          <div className="showcase-split" style={showcaseStyles.split}>
            <FakePage tab={tab} />
            <Sidebar tab={tab} />
          </div>
        </ChromeWindow>
      </div>

      <div className="three-col" style={showcaseStyles.captions}>
        <Caption num="A" title="Open it on any URL" body="The Webzi button opens a focused sidebar on the page you are already reading." />
        <Caption num="B" title="Same tabs as the extension" body="AmbiCasts, Activity, Global, and AmbiTrails are shown exactly as the product is organized." />
        <Caption num="C" title="Context stays intact" body="Posts, replies, polls, notes, highlights, and trails stay tied to their original page." />
      </div>
    </section>
  );
}

function SectionLabel({ kicker, title }) {
  return (
    <div style={{ marginBottom: 56, maxWidth: 820 }}>
      <div style={{ fontSize: 12, letterSpacing: 2, textTransform: "uppercase", color: C.brandHi, fontWeight: 600, marginBottom: 18 }}>
        {kicker}
      </div>
      <h2 style={{
        fontFamily: "'Instrument Serif', serif", fontWeight: 400,
        fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 1.0, letterSpacing: 0,
        color: C.text, margin: 0, textWrap: "balance",
      }}>
        {title}
      </h2>
    </div>
  );
}

function FakePage({ tab }) {
  return (
    <div className="showcase-fake-page" style={fakePageStyles.wrap}>
      <div style={{ maxWidth: 540 }}>
        <div style={fakePageStyles.kicker}>OPINION / A NEWS SITE</div>
        <h3 style={fakePageStyles.title}>Platforms decide who gets to speak.</h3>
        <div style={fakePageStyles.byline}>By a journalist / 6 min read / today</div>
        <p style={fakePageStyles.p}>
          For years, the same pattern has repeated itself across the open web.
          <span style={fakePageStyles.highlight}> Websites quietly disable comments. Shops only show filtered reviews. You browse alone.</span>
        </p>
        <p style={fakePageStyles.p}>
          AmbiWebZ adds the conversation layer back without pulling you away from the page.
        </p>
      </div>
      <div style={fakePageStyles.fab} title="Open AmbiWebZ">
        <img src="logo-gold.png" alt="" width="30" height="30" style={{ display: "block" }} />
        <span style={fakePageStyles.fabPing} />
      </div>
    </div>
  );
}

function Sidebar({ tab }) {
  return (
    <aside className="showcase-sidebar" style={sidebarStyles.wrap}>
      <div style={sidebarStyles.head}>
        <div style={sidebarStyles.brandRow}>
          <div style={sidebarStyles.brand}>
            <img src="logo-gold.png" alt="" width="34" height="34" style={{ display: "block", filter: "drop-shadow(0 0 10px rgba(236,167,44,0.38))" }} />
            <span style={sidebarStyles.wordmark}>AmbiWeb<em style={sidebarStyles.wordmarkZ}>Z</em></span>
          </div>
          <div style={sidebarStyles.actions}>
            <IconBtn label="AI">AI</IconBtn>
            <IconBtn label="Notifications">N</IconBtn>
            <IconBtn label="Settings">S</IconBtn>
            <IconBtn label="Copy">C</IconBtn>
            <IconBtn label="Close">x</IconBtn>
          </div>
        </div>

        <div style={sidebarStyles.metaRow}>
          <span style={sidebarStyles.url}>{tab.url}</span>
          <span style={sidebarStyles.presence}><span style={sidebarStyles.greenDot} /> {3 + (tab.count % 6)} here now</span>
        </div>
      </div>

      <div style={sidebarStyles.tabRail}>
        {["AmbiCasts", "Activity", "Global", "AmbiTrails"].map((name, i) => (
          <span key={name} style={{ ...sidebarStyles.viewTab, ...(i === 0 ? sidebarStyles.viewTabOn : {}) }}>{name}</span>
        ))}
        <a href="https://ko-fi.com/ambiwebz" target="_blank" rel="noopener noreferrer" style={sidebarStyles.kofi}>Donate</a>
      </div>

      <div style={sidebarStyles.body}>
        <Post rank="Orb-Weaver" rankColor={C.brandHi} name="techfreund" time="2m" score={47} text="This is exactly the kind of article where page-based threads make sense. The context is still right here." reactions={[["+", 14], ["fire", 8]]} replies={2} />
        <Poll q="Should every website have a reader discussion layer?" options={[["Yes, when readers choose it", 44], ["Only with moderation tools", 41], ["No, sites should decide", 15]]} votes={284} />
        <Post rank="Hatchling" rankColor={C.textMuted} name="surf_lisa" time="14m" score={3} text="I like that this is tied to the page, not another random feed." reactions={[["+", 8]]} replies={0} />
      </div>

      <div style={sidebarStyles.composer}>
        <div style={sidebarStyles.input}>Add to the discussion...</div>
        <div style={sidebarStyles.composerBar}>
          <div style={{ display: "flex", gap: 6 }}>
            {["B", "I", "Q", "smile"].map((s) => <span key={s} style={sidebarStyles.tool}>{s}</span>)}
          </div>
          <button style={sidebarStyles.send}>Post -&gt;</button>
        </div>
      </div>
    </aside>
  );
}

function IconBtn({ children, label }) {
  return (
    <button type="button" aria-label={label} title={label} style={sidebarStyles.iconBtn}>
      {children}
    </button>
  );
}

function Post({ rank, rankColor, name, time, score, text, reactions, replies }) {
  return (
    <div style={postStyles.wrap}>
      <div style={postStyles.head}>
        <div style={{ ...postStyles.avatar, color: rankColor, borderColor: rankColor + "66" }}>{name[0].toUpperCase()}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={postStyles.nameRow}>
            <span style={postStyles.name}>{name}</span>
            <span style={{ ...postStyles.rank, color: rankColor, borderColor: rankColor + "55" }}>{rank}</span>
          </div>
          <span style={postStyles.time}>{time} ago</span>
        </div>
        <div style={postStyles.score}>
          <span>^</span>
          <strong>{score}</strong>
          <span>v</span>
        </div>
      </div>
      <div style={postStyles.body}>{text}</div>
      <div style={postStyles.foot}>
        <div style={{ display: "flex", gap: 5, flexWrap: "wrap" }}>
          {reactions.map(([e, n]) => (
            <span key={e} style={postStyles.react}>{e} <span style={{ color: C.textDim }}>{n}</span></span>
          ))}
        </div>
        <span style={postStyles.reply}>{replies} {replies === 1 ? "reply" : "replies"}</span>
      </div>
    </div>
  );
}

function Poll({ q, options, votes }) {
  const max = Math.max(...options.map(([, n]) => n));
  return (
    <div style={pollStyles.wrap}>
      <div style={pollStyles.head}>
        <span style={pollStyles.tag}>POLL</span>
        <span style={pollStyles.votes}>{votes} votes</span>
      </div>
      <div style={pollStyles.q}>{q}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 12 }}>
        {options.map(([label, pct]) => (
          <div key={label} style={pollStyles.bar}>
            <div style={{ ...pollStyles.fill, width: `${pct}%`, background: pct === max ? C.brandHi : C.brandDeep, opacity: pct === max ? 1 : 0.5 }} />
            <div style={pollStyles.barLabel}>
              <span>{label}</span>
              <span style={{ fontWeight: 700 }}>{pct}%</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Caption({ num, title, body }) {
  return (
    <div>
      <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 38, color: C.brandHi, lineHeight: 1, fontStyle: "italic" }}>{num}</div>
      <div style={{ color: C.text, fontSize: 17, fontWeight: 600, marginTop: 12, letterSpacing: 0 }}>{title}</div>
      <div style={{ color: C.textDim, fontSize: 14, lineHeight: 1.55, marginTop: 6 }}>{body}</div>
    </div>
  );
}

const showcaseStyles = {
  wrap: { padding: "120px 36px", maxWidth: 1280, margin: "0 auto" },
  tabs: { display: "flex", gap: 8, marginBottom: 18, flexWrap: "wrap" },
  tab: {
    display: "inline-flex", alignItems: "center", gap: 8,
    padding: "8px 14px", borderRadius: 999,
    background: "transparent", border: `1px solid ${C.border}`,
    color: C.textDim, fontSize: 13, cursor: "pointer", fontWeight: 500,
  },
  tabActive: { background: C.panel, borderColor: C.borderHi, color: C.text },
  tabN: { color: C.brandHi, fontSize: 11, fontWeight: 700 },
  frame: {
    position: "relative", borderRadius: 18, overflow: "visible",
    boxShadow: "0 60px 120px -40px rgba(198,138,28,0.35), 0 0 0 1px rgba(255,255,255,0.06)",
  },
  split: { display: "flex", height: 540, background: "#fafafa" },
  captions: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 64 },
};

const fakePageStyles = {
  wrap: {
    flex: 1, padding: "40px 56px", background: "#fafafa", color: "#1a1a1a",
    fontFamily: "Georgia, serif", position: "relative", overflow: "hidden", minHeight: 540,
  },
  kicker: { fontFamily: "system-ui, sans-serif", fontSize: 11, letterSpacing: 2, color: "#777", fontWeight: 700, marginBottom: 16 },
  title: { fontSize: 32, lineHeight: 1.1, letterSpacing: 0, margin: "0 0 14px", fontWeight: 700 },
  byline: { fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#777", marginBottom: 28 },
  p: { fontSize: 16, lineHeight: 1.65, margin: "0 0 16px" },
  highlight: { background: "rgba(236,167,44,0.28)", padding: "1px 0", borderBottom: `2px solid ${C.brand}` },
  fab: {
    position: "absolute", bottom: 24, right: 24,
    width: 52, height: 52, borderRadius: "50%",
    background: C.bg, border: `2px solid ${C.brandHi}`,
    display: "flex", alignItems: "center", justifyContent: "center",
    boxShadow: "0 12px 30px -10px rgba(198,138,28,0.6), 0 0 0 6px rgba(236,167,44,0.12)",
  },
  fabPing: {
    position: "absolute", inset: -2, borderRadius: "50%",
    border: `2px solid ${C.brandHi}`, animation: "pingRing 2s ease-out infinite", pointerEvents: "none",
  },
};

const sidebarStyles = {
  wrap: {
    width: 380, flexShrink: 0, background: C.bg, color: C.text,
    borderLeft: `1px solid ${C.border}`, display: "flex", flexDirection: "column",
    fontFamily: "system-ui, -apple-system, sans-serif",
  },
  head: { padding: "12px 14px 10px", borderBottom: `1px solid ${C.border}` },
  brandRow: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10 },
  brand: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 },
  wordmark: { fontFamily: "'Cinzel', serif", fontSize: 18, fontWeight: 700, color: C.text, whiteSpace: "nowrap", letterSpacing: 0 },
  wordmarkZ: { color: C.silk, fontStyle: "normal", marginLeft: -1 },
  actions: { display: "flex", gap: 4, flexShrink: 0 },
  iconBtn: {
    width: 25, height: 25, borderRadius: 7, border: `1px solid ${C.border}`,
    background: "transparent", color: C.textDim, fontSize: 9,
    display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer",
  },
  metaRow: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, marginTop: 10, fontSize: 10.5, color: C.textDim },
  url: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontFamily: "'JetBrains Mono', monospace", color: C.brandHi },
  presence: { display: "inline-flex", alignItems: "center", gap: 5, flexShrink: 0 },
  greenDot: { width: 6, height: 6, borderRadius: "50%", background: "#34D399", boxShadow: "0 0 6px rgba(52,211,153,0.7)", animation: "blink 1.4s ease-in-out infinite" },
  tabRail: { display: "flex", alignItems: "center", gap: 4, padding: "7px 10px", borderBottom: `1px solid ${C.border}`, background: "#0d0c14", overflowX: "auto" },
  viewTab: { padding: "6px 8px", color: C.textMuted, cursor: "pointer", borderRadius: 7, fontSize: 11.5, whiteSpace: "nowrap" },
  viewTabOn: { color: C.text, background: C.panel, fontWeight: 700 },
  kofi: { marginLeft: "auto", padding: "5px 8px", borderRadius: 999, border: "1px solid rgba(255,94,91,0.35)", color: "#ffaaa8", textDecoration: "none", fontSize: 11, fontWeight: 700, whiteSpace: "nowrap" },
  body: { flex: 1, overflow: "auto", padding: "12px 14px", display: "flex", flexDirection: "column", gap: 10 },
  composer: { padding: 12, borderTop: `1px solid ${C.border}`, background: C.panel },
  input: { padding: "10px 12px", border: `1px solid ${C.border}`, borderRadius: 10, background: C.bg, marginBottom: 8, color: C.textMuted, fontSize: 13 },
  composerBar: { display: "flex", justifyContent: "space-between", alignItems: "center" },
  tool: { minWidth: 26, height: 26, padding: "0 6px", display: "inline-flex", alignItems: "center", justifyContent: "center", color: C.textDim, fontSize: 11, cursor: "pointer", borderRadius: 6 },
  send: { background: C.brand, color: C.text, border: "none", padding: "7px 14px", borderRadius: 999, fontSize: 12.5, fontWeight: 700, cursor: "pointer" },
};

const postStyles = {
  wrap: { padding: 12, border: `1px solid ${C.border}`, borderRadius: 12, background: C.panel },
  head: { display: "flex", alignItems: "center", gap: 10 },
  avatar: { width: 30, height: 30, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(255,255,255,0.06)", border: "1px solid", fontWeight: 800, fontSize: 13 },
  nameRow: { display: "flex", alignItems: "center", gap: 6, minWidth: 0, flexWrap: "wrap" },
  name: { color: C.text, fontWeight: 700, fontSize: 13 },
  rank: { fontSize: 9.5, padding: "1px 6px", borderRadius: 999, border: "1px solid", textTransform: "uppercase", letterSpacing: 0, fontWeight: 700 },
  time: { color: C.textMuted, fontSize: 11 },
  score: { display: "flex", flexDirection: "column", alignItems: "center", gap: 1, padding: "4px 6px", borderRadius: 6, background: C.bg, border: `1px solid ${C.border}`, color: C.textMuted, fontSize: 10 },
  body: { color: C.text, fontSize: 13.5, lineHeight: 1.55, margin: "10px 0" },
  foot: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 },
  react: { display: "inline-flex", alignItems: "center", gap: 4, padding: "3px 8px", borderRadius: 999, background: C.bg, border: `1px solid ${C.border}`, fontSize: 11.5, color: C.text },
  reply: { color: C.textMuted, fontSize: 12, whiteSpace: "nowrap" },
};

const pollStyles = {
  wrap: { padding: 14, border: `1px solid ${C.borderHi}`, borderRadius: 12, background: `linear-gradient(180deg, ${C.panelHi}, ${C.panel})` },
  head: { display: "flex", justifyContent: "space-between", alignItems: "center" },
  tag: { fontSize: 10, color: C.brandHi, fontWeight: 800, letterSpacing: 1 },
  votes: { color: C.textMuted, fontSize: 11 },
  q: { color: C.text, fontSize: 14, fontWeight: 700, marginTop: 6, lineHeight: 1.4 },
  bar: { position: "relative", minHeight: 28, borderRadius: 6, background: C.bg, overflow: "hidden" },
  fill: { position: "absolute", inset: 0, borderRadius: 6, transition: "width 0.4s" },
  barLabel: { position: "relative", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8, padding: "0 10px", minHeight: 28, fontSize: 12, color: C.text },
};

Object.assign(window, { Showcase, SectionLabel });