/* global React, Common */
const { Eyebrow, SectionTitle } = Common;
const { useState: useRoS } = React;

function RoadmapSection() {
  const [votes, setVotes] = useRoS({ ios: 1247, android: 892, watch: 218, vision: 64 });
  const [voted, setVoted] = useRoS({});
  const items = [
    { id: "ios", os: "iOS", sub: "system-wide dictation replacement", color: "#38BDF8" },
    { id: "android", os: "Android", sub: "gboard alternative + system input", color: "#34D399" },
    { id: "watch", os: "Apple Watch", sub: "tap, speak, send to phone", color: "#A78BFA" },
    { id: "vision", os: "visionOS", sub: "the obvious one", color: "#F472B6" },
  ];
  const total = Object.values(votes).reduce((a, b) => a + b, 0);
  return (
    <section style={{ padding: "120px 32px", position: "relative" }}>
      <div className="container-narrow">
        <div style={{ textAlign: "center" }}>
          <Eyebrow num={12} color="#A78BFA">roadmap</Eyebrow>
          <div style={{ height: 16 }}/>
          <SectionTitle align="center" maxWidth={780}>
            Mobile when you<br/><span className="grad-text">want it badly enough.</span>
          </SectionTitle>
          <p className="reveal" style={{
            marginTop: 20, fontSize: 17, lineHeight: 1.55,
            color: "var(--fg-muted)",
            maxWidth: 560, marginInline: "auto", textWrap: "pretty",
          }}>
            We're two devs. We can't ship five platforms in parallel. Vote and we'll prioritize. The first platform to hit <strong style={{ color: "white", fontFamily: "var(--font-mono)" }}>1,000 ★</strong> on GitHub gets built next.
          </p>
        </div>

        <div className="reveal" style={{
          marginTop: 48,
          display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12,
        }} className="roadmap-grid">
          {items.map((it) => {
            const has = voted[it.id];
            const pct = (votes[it.id] / total) * 100;
            return (
              <div key={it.id} style={{
                position: "relative", overflow: "hidden",
                padding: "20px 22px", borderRadius: 14,
                background: "var(--bg-elev)",
                border: `1px solid ${has ? it.color + "55" : "var(--line)"}`,
                transition: "border-color 200ms",
              }}>
                {/* progress fill */}
                <div style={{
                  position: "absolute", left: 0, top: 0, bottom: 0, width: `${pct}%`,
                  background: `linear-gradient(90deg, ${it.color}11, transparent)`,
                  pointerEvents: "none",
                }}/>
                <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 14 }}>
                  <div style={{
                    width: 38, height: 38, borderRadius: 10,
                    background: `${it.color}15`, border: `1px solid ${it.color}55`,
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    color: it.color, fontWeight: 700, fontFamily: "var(--font-display)", fontSize: 14,
                  }}>{it.os.slice(0, 2)}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 600, color: "var(--fg)" }}>
                      {it.os}
                    </div>
                    <div style={{ fontSize: 12, color: "var(--fg-faint)", marginTop: 2 }}>
                      {it.sub}
                    </div>
                  </div>
                  <button onClick={() => {
                    if (has) return;
                    setVoted({ ...voted, [it.id]: true });
                    setVotes({ ...votes, [it.id]: votes[it.id] + 1 });
                  }} style={{
                    display: "inline-flex", alignItems: "center", gap: 8,
                    padding: "8px 12px", borderRadius: 8,
                    background: has ? `${it.color}22` : "var(--line)",
                    border: `1px solid ${has ? it.color + "88" : "var(--line)"}`,
                    color: has ? it.color : "var(--fg)",
                    fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600,
                    cursor: has ? "default" : "pointer",
                  }}>
                    <span style={{ fontSize: 13 }}>{has ? "✓" : "▲"}</span>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>{votes[it.id].toLocaleString()}</span>
                  </button>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{
          marginTop: 16, fontFamily: "var(--font-mono)", fontSize: 11,
          color: "var(--fg-faint)", textAlign: "center",
        }}>
          {Object.keys(voted).length > 0 ? "thanks · we'll let you know via the github issue" : "votes are stored in your browser, not on our server (because we don't have one)"}
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .roadmap-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.RoadmapSection = RoadmapSection;