import { Eyebrow } from "../lib/primitives.jsx";

export default function Wall() {
  return (
    <section id="the-wall" className="relative py-[clamp(60px,9vh,110px)]">
      <div className="wrap">
        <div className="text-center max-w-[760px] mx-auto mb-14">
          <Eyebrow>The wall</Eyebrow>
          <h2 className="mt-[18px] font-medium text-[clamp(36px,4.8vw,64px)] tracking-[-0.025em] leading-[1.02] text-balance">
            Every other tool stops{" "}
            <em className="not-italic text-accent" style={{ textShadow: "0 0 30px var(--c-accent-glow)" }}>
              right here
            </em>.
          </h2>
          <p className="mt-5 text-fg-mute text-[17px] text-balance">
            You built it. It works on your laptop. Then the chat hands you a list.
          </p>
        </div>

        {/* Faux app window */}
        <div className="relative max-w-[880px] mx-auto rounded-2xl border border-hairline overflow-hidden backdrop-blur-md"
             style={{ background: "oklch(0.165 0.008 60 / 0.85)", boxShadow: "0 30px 80px -20px oklch(0 0 0 / 0.6)" }}>
          <WindowBar />
          <div className="p-6 flex flex-col gap-4">
            <Msg who="user" name="You · just now" body="okay it works!! how do i put this online so my customers can use it?" />
            <Msg who="ai" name="Generic AI · just now" body={<HomeworkBody />} />
            <Msg who="user" name="You · now" body={<Typing />} muted />
          </div>
        </div>

        {/* Punchline */}
        <div className="mt-14 text-center">
          <div className="w-px h-14 mx-auto mb-7"
               style={{ background: "linear-gradient(180deg, transparent, var(--c-hairline), transparent)" }} />
          <p className="font-medium tracking-[-0.022em] leading-[1.2] text-balance text-fg-mute text-[clamp(28px,3.4vw,42px)]">
            And just like that — <em className="italic text-fg">the vibe is gone.</em>
          </p>
        </div>
      </div>
    </section>
  );
}

function WindowBar() {
  return (
    <div className="flex items-center gap-3.5 px-3.5 py-[11px] border-b border-hairline font-mono text-[12px] text-fg-mute"
         style={{ background: "oklch(0.20 0.009 60 / 0.85)" }}>
      <div className="flex gap-[7px]">
        <i className="w-[11px] h-[11px] rounded-full" style={{ background: "oklch(0.40 0.01 60)" }} />
        <i className="w-[11px] h-[11px] rounded-full" style={{ background: "oklch(0.40 0.01 60)" }} />
        <i className="w-[11px] h-[11px] rounded-full" style={{ background: "oklch(0.40 0.01 60)" }} />
      </div>
      <span className="ml-2 text-fg-faint tracking-[0.02em]">untitled-project · main</span>
      <span className="ml-auto px-2 py-0.5 rounded text-fg-faint text-[11px]" style={{ background: "oklch(0.25 0.01 60)" }}>
        generic ai coder · chat
      </span>
    </div>
  );
}

function Msg({ who, name, body, muted }) {
  return (
    <div className="flex gap-3 items-start text-[14.5px] leading-[1.55]">
      <div className={[
        "w-[26px] h-[26px] rounded-[7px] grid place-items-center font-mono text-[11px] font-semibold shrink-0",
        who === "user" ? "" : "",
      ].join(" ")}
        style={who === "user"
          ? { background: "oklch(0.28 0.01 60)", color: "var(--c-fg-dim)" }
          : { background: "oklch(0.30 0.02 250)", color: "oklch(0.85 0.06 250)" }
        }>
        {who === "user" ? "YOU" : "AI"}
      </div>
      <div className="flex-1 min-w-0">
        <div className="font-mono text-[11px] text-fg-faint tracking-[0.04em] uppercase mb-0.5">{name}</div>
        <div className={who === "user" && !muted ? "text-fg" : "text-fg-dim"}>{body}</div>
      </div>
    </div>
  );
}

function HomeworkBody() {
  const items = [
    ["Sign up for Supabase", "and create a project for your database."],
    ["Configure authentication", "with Supabase Auth or Clerk — pick one."],
    ["Create a GitHub repo", ", commit your code, and push it."],
    ["Deploy to Vercel", ": connect repo, configure framework preset."],
    ["Add environment variables", "for your API keys and DB url in the Vercel dashboard."],
    ["Set up DNS", "for your custom domain and verify nameservers with your registrar."],
    ["Configure SSL / TLS certificates", "for HTTPS (or use Vercel's automatic provisioning)."],
    ["Set up Stripe", "if you want to take payments, and configure webhooks."],
  ];
  // Per-row fade values for "overload" feeling
  const opacities = [1, 1, 1, 0.82, 0.65, 0.48, 0.34, 0.22];
  const blurs    = [0, 0, 0, 0,    0,    0.2,  0.4,  0.7];
  return (
    <>
      <p className="text-fg-dim">Great job 🎉  Your app is running locally. To take it live, you'll need to set a few things up first:</p>
      <ol className="list-none p-0 mt-3 flex flex-col gap-2">
        {items.map(([title, rest], i) => (
          <li key={i}
            className="flex items-start gap-3 px-3.5 py-3 rounded-[10px] border border-hairline text-fg-dim text-[13.5px] transition-opacity"
            style={{
              background: "oklch(0.20 0.009 60)",
              opacity: opacities[i],
              filter: blurs[i] ? `blur(${blurs[i]}px)` : "none",
            }}
          >
            <span className="font-mono text-[11px] text-fg-faint px-1.5 py-px rounded shrink-0"
                  style={{ background: "oklch(0.16 0.008 60)" }}>
              {String(i + 1).padStart(2, "0")}
            </span>
            <span>
              <b className="text-fg font-medium">{title}</b> {rest}
            </span>
            <span className="ml-auto font-mono text-[11px] text-fg-faint px-[7px] py-px border border-hairline rounded shrink-0">
              ↗ external
            </span>
          </li>
        ))}
      </ol>
      <div className="-mt-2.5 pt-[30px] font-mono text-[11px] text-fg-faint text-center"
           style={{ background: "linear-gradient(180deg, transparent, oklch(0.165 0.008 60 / 0.85))" }}>
        ↓ 23 more steps
      </div>
    </>
  );
}

function Typing() {
  return (
    <span className="inline-flex gap-[3px] items-center py-1 text-fg-mute">
      {[0, 1, 2].map((i) => (
        <i key={i}
           className="w-[5px] h-[5px] rounded-full bg-fg-mute"
           style={{ animation: `bounce-dot 1.2s ${i * 0.15}s infinite ease-in-out` }} />
      ))}
    </span>
  );
}
