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

const JOURNEY_STEPS = [
  {
    num: "01", title: "You describe it.", sub: "The AI builds it.",
    body: "Talk to it like you'd talk to a friend who codes. It builds the screens, the buttons, the logic — whatever your idea needs.",
    demo: "describe",
  },
  {
    num: "02", title: "It goes live.", sub: "The AI puts it online.",
    body: "Logins, saving your stuff, hosting — handled. You get a live link from minute one. Share it. Show your friends. It just works.",
    demo: "live",
  },
  {
    num: "03", title: "It gets seen.", sub: "The AI markets it.",
    body: "Posts, emails, social — written, scheduled, and shipped on autopilot. The tone matches your brand because you trained it talking to your AI.",
    demo: "seen",
  },
  {
    num: "04", title: "It gets customers.", sub: "Your first 100.",
    body: "Through our Google partnership, Vibn helps the right people find your product when they're searching for what you built.",
    demo: "customers",
  },
];

export default function Journey() {
  return (
    <section id="how" className="relative py-[clamp(80px,11vh,140px)]">
      <div className="wrap">
        <div className="text-center max-w-[820px] mx-auto mb-16">
          <Eyebrow>The journey</Eyebrow>
          <h2 className="mt-[18px] font-medium text-[clamp(36px,4.8vw,64px)] tracking-[-0.025em] leading-[1.02] text-balance">
            From idea to first 100 customers.
            <br /><span className="text-accent">In one chat.</span>
          </h2>
          <p className="mt-5 text-fg-mute text-[17px] text-balance">
            Other tools take you to step two and wave goodbye. Vibn keeps building with you.
          </p>
        </div>

        <div className="relative grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
          {/* "Where everyone else stops" — only meaningful on the 4-col layout */}
          <div className="hidden xl:flex absolute inset-y-0 flex-col items-center pointer-events-none z-[2]"
               style={{ left: "calc(50% - 1px)", width: 16 }}>
            <div className="flex-1 w-px" style={{
              background: "repeating-linear-gradient(180deg, var(--c-accent) 0 6px, transparent 6px 12px)",
              opacity: .7,
            }}/>
            <span className="font-mono text-[10px] uppercase tracking-[0.12em] text-accent bg-bg px-3 py-1.5 rounded-full border whitespace-nowrap"
                  style={{
                    borderColor: "oklch(0.74 0.175 35 / 0.5)",
                    boxShadow: "0 0 24px var(--c-accent-glow)",
                    transform: "translateY(-1px)",
                  }}>
              ↑ Where every other tool stops
            </span>
            <div className="flex-1 w-px" style={{
              background: "repeating-linear-gradient(180deg, var(--c-accent) 0 6px, transparent 6px 12px)",
              opacity: .7,
            }}/>
          </div>

          {JOURNEY_STEPS.map((s, i) => (
            <StepCard key={s.num} step={s} stopped={i >= 2} />
          ))}
        </div>

        <p className="mt-12 text-center text-fg-mute text-[15px] text-balance">
          <b className="text-fg font-medium">One tool. One chat.</b> From "wouldn't it be cool if…" to{" "}
          <b className="text-fg font-medium">real customers paying you money.</b>
        </p>
      </div>
    </section>
  );
}

function StepCard({ step, stopped }) {
  return (
    <div className={[
      "relative flex flex-col rounded-2xl border border-hairline overflow-hidden isolate min-h-[380px] pt-6 px-6",
      stopped ? "opacity-[0.46]" : "",
    ].join(" ")}
      style={{ background: "linear-gradient(180deg, oklch(0.20 0.009 60 / 0.55), oklch(0.17 0.008 60 / 0.55))" }}
    >
      {!stopped && (
        <span className="absolute top-0 left-0 right-0 h-px opacity-70"
              style={{ background: "linear-gradient(90deg, transparent, var(--c-accent) 50%, transparent)" }} />
      )}
      {stopped && (
        <span aria-hidden="true" className="absolute inset-0 pointer-events-none"
              style={{ background: "linear-gradient(180deg, transparent 40%, oklch(0.155 0.008 60 / 0.6))" }} />
      )}
      <div className="font-mono text-[11px] text-fg-faint tracking-[0.08em]">{step.num}</div>
      <h3 className="mt-3 text-[22px] font-medium tracking-[-0.018em]">{step.title}</h3>
      <div className={`mt-1 text-[15px] font-medium ${stopped ? "text-fg-mute" : "text-accent"}`}>{step.sub}</div>
      <p className="mt-3 text-fg-dim text-[14px] leading-[1.55]">{step.body}</p>
      <StepDemo demo={step.demo} />
    </div>
  );
}

function StepDemo({ demo }) {
  const wrapStyle = "mt-auto -mx-6 px-[18px] py-4 border-t border-hairline font-mono text-[12px] leading-[1.55] text-fg-dim flex flex-col gap-[7px] min-h-[116px]";
  const wrapBg = { background: "oklch(0.16 0.008 60 / 0.6)" };

  if (demo === "describe") return (
    <div className={wrapStyle} style={wrapBg}>
      <DemoRow tag="YOU" tagKind="you">build a booking site for my dog grooming biz</DemoRow>
      <DemoRow tag="VIBN" tagKind="ai">on it — designing screens…</DemoRow>
      <DemoRow tag="VIBN" tagKind="ai" align="center"><span className="text-ok">✓ booking flow ready</span></DemoRow>
    </div>
  );
  if (demo === "live") return (
    <div className={wrapStyle} style={wrapBg}>
      <DemoRow tag="VIBN" tagKind="ai" align="center">put it online</DemoRow>
      <div className="h-1 rounded-full overflow-hidden relative" style={{ background: "oklch(0.25 0.01 60)" }}>
        <span className="absolute inset-0 w-[64%]" style={{ background: "var(--c-accent)", boxShadow: "0 0 8px var(--c-accent-glow)" }} />
      </div>
      <div className="flex items-center gap-1.5 mt-0.5 text-fg-dim">
        <i className="w-1.5 h-1.5 rounded-full" style={{ background: "var(--c-ok)", boxShadow: "0 0 6px oklch(0.78 0.16 155 / 0.6)" }} />
        pawsandposh.vibn.app
      </div>
      <div><span className="text-ok">✓ logins · ✓ saving · ✓ live</span></div>
    </div>
  );
  if (demo === "seen") return (
    <div className={wrapStyle} style={wrapBg}>
      <DemoRow tag="VIBN" tagKind="ai">draft a launch post for Instagram + email blast</DemoRow>
      <div className="text-fg-faint">↳ scheduled for Tue 9:00 AM</div>
      <div className="text-fg-faint">↳ scheduled for Thu 6:00 PM</div>
      <div><span className="text-ok">✓ 3 channels on autopilot</span></div>
    </div>
  );
  if (demo === "customers") return (
    <div className={wrapStyle} style={wrapBg}>
      <div className="flex items-center">
        <span className="font-mono text-[22px] font-medium text-accent tracking-[-0.02em]">
          +47<small className="text-fg-mute text-[11px] font-normal ml-1">this week</small>
        </span>
      </div>
      <div className="flex items-center gap-2">
        {["35", "260", "155", "80"].map((h) => (
          <span key={h} className="w-4 h-4 rounded-full shrink-0" style={{ background: `oklch(0.55 0.14 ${h})` }} />
        ))}
        <span className="text-fg-mute">found you via Google</span>
      </div>
      <div><span className="text-ok">✓ tracking toward 100</span></div>
    </div>
  );
  return null;
}

function DemoRow({ tag, tagKind, align, children }) {
  const styles = tagKind === "you"
    ? { color: "oklch(0.85 0.06 250)", background: "oklch(0.28 0.04 250)" }
    : tagKind === "ai"
    ? { color: "var(--c-accent)", background: "oklch(0.35 0.10 35 / 0.4)" }
    : { color: "var(--c-fg-faint)", background: "oklch(0.22 0.01 60)" };
  return (
    <div className={`flex gap-2 ${align === "center" ? "items-center" : "items-start"}`}>
      <span className="font-mono text-[10px] px-1.5 py-px rounded shrink-0 tracking-[0.04em] mt-px" style={styles}>{tag}</span>
      <span className="text-fg-dim">{children}</span>
    </div>
  );
}
