import type { CSSProperties } from "react";
import Link from "next/link";

/**
 * Body sections from justine/01_homepage.html — inline styles + classes match the source file.
 * Lives under [data-justine]; tokens are --ink, --mid, --muted, --border, --white (see 01-homepage.css).
 */
export function JustineHomePage() {
  return (
    <>
      <section
        className="hero-section"
        style={{ maxWidth: 980, margin: "0 auto", padding: "88px 52px 72px" }}
      >
        <div className="hero-grid">
          <div>
            <div
              style={{
                fontSize: 11,
                fontWeight: 600,
                letterSpacing: "0.13em",
                textTransform: "uppercase",
                color: "var(--muted)",
                marginBottom: 22,
              }}
            >
              For non-technical founders
            </div>
            <h1
              className="f hero-h1"
              style={{
                fontSize: 58,
                fontWeight: 700,
                color: "var(--ink)",
                letterSpacing: "-0.03em",
                lineHeight: 1.06,
                marginBottom: 28,
              }}
            >
              You have the idea.
              <br />
              We handle
              <br />
              <em className="gradient-em">everything else.</em>
            </h1>
            <p className="hero-sub" style={{ fontSize: 17, color: "var(--mid)", lineHeight: 1.75 }}>
              You describe it. Vibn builds it, launches it, and markets it. From idea to{" "}
              <strong style={{ color: "var(--ink)" }}>live</strong> product in{" "}
              <strong style={{ color: "var(--ink)" }}>72 hours</strong> — no code, no agencies, no
              waiting.
            </p>
          </div>

          <div style={{ flexShrink: 0 }}>
            <div
              style={{
                background: "var(--white)",
                border: "1px solid var(--border)",
                borderRadius: 16,
                overflow: "hidden",
                boxShadow: "0 20px 60px rgba(30,27,75,0.05)",
              }}
            >
              <div
                style={{
                  padding: "24px 26px 20px",
                  background: "#FCFCFF",
                  borderBottom: "1px solid var(--border)",
                }}
              >
                <div
                  style={{
                    fontSize: 10,
                    fontWeight: 600,
                    letterSpacing: "0.12em",
                    textTransform: "uppercase",
                    color: "var(--muted)",
                    marginBottom: 12,
                  }}
                >
                  Your idea
                </div>
                <p
                  className="f"
                  style={{
                    fontSize: 15,
                    fontStyle: "italic",
                    color: "var(--ink)",
                    lineHeight: 1.65,
                    marginBottom: 14,
                  }}
                >
                  &quot;I want to build a booking tool for independent personal trainers.&quot;
                </p>
                <div style={{ display: "flex", justifyContent: "flex-end" }}>
                  <span
                    style={{
                      fontSize: 11,
                      color: "var(--muted)",
                      background: "var(--white)",
                      border: "1px solid var(--border)",
                      borderRadius: 5,
                      padding: "3px 9px",
                      letterSpacing: "0.04em",
                    }}
                  >
                    ↵ Enter
                  </span>
                </div>
              </div>
              <div style={{ padding: "20px 26px 24px", background: "var(--white)" }}>
                <div
                  style={{
                    fontSize: 10,
                    fontWeight: 600,
                    letterSpacing: "0.12em",
                    textTransform: "uppercase",
                    color: "var(--muted)",
                    marginBottom: 16,
                  }}
                >
                  vibn generated
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
                  {[
                    ["Pages", "Landing, Dashboard, Booking, Payments"],
                    ["Stack", "Auth, database, payments — handled"],
                    ["Revenue", "Subscription · $29 / mo"],
                  ].map(([k, v]) => (
                    <div
                      key={k}
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "baseline",
                        padding: "10px 0",
                        borderBottom: "1px solid var(--border)",
                      }}
                    >
                      <span style={{ fontSize: 12, color: "var(--muted)", fontWeight: 500 }}>{k}</span>
                      <span style={{ fontSize: 13, color: "var(--ink)", fontWeight: 600 }}>{v}</span>
                    </div>
                  ))}
                  <div
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "baseline",
                      padding: "10px 0",
                    }}
                  >
                    <span style={{ fontSize: 12, color: "var(--muted)", fontWeight: 500 }}>Status</span>
                    <span style={{ fontSize: 13, fontWeight: 600, color: "#6366F1" }}>
                      ⬤&nbsp; Ready to build
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            textAlign: "center",
            gap: 10,
            marginTop: 52,
          }}
        >
          <Link href="/auth">
            <button type="button" className="btn-ink-lg">
              Start free — no code needed
            </button>
          </Link>
          <div>
            <span style={{ fontSize: 13.5, color: "#818CF8" }}>★★★★★</span>
            <span style={{ fontSize: 13.5, color: "var(--stone)" }}>
              &nbsp;&nbsp;280 founders launched
            </span>
          </div>
          <p style={{ fontSize: 12, color: "#9CA3AF" }}>No credit card required · Free forever plan</p>
          <Link
            href="/#how-it-works"
            style={{
              fontSize: 13.5,
              color: "#6366F1",
              textDecoration: "none",
              fontWeight: 500,
              marginTop: 4,
            }}
          >
            See how it works →
          </Link>
        </div>
      </section>

      <section
        className="empathy-section"
        style={{ borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)", padding: "80px 52px" }}
      >
        <div style={{ maxWidth: 980, margin: "0 auto" }}>
          <div className="empathy-grid">
            <div>
              <div
                style={{
                  fontSize: 11,
                  fontWeight: 600,
                  letterSpacing: "0.13em",
                  textTransform: "uppercase",
                  color: "var(--muted)",
                  marginBottom: 18,
                }}
              >
                Sound familiar?
              </div>
              <h2
                className="f"
                style={{
                  fontSize: 36,
                  fontWeight: 700,
                  color: "#1A1A1A",
                  lineHeight: 1.18,
                  marginBottom: 24,
                  letterSpacing: "-0.02em",
                }}
              >
                The idea is the hard part.{" "}
                <span className="gradient-text">Everything else shouldn&apos;t be.</span>
              </h2>
              <p style={{ fontSize: 15, color: "var(--mid)", lineHeight: 1.82, marginBottom: 20 }}>
                You know exactly what you want to build and who it&apos;s for. But the moment you
                think about servers, databases, deployment pipelines, SEO — the whole thing stalls.
              </p>
              <p style={{ fontSize: 15, color: "var(--mid)", lineHeight: 1.82 }}>
                vibn exists to remove all of that. Not abstract it —{" "}
                <em className="f" style={{ fontStyle: "italic" }}>
                  remove it entirely.
                </em>
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                {
                  t: `No more "I need to hire a developer first"`,
                  d: "vibn is your developer. Start building the moment you have an idea.",
                },
                {
                  t: "No more staring at a blank marketing calendar",
                  d: "AI generates and publishes your content every single week.",
                },
                {
                  t: `No more "I'll launch when it's ready"`,
                  d: "Most founders ship their first version in under 72 hours.",
                },
              ].map((row) => (
                <div key={row.t} className="empathy-card">
                  <div
                    style={{
                      width: 20,
                      height: 20,
                      borderRadius: "50%",
                      border: "1.5px solid rgba(99,102,241,0.4)",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      flexShrink: 0,
                      marginTop: 2,
                    }}
                  >
                    <div
                      style={{
                        width: 7,
                        height: 7,
                        borderRadius: "50%",
                        background: "#6366F1",
                      }}
                    />
                  </div>
                  <div>
                    <div className="f" style={{ fontSize: 14, fontWeight: 600, color: "#1A1A1A", marginBottom: 4 }}>
                      {row.t}
                    </div>
                    <div style={{ fontSize: 13, color: "var(--mid)", lineHeight: 1.7 }}>{row.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section id="how-it-works" className="how-section" style={{ maxWidth: 980, margin: "0 auto", padding: "84px 52px" }}>
        <div
          style={{
            fontSize: 11,
            fontWeight: 600,
            letterSpacing: "0.13em",
            textTransform: "uppercase",
            color: "var(--muted)",
            marginBottom: 16,
          }}
        >
          How it works
        </div>
        <h2
          className="f"
          style={{
            fontSize: 42,
            fontWeight: 700,
            color: "#1A1A1A",
            letterSpacing: "-0.02em",
            marginBottom: 54,
            maxWidth: 480,
            lineHeight: 1.15,
          }}
        >
          Four phases. One <span className="gradient-text">complete</span> product.
        </h2>
        <div className="phase-grid">
          {[
            {
              k: "01 — Discover",
              t: "Define your idea",
              p: "Six guided questions turn a rough idea into a full product plan — pages, architecture, revenue model. No jargon.",
              style: {
                padding: "40px 44px",
                background: "var(--white)",
                borderRight: "1px solid rgba(99,102,241,0.2)",
                borderBottom: "1px solid rgba(99,102,241,0.2)",
              } satisfies CSSProperties,
            },
            {
              k: "02 — Design",
              t: "Choose your style",
              p: "Pick a visual style and see your exact site and emails live before a single line of code is written.",
              style: {
                padding: "40px 44px",
                background: "var(--white)",
                borderBottom: "1px solid rgba(99,102,241,0.2)",
              } satisfies CSSProperties,
            },
            {
              k: "03 — Build",
              t: "Your app, live",
              p: "AI writes every line. Auth, database, payments, all pages — deployed and live. Describe changes in plain English.",
              style: {
                padding: "40px 44px",
                background: "var(--white)",
                borderRight: "1px solid rgba(99,102,241,0.2)",
              } satisfies CSSProperties,
            },
            {
              k: "04 — Grow",
              t: "Market & automate",
              p: "AI generates your blog, emails, and social schedule — publishing on autopilot so you can focus on users.",
              style: { padding: "40px 44px", background: "var(--white)" } satisfies CSSProperties,
            },
          ].map((cell) => (
            <div key={cell.k} style={cell.style}>
              <div
                style={{
                  fontSize: 11,
                  fontWeight: 600,
                  letterSpacing: "0.1em",
                  textTransform: "uppercase",
                  color: "rgba(99,102,241,0.6)",
                  marginBottom: 14,
                }}
              >
                {cell.k}
              </div>
              <div className="f" style={{ fontSize: 22, fontWeight: 700, color: "#1A1A1A", marginBottom: 10 }}>
                {cell.t}
              </div>
              <p style={{ fontSize: 13.5, color: "var(--mid)", lineHeight: 1.72 }}>{cell.p}</p>
            </div>
          ))}
        </div>
      </section>

      <section style={{ background: "var(--white)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
        <div className="wyg-grid wyg-section" style={{ maxWidth: 980, margin: "0 auto", padding: "0 52px" }}>
          <div style={{ padding: "44px 40px 44px 0", borderRight: "1px solid var(--border)" }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: "#6366F1", marginBottom: 12, textAlign: "center" }}>✦</div>
            <div className="f" style={{ fontSize: 17, fontWeight: 700, color: "#1A1A1A", marginBottom: 8, textAlign: "center" }}>
              A live, working product
            </div>
            <p style={{ fontSize: 13.5, color: "var(--mid)", lineHeight: 1.7, textAlign: "center" }}>
              Not a prototype. Real auth, real payments, real database — on your own URL from day one.
            </p>
            <p style={{ fontSize: 12, color: "var(--muted)", lineHeight: 1.6, textAlign: "center", marginTop: 10 }}>
              Runs on your own servers — your data, your infrastructure, no lock-in.
            </p>
          </div>
          <div style={{ padding: "44px 40px", borderRight: "1px solid var(--border)" }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: "#6366F1", marginBottom: 12, textAlign: "center" }}>✦</div>
            <div className="f" style={{ fontSize: 17, fontWeight: 700, color: "#1A1A1A", marginBottom: 8, textAlign: "center" }}>
              A full marketing engine
            </div>
            <p style={{ fontSize: 13.5, color: "var(--mid)", lineHeight: 1.7, textAlign: "center" }}>
              Blog posts, onboarding emails, and social content — written and published automatically every week.
            </p>
          </div>
          <div style={{ padding: "44px 0 44px 40px" }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: "#6366F1", marginBottom: 12, textAlign: "center" }}>✦</div>
            <div className="f" style={{ fontSize: 17, fontWeight: 700, color: "#1A1A1A", marginBottom: 8, textAlign: "center" }}>
              A product that evolves
            </div>
            <p style={{ fontSize: 13.5, color: "var(--mid)", lineHeight: 1.7, textAlign: "center" }}>
              Describe changes in plain English. Vibn handles the code so your product grows as fast as your ideas.
            </p>
          </div>
        </div>
      </section>

      <section className="quote-section" style={{ background: "#1A1A1A", padding: "32px 52px 28px" }}>
        <div style={{ maxWidth: 980, margin: "0 auto" }}>
          <div className="quote-grid">
            <div className="quote-side" style={{ display: "flex", gap: 14, opacity: 0.85 }}>
              <div style={{ width: 2, background: "#6366F1", borderRadius: 2, flexShrink: 0 }} />
              <div>
                <p className="f" style={{ fontSize: 12.5, color: "#FFFFFF", lineHeight: 1.65, fontStyle: "italic", marginBottom: 8 }}>
                  &quot;I had the idea for 2 years. The backend terrified me. vibn shipped it in 4 days and handles all my marketing.&quot;
                </p>
                <span style={{ fontSize: 10.5, color: "var(--muted)", fontWeight: 600 }}>— Alex K., founder of Taskly</span>
              </div>
            </div>
            <div style={{ background: "rgba(255,255,255,0.05)", borderRadius: 12, padding: "22px 26px" }}>
              <div style={{ width: 3, height: 16, background: "#6366F1", borderRadius: 2, marginBottom: 12, opacity: 0.7 }} />
              <p className="f" style={{ fontSize: 16, color: "#FFFFFF", lineHeight: 1.7, fontStyle: "italic", marginBottom: 12 }}>
                &quot;I have zero coding experience. Three weeks in, I have 300 paying users. That&apos;s entirely because of vibn.&quot;
              </p>
              <span style={{ fontSize: 11, color: "var(--muted)", fontWeight: 600 }}>— Marcus L., founder of Flowmatic</span>
            </div>
            <div className="quote-side" style={{ display: "flex", gap: 14, opacity: 0.85 }}>
              <div style={{ width: 2, background: "#6366F1", borderRadius: 2, flexShrink: 0 }} />
              <div>
                <p className="f" style={{ fontSize: 12.5, color: "#FFFFFF", lineHeight: 1.65, fontStyle: "italic", marginBottom: 8 }}>
                  &quot;The marketing autopilot saved me ten hours a week. My blog runs itself. I just focus on product.&quot;
                </p>
                <span style={{ fontSize: 10.5, color: "var(--muted)", fontWeight: 600 }}>— Sara R., founder of Nudge</span>
              </div>
            </div>
          </div>
          <div style={{ display: "flex", justifyContent: "center", gap: 7 }}>
            <div style={{ width: 5, height: 5, borderRadius: "50%", background: "rgba(255,255,255,0.3)" }} />
            <div style={{ width: 16, height: 5, borderRadius: 3, background: "#FFFFFF" }} />
            <div style={{ width: 5, height: 5, borderRadius: "50%", background: "rgba(255,255,255,0.3)" }} />
          </div>
        </div>
      </section>

      <section style={{ background: "var(--white)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
        <div className="stats-grid stats-section" style={{ maxWidth: 980, margin: "0 auto", padding: "0 52px" }}>
          {[
            { num: "280+", label: "founders launched", pl: 0, pr: true },
            { num: "72h", label: "average time to first version", pl: 36, pr: true },
            { num: "4.9★", label: "average rating", pl: 36, pr: true },
            { num: "3×", label: "faster than hiring a developer", pl: 36, pr: false },
          ].map((row) => (
            <div
              key={row.label}
              style={{
                padding: row.pl ? `40px 0 40px ${row.pl}px` : "40px 0",
                borderRight: row.pr ? "1px solid var(--border)" : undefined,
              }}
            >
              <div className="f gradient-num" style={{ fontSize: 40, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 6 }}>
                {row.num}
              </div>
              <div style={{ fontSize: 13, color: "var(--muted)" }}>{row.label}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="cta-section" style={{ padding: "80px 52px", textAlign: "center" }}>
        <div
          className="cta-card"
          style={{
            maxWidth: 680,
            margin: "0 auto",
            background: "#FFFFFF",
            borderRadius: 20,
            padding: "64px 52px",
            boxShadow: "0 0 0 1px rgba(99,102,241,0.15),0 20px 60px rgba(30,27,75,0.08)",
          }}
        >
          <h2
            className="f"
            style={{
              fontSize: 48,
              fontWeight: 700,
              color: "var(--ink)",
              letterSpacing: "-0.03em",
              lineHeight: 1.1,
              marginBottom: 20,
            }}
          >
            Your idea deserves to exist.
          </h2>
          <p style={{ fontSize: 16, color: "var(--mid)", lineHeight: 1.75, marginBottom: 38 }}>
            Thousands of ideas never make it past a spreadsheet. Yours doesn&apos;t have to be one of them.
          </p>
          <Link href="/auth">
            <button type="button" className="btn-ink-lg" style={{ marginBottom: 16 }}>
              Build my product — free
            </button>
          </Link>
          <div style={{ fontSize: 12.5, color: "var(--muted)" }}>Joins 280+ non-technical founders already live</div>
        </div>
      </section>
    </>
  );
}