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

// Two-track setup: Groq cloud OR Whisper local
function SetupSection() {
  const [track, setTrack] = useSuS("groq");
  return (
    <section style={{ padding: "120px 32px", position: "relative" }}>
      <div className="container-narrow">
        <div style={{ textAlign: "center" }}>
          <Eyebrow num={8} color="#FB923C">two minutes to setup</Eyebrow>
          <div style={{ height: 16 }}/>
          <SectionTitle align="center" maxWidth={780}>
            Pick your engine.<br/><span className="grad-text">Cloud-fast or fully offline.</span>
          </SectionTitle>
          <SectionLead align="center">
            Groq's free tier is genuinely the fastest cloud STT we've benchmarked. Whisper local is fully private and works on a plane. Both are first-class.
          </SectionLead>
        </div>

        <div className="reveal" style={{
          marginTop: 40, display: "inline-flex", padding: 4,
          background: "var(--bg-elev)",
          border: "1px solid var(--line)",
          borderRadius: 10, gap: 4,
        }}>
          {[
            ["groq", "Groq cloud", "fastest"],
            ["local", "Whisper local", "full privacy"],
          ].map(([id, label, sub]) => (
            <button key={id} onClick={() => setTrack(id)} style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "9px 14px", borderRadius: 7,
              background: track === id ? "var(--line)" : "transparent",
              border: 0, color: track === id ? "white" : "var(--fg-muted)",
              fontSize: 13, fontFamily: "var(--font-sans)", fontWeight: track === id ? 600 : 500,
              cursor: "pointer",
            }}>
              {label}
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: track === id ? "#4ADE80" : "var(--fg-faint)" }}>
                {sub}
              </span>
            </button>
          ))}
        </div>

        <div className="reveal" style={{ marginTop: 24 }}>
          {track === "groq" ? <GroqSteps/> : <LocalSteps/>}
        </div>
      </div>
    </section>
  );
}

function StepCard({ n, title, sub, children, color = "#FB923C" }) {
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "auto 1fr", gap: 20,
      padding: "20px 0",
      borderTop: "1px solid var(--line)",
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 99,
        background: `${color}22`, border: `1px solid ${color}88`,
        color, fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        flexShrink: 0,
      }}>{n}</div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 600, color: "var(--fg)", letterSpacing: "-0.01em" }}>
          {title}
        </div>
        {sub && <div style={{ fontSize: 14, color: "var(--fg-faint)", marginTop: 4, lineHeight: 1.5 }}>{sub}</div>}
        <div style={{ marginTop: 14 }}>{children}</div>
      </div>
    </div>
  );
}

function GroqSteps() {
  return (
    <div>
      <StepCard n="1" title="Sign up at console.groq.com" sub="No credit card. Free tier covers ~100k tokens/day, way more than you'll use.">
        <BrowserMock url="console.groq.com">
          <div style={{ padding: 32, textAlign: "center" }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 700, marginBottom: 8 }}>
              Welcome to <span style={{ color: "#FB923C" }}>Groq</span>
            </div>
            <div style={{ fontSize: 13, color: "var(--fg-faint)", marginBottom: 16 }}>
              The fastest LLM inference on the planet.
            </div>
            <a style={{
              display: "inline-block", padding: "10px 20px", borderRadius: 6,
              background: "#FB923C", color: "var(--bg-deep)", textDecoration: "none",
              fontWeight: 600, fontSize: 13,
            }}>Sign in with Google</a>
          </div>
        </BrowserMock>
      </StepCard>

      <StepCard n="2" title="Create an API key">
        <BrowserMock url="console.groq.com/keys">
          <div style={{ padding: 24 }}>
            <div style={{ fontSize: 13, color: "var(--fg-muted)", marginBottom: 12, fontWeight: 600 }}>API Keys</div>
            <div style={{
              padding: "10px 14px", border: "1px solid var(--line)", borderRadius: 8,
              display: "flex", alignItems: "center", gap: 12,
              fontFamily: "var(--font-mono)", fontSize: 12,
              background: "rgba(0,0,0,0.3)",
            }}>
              <span style={{ color: "var(--fg-faint)" }}>name</span>
              <span style={{ color: "var(--fg)" }}>dimmy</span>
              <span style={{ flex: 1 }}/>
              <span style={{
                padding: "4px 8px", background: "#FB923C", color: "var(--bg-deep)",
                borderRadius: 4, fontWeight: 600, fontSize: 11,
              }}>+ Create key</span>
            </div>
            <div style={{
              marginTop: 10, padding: "10px 14px",
              background: "rgba(74,222,128,0.08)",
              border: "1px solid rgba(74,222,128,0.2)",
              borderRadius: 8,
              fontFamily: "var(--font-mono)", fontSize: 12,
              color: "#4ADE80",
            }}>
              gsk_•••••••••••••••••••••••••••••••• 7Hk2
            </div>
          </div>
        </BrowserMock>
      </StepCard>

      <StepCard n="3" title="Paste it into Dimmy" sub="Settings → Transcription → Cloud (optional) → Groq API key. Encrypted with the OS keychain. Done.">
        <div style={{
          padding: "14px 18px",
          background: "rgba(74,222,128,0.06)",
          border: "1px solid rgba(74,222,128,0.18)",
          borderRadius: 10,
          display: "flex", alignItems: "center", gap: 12,
        }}>
          <span style={{ fontSize: 18 }}>⚡</span>
          <div style={{ fontSize: 13, color: "rgba(255,255,255,0.78)", lineHeight: 1.5 }}>
            That's it. Round-trip latency drops to <strong style={{ color: "#4ADE80", fontFamily: "var(--font-mono)" }}>~180ms</strong>. Your machine does zero compute.
          </div>
        </div>
      </StepCard>
    </div>
  );
}

function LocalSteps() {
  return (
    <div>
      <StepCard n="1" title="Download Dimmy" sub="One installer, ~12 MB. No account. Opt-out telemetry. No postcard from us." color="#34D399">
        <div style={{
          padding: "14px 18px", background: "var(--bg-elev)",
          border: "1px solid var(--line)", borderRadius: 10,
          fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-faint)",
        }}>
          <span style={{ color: "#4ADE80" }}>$</span> brew install --cask dimmy
          <br/>
          <span style={{ color: "var(--fg-faint)" }}>↳ Downloading Dimmy 1.4.0 (12 MB)…</span>
        </div>
      </StepCard>

      <StepCard n="2" title="Open it. Let it pull the Whisper model" sub="78 MB, one-time download. Quantized large-v3-turbo. After this, no internet needed." color="#34D399">
        <div style={{
          padding: 18, borderRadius: 12,
          background: "var(--bg-elev)", border: "1px solid var(--line)",
          display: "flex", alignItems: "center", gap: 14,
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: 10,
            backgroundImage: "url(assets/icon_1024.png)",
            backgroundSize: "contain", backgroundRepeat: "no-repeat",
          }}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, color: "var(--fg)", fontWeight: 500 }}>
              Downloading whisper-large-v3-turbo…
            </div>
            <div style={{ height: 4, background: "var(--line)", borderRadius: 99, marginTop: 8, overflow: "hidden" }}>
              <div style={{ height: "100%", width: "72%", background: "linear-gradient(90deg, #34D399, #38BDF8)", borderRadius: 99 }}/>
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-faint)", marginTop: 6 }}>
              56.4 / 78.0 MB · 18 MB/s
            </div>
          </div>
        </div>
      </StepCard>

      <StepCard n="3" title="Speak. Anywhere. Forever." sub="No subscription, no key, no cloud. Works on a plane, in a tunnel, on a 2018 ThinkPad." color="#34D399">
        <div style={{
          padding: "14px 18px",
          background: "rgba(52,211,153,0.06)",
          border: "1px solid rgba(52,211,153,0.18)",
          borderRadius: 10,
          display: "flex", alignItems: "center", gap: 12,
        }}>
          <span style={{ fontSize: 18 }}>🛩️</span>
          <div style={{ fontSize: 13, color: "rgba(255,255,255,0.78)", lineHeight: 1.5 }}>
            The 78 MB model gets you 99 languages, real-time speed, and zero recurring cost.
          </div>
        </div>
      </StepCard>
    </div>
  );
}

function BrowserMock({ url, children }) {
  return (
    <div style={{
      borderRadius: 12, overflow: "hidden",
      border: "1px solid var(--line)",
      background: "var(--bg-elev)",
    }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 10, padding: "8px 12px",
        background: "var(--bg-elev)",
        borderBottom: "1px solid var(--line)",
      }}>
        <span style={{ display: "inline-flex", gap: 6 }}>
          <i style={{ width: 10, height: 10, borderRadius: 99, background: "#FF5F57" }}/>
          <i style={{ width: 10, height: 10, borderRadius: 99, background: "#FEBC2E" }}/>
          <i style={{ width: 10, height: 10, borderRadius: 99, background: "#28C840" }}/>
        </span>
        <span style={{
          flex: 1, padding: "4px 10px", borderRadius: 6,
          background: "rgba(0,0,0,0.4)",
          fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-faint)",
          textAlign: "center",
        }}>
          🔒 {url}
        </span>
      </div>
      <div>{children}</div>
    </div>
  );
}

window.SetupSection = SetupSection;