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

function ManifestoSection() {
  return (
    <section style={{ padding: "120px 32px", position: "relative", overflow: "hidden" }}>
      {/* Tricolore subtle accent */}
      <div style={{
        position: "absolute", top: 80, right: -80, width: 280, height: 280,
        background: "conic-gradient(from 90deg, #009246 0deg 33%, #FFFFFF 33% 66%, #CE2B37 66% 100%)",
        filter: "blur(80px)", opacity: 0.08,
        borderRadius: "50%", pointerEvents: "none",
      }}/>

      <div className="container-narrow" style={{ position: "relative" }}>
        <Eyebrow num={11} color="#34D399">manifesto</Eyebrow>
        <div style={{ height: 16 }}/>
        <h2 className="reveal" style={{
          fontFamily: "var(--font-display)", fontSize: "clamp(36px, 5vw, 64px)",
          fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.05,
          margin: 0, color: "var(--fg)", textWrap: "balance",
        }}>
          We built Dimmy<br/>
          <span style={{ color: "var(--fg-faint)" }}>because we</span> <span className="grad-text">were tired.</span>
        </h2>

        <div className="reveal manifesto-body" style={{
          marginTop: 32,
          fontSize: 17, lineHeight: 1.65, color: "var(--fg-muted)",
          maxWidth: 720,
        }}>
          <p style={{ margin: 0, textWrap: "pretty" }}>
            Tired of voice apps that take 8 seconds to wake up, weigh 200 MB, and want a subscription to do something a hotkey should do. Tired of giving our voice to a server we'll never see.
          </p>
          <p style={{ marginTop: 18, textWrap: "pretty" }}>
            So we wrote it native. SwiftUI on macOS, WinUI 3 on Windows, GTK4 on Linux, a shared Rust core for the parts that matter. The whole thing is <strong style={{ color: "var(--fg)" }}>12 MB</strong>, boots in <strong style={{ color: "var(--fg)" }}>80ms</strong>, and the source is <strong style={{ color: "var(--fg)" }}>public on GitHub</strong>.
          </p>
          <p style={{ marginTop: 18, textWrap: "pretty" }}>
            Audio never touches disk. Audio never leaves your machine, unless <em>you</em> turn on a cloud provider. In that case your key sleeps in the OS keychain, and you can revoke it whenever.
          </p>
          <p style={{ marginTop: 22, fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--fg-faint)", textWrap: "pretty" }}>
            Made with espresso in Milano. <span style={{ color: "var(--fg-muted)" }}>/ˈdɪmmi/</span>: "tell me", in Italian.
          </p>
        </div>

        <div className="reveal" style={{
          marginTop: 40, display: "flex", alignItems: "center", gap: 28,
          padding: "20px 24px", borderRadius: 16,
          background: "var(--bg-elev)",
          border: "1px solid var(--line)",
          flexWrap: "wrap",
        }}>
          {/* Two human devs (placeholder photos) + Claude Code as third teammate */}
          <DevTile photoSlot name="Konrad" role="rust + macos + caffeine"/>
          <DevTile photoSlot name="dev #2" role="windows + linux + cold brew"/>
          <DevTile claudeCode name="Claude Code" role="pair-programmed half of this"/>

          <div style={{ flex: 1 }}/>
          <a href="https://github.com/sponsors/KonradDallaOrg" style={{
            padding: "8px 14px", borderRadius: 8,
            border: "1px solid var(--line-strong)",
            color: "var(--fg)", textDecoration: "none",
            fontSize: 13, fontFamily: "var(--font-sans)", fontWeight: 500,
            display: "inline-flex", alignItems: "center", gap: 8,
          }}>
            <span style={{ color: "#F472B6" }}>♥</span> Sponsor on GitHub
          </a>
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .manifesto-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// =============================================================
// DevTile: avatar + name + role.
//   photoSlot = greyscale silhouette placeholder (drop a real photo later
//               by replacing the inner SVG with an <img src=...>).
//   claudeCode = Anthropic mark + "Claude Code" wordmark.
// =============================================================
function DevTile({ photoSlot, claudeCode, name, role }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <div style={{
        width: 44, height: 44, borderRadius: 99,
        overflow: "hidden", flexShrink: 0,
        background: claudeCode
          ? "#1F1F1F"
          : "linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02))",
        border: claudeCode ? "1px solid rgba(213,119,76,0.45)" : "1px dashed rgba(255,255,255,0.18)",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        position: "relative",
      }}>
        {photoSlot && <PhotoSilhouette/>}
        {claudeCode && <ClaudeMark/>}
      </div>
      <div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 600 }}>{name}</div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-faint)" }}>{role}</div>
      </div>
    </div>
  );
}

// Silhouette placeholder. Looks like a photo slot waiting for a real photo.
// Drop a real photo by replacing this with: <img src=".../photo.jpg" .../>
function PhotoSilhouette() {
  return (
    <svg width="44" height="44" viewBox="0 0 44 44" aria-hidden="true">
      <rect width="44" height="44" fill="rgba(255,255,255,0.04)"/>
      <circle cx="22" cy="17" r="7" fill="rgba(255,255,255,0.18)"/>
      <path d="M6 44 Q6 30 22 30 Q38 30 38 44 Z" fill="rgba(255,255,255,0.18)"/>
    </svg>
  );
}

// Claude Code mark — the asterisk burst that Claude (and the Claude Code
// CLI) use, ships from Simple Icons under the "claude" slug with coral as
// the native fill (not the corporate Anthropic "A"). Falls back to a coral
// "C" if the CDN fails.
function ClaudeMark() {
  const [failed, setFailed] = React.useState(false);
  if (failed) {
    return (
      <span style={{
        fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18,
        color: "#D97757", letterSpacing: "-0.02em",
      }}>C</span>
    );
  }
  return (
    <img
      src="https://cdn.simpleicons.org/claude"
      alt="Claude Code"
      width="24" height="24"
      onError={() => setFailed(true)}
      style={{ display: "block" }}
    />
  );
}

window.ManifestoSection = ManifestoSection;
