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

// =============================================================
// TwoPassSection: deep-dive on the local Whisper + local Gemma pipeline.
// Sits between HowItWorks (high-level pipeline) and Speed (latency proof).
// Two named passes (Transcribe / Enhance) with the model credit kept small
// so the marketing message lands before the spec sheet.
// =============================================================
function TwoPassSection() {
  const RAW = "hey can you draft a quick reply saying we are aligned and we want to ship by friday";
  const POLISHED = "Hey, can you draft a quick reply saying we're aligned and want to ship by Friday.";

  return (
    <section style={{ padding: "120px 32px", position: "relative" }}>
      <div className="container">
        <div style={{ textAlign: "center" }}>
          <Eyebrow color="#A78BFA">two passes · both local</Eyebrow>
          <div style={{ height: 16 }}/>
          <SectionTitle align="center" maxWidth={820}>
            Transcribe.<br/>
            <span className="grad-text">Then enhance.</span>
          </SectionTitle>
          <SectionLead align="center" maxWidth={620}>
            Two models work back-to-back on your laptop. One catches every word, the other makes it read like you wrote it. No API key, no login, no audio leaving your machine.
          </SectionLead>
        </div>

        {/* Two cards + middle arrow showing the data flow */}
        <div className="two-pass-grid" style={{
          marginTop: 56,
          display: "grid",
          gridTemplateColumns: "1fr auto 1fr",
          gap: 16,
          alignItems: "stretch",
          maxWidth: 1080, marginInline: "auto",
        }}>
          <PassCard
            num={1}
            color="#38BDF8"
            colorSoft="rgba(56,189,248,0.10)"
            label="Transcribe"
            tagline="Catch every word, in any of 99 languages."
            poweredBy="Whisper Large v3 Turbo"
            badges={["Offline", "Sub-second", "99 languages"]}
            sampleLabel="raw transcript"
            sample={RAW}
            messy
          />
          <PassArrow/>
          <PassCard
            num={2}
            color="#A78BFA"
            colorSoft="rgba(167,139,250,0.10)"
            label="Enhance"
            tagline="Polish the punctuation, fix the grammar, switch the tone."
            poweredBy="Google Gemma 4 · runs offline"
            badges={["13 styles", "No API key", "Yours to keep"]}
            sampleLabel="enhanced output"
            sample={POLISHED}
          />
        </div>

        {/* Local-only assurance strip */}
        <div className="reveal" style={{
          marginTop: 24, padding: "14px 24px",
          background: "rgba(74,222,128,0.06)",
          border: "1px solid rgba(74,222,128,0.18)",
          borderRadius: 12,
          display: "flex", flexWrap: "wrap", justifyContent: "center", alignItems: "center",
          gap: "8px 28px",
          fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-muted)",
        }}>
          <LocalDot/><span>on your machine</span>
          <LocalDot/><span>0 cloud calls</span>
          <LocalDot/><span>0 API keys required</span>
          <LocalDot/><span>works on a plane</span>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .two-pass-grid { grid-template-columns: 1fr !important; }
          .two-pass-arrow { transform: rotate(90deg); padding: 8px 0 !important; }
        }
      `}</style>
    </section>
  );
}

function PassCard({ num, color, colorSoft, label, tagline, poweredBy, badges, sampleLabel, sample, messy }) {
  return (
    <div className="reveal" style={{
      position: "relative",
      padding: "30px 24px 24px",
      borderRadius: 18,
      background: `linear-gradient(180deg, ${colorSoft}, transparent)`,
      border: `1px solid ${color}33`,
      display: "flex", flexDirection: "column", gap: 16,
      boxShadow: `0 20px 60px ${color}10`,
    }}>
      <div style={{
        position: "absolute", top: -11, left: 22,
        padding: "4px 10px", borderRadius: 99,
        background: color, color: "var(--bg-deep)",
        fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 700,
        letterSpacing: "0.10em",
        boxShadow: `0 4px 12px ${color}55`,
      }}>PASS {num}</div>

      <div>
        <div style={{
          fontFamily: "var(--font-display)",
          fontSize: 30, fontWeight: 700,
          letterSpacing: "-0.01em",
          color: "var(--fg)",
          lineHeight: 1.05,
        }}>{label}</div>
        <div style={{
          marginTop: 8,
          fontSize: 15, lineHeight: 1.45,
          color: "var(--fg-muted)",
          textWrap: "pretty",
        }}>{tagline}</div>
      </div>

      <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
        {badges.map((b, i) => (
          <span key={i} style={{
            padding: "4px 10px", borderRadius: 99,
            background: "var(--bg-elev)",
            border: `1px solid ${color}33`,
            fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 500,
            color: "var(--fg-muted)",
          }}>{b}</span>
        ))}
      </div>

      <div style={{
        marginTop: "auto",
        padding: "14px 16px",
        background: "rgba(0,0,0,0.35)",
        border: `1px solid ${color}22`,
        borderRadius: 10,
        fontSize: 14, lineHeight: 1.5,
        fontFamily: "var(--font-sans)",
        color: messy ? "var(--fg-muted)" : "var(--fg)",
        textWrap: "pretty",
      }}>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-faint)",
          letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 6,
        }}>{sampleLabel}</div>
        <span style={{ fontStyle: messy ? "italic" : "normal" }}>"{sample}"</span>
      </div>

      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 10,
        color: "var(--fg-faint)",
        letterSpacing: "0.04em",
      }}>
        <span style={{ opacity: 0.6 }}>powered by</span>{" "}
        <span style={{ color: "var(--fg-muted)" }}>{poweredBy}</span>
      </div>
    </div>
  );
}

function PassArrow() {
  return (
    <div className="two-pass-arrow" style={{
      display: "flex", alignItems: "center", justifyContent: "center",
      padding: "0 4px",
      color: "var(--fg-faint)",
    }}>
      <svg width="36" height="36" viewBox="0 0 36 36" fill="none" aria-hidden="true">
        <path d="M6 18 H28 M22 12 L28 18 L22 24"
          stroke="currentColor" strokeWidth="1.6"
          strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </div>
  );
}

function LocalDot() {
  return <span style={{
    display: "inline-block", width: 6, height: 6, borderRadius: 99,
    background: "#4ADE80", boxShadow: "0 0 6px #4ADE80",
    flexShrink: 0,
  }}/>;
}

window.TwoPassSection = TwoPassSection;