/* KitRate — marketing landing page */

function Landing({ onStart, onSample, profile }) {
  const ig = profile?.platforms?.instagram;
  return (
    <div className="kr-fade-in">
      {/* Hero */}
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "72px 32px 64px", display: "grid", gridTemplateColumns: "minmax(0,1.1fr) minmax(0,0.9fr)", gap: 64, alignItems: "center" }} data-screen-label="Landing">
        <div>
          <div className="kr-eyebrow" style={{ marginBottom: 18 }}>For creators who negotiate like professionals</div>
          <h1 className="kr-serif" style={{ fontSize: "clamp(38px, 4.6vw, 58px)", fontWeight: 500, letterSpacing: "-0.02em", lineHeight: 1.06 }}>
            A brand-ready media kit and rate card, <em style={{ color: "var(--accent)", fontWeight: 400 }}>in under 5 minutes.</em>
          </h1>
          <p style={{ fontSize: 17, color: "var(--ink-2)", marginTop: 22, maxWidth: 480, lineHeight: 1.6 }}>
            Add your handles and metrics. KitRate benchmarks your rates against current creator-economy data, explains the math in plain English, and assembles a kit brands can read in ninety seconds.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
            <button className="kr-btn kr-btn-primary" style={{ padding: "13px 26px", fontSize: 15 }} onClick={onStart}>
              Build my kit <KrIcon d={ICONS.arrowRight} size={15} />
            </button>
            <button className="kr-btn kr-btn-secondary" style={{ padding: "13px 26px", fontSize: 15 }} onClick={onSample}>
              See a finished kit
            </button>
          </div>
          <div style={{ display: "flex", gap: 22, marginTop: 40, color: "var(--muted)", fontSize: 13, flexWrap: "wrap" }}>
            <span style={{ display: "flex", gap: 7, alignItems: "center" }}><KrIcon d={ICONS.check} size={13} /> Transparent rate ranges</span>
            <span style={{ display: "flex", gap: 7, alignItems: "center" }}><KrIcon d={ICONS.check} size={13} /> Benchmarks reviewed regularly</span>
            <span style={{ display: "flex", gap: 7, alignItems: "center" }}><KrIcon d={ICONS.check} size={13} /> PDF, link & pitch email</span>
          </div>
        </div>

        {/* Hero visual: miniature kit cover + rate row */}
        <div style={{ position: "relative" }} aria-hidden="true">
          <div className="kr-card" style={{ padding: 28, transform: "rotate(1.2deg)", background: "var(--ink)", color: "var(--paper)", border: "none" }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", opacity: 0.55, marginBottom: 26 }}>Media kit · 2026</div>
            <div className="kr-serif" style={{ fontSize: 34, lineHeight: 1.08, letterSpacing: "-0.015em" }}>{profile?.name || "Your Name"}</div>
            <div style={{ fontSize: 13, opacity: 0.7, marginTop: 8 }}>{profile?.nicheLabel || "Your niche"} · {profile?.location || "Your city"}</div>
            <div style={{ display: "flex", gap: 26, marginTop: 28, paddingTop: 20, borderTop: "1px solid rgba(244,241,234,0.18)" }}>
              <div><div className="kr-serif" style={{ fontSize: 22 }}>{ig ? KitRateEngine.fmtCompact(ig.followers) : "—"}</div><div style={{ fontSize: 10, fontFamily: "var(--mono)", letterSpacing: "0.1em", textTransform: "uppercase", opacity: 0.55, marginTop: 2 }}>Followers</div></div>
              <div><div className="kr-serif" style={{ fontSize: 22 }}>{ig ? KitRateEngine.fmtCompact(ig.avgViews) : "—"}</div><div style={{ fontSize: 10, fontFamily: "var(--mono)", letterSpacing: "0.1em", textTransform: "uppercase", opacity: 0.55, marginTop: 2 }}>Avg views</div></div>
              <div><div className="kr-serif" style={{ fontSize: 22 }}>{ig ? ig.engagement + "%" : "—"}</div><div style={{ fontSize: 10, fontFamily: "var(--mono)", letterSpacing: "0.1em", textTransform: "uppercase", opacity: 0.55, marginTop: 2 }}>Engagement</div></div>
            </div>
          </div>
          <div className="kr-card" style={{ padding: "16px 20px", position: "absolute", bottom: -28, left: -22, right: 60, transform: "rotate(-1.4deg)", boxShadow: "var(--shadow-2)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
              <div>
                <div style={{ fontSize: 12.5, fontWeight: 600 }}>Instagram Reel</div>
                <div style={{ fontSize: 11, color: "var(--muted)" }}>Suggested rate</div>
              </div>
              <div className="kr-serif" style={{ fontSize: 21, color: "var(--accent)", whiteSpace: "nowrap" }}>$1,100–$5,500</div>
            </div>
          </div>
        </div>
      </div>

      {/* How it works — editorial numbered strip */}
      <div style={{ borderTop: "1px solid var(--line)", background: "var(--surface)" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "56px 32px", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(230px, 1fr))", gap: 0 }}>
          {[
            ["01", "Add your handles", "Instagram, TikTok, YouTube, X, LinkedIn, your site — or paste metrics manually. No login required to draft."],
            ["02", "Benchmark your rates", "A transparent pricing engine turns your metrics into suggested ranges, with the reasoning spelled out."],
            ["03", "Send it to brands", "Export a PDF, share a link, or generate the pitch email — packaged like an agency would do it."]
          ].map(([n, t, d], i) => (
            <div key={n} style={{ padding: "8px 28px 8px 0", marginRight: 28, borderRight: i < 2 ? "1px solid var(--line)" : "none" }}>
              <div className="kr-serif" style={{ fontSize: 15, fontStyle: "italic", color: "var(--accent)", marginBottom: 10 }}>{n}</div>
              <div style={{ fontWeight: 600, fontSize: 15.5, marginBottom: 6 }}>{t}</div>
              <p style={{ fontSize: 13.5, color: "var(--ink-2)" }}>{d}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Methodology statement */}
      <div style={{ maxWidth: 820, margin: "0 auto", padding: "72px 32px 80px", textAlign: "center" }}>
        <div className="kr-eyebrow" style={{ marginBottom: 14 }}>Rate methodology</div>
        <p className="kr-serif" style={{ fontSize: "clamp(20px, 2.4vw, 27px)", lineHeight: 1.45, color: "var(--ink)", fontWeight: 400 }}>
          “Your rates are estimated using current benchmark data, your performance metrics, content format, audience quality, and campaign scope. Benchmarks are reviewed and updated regularly.”
        </p>
        <p style={{ fontSize: 13.5, color: "var(--muted)", marginTop: 18, maxWidth: 560, margin: "18px auto 0" }}>
          KitRate never pretends rates are exact. Every number is a range with a confidence label and the reasoning behind it — so you can negotiate from evidence, not guesswork.
        </p>
      </div>
    </div>
  );
}

window.Landing = Landing;
