// Atlas · Repository enterprise upsell page

function RepositoryUpsell({ onUpgrade, onBack }) {
  const benefits = [
    {
      icon: "file-text",
      title: "Upload your existing research",
      desc: "PDFs, Word files, slide decks, internal reports. Atlas indexes everything and keeps it searchable.",
      color: "#E4F1EA",
      iconColor: "#2C7A50",
    },
    {
      icon: "search",
      title: "Every report gets smarter",
      desc: "Atlas automatically finds and cites your internal documents alongside public research in each report it writes.",
      color: "#EAF0FB",
      iconColor: "#3B6FCA",
    },
    {
      icon: "users",
      title: "Built for teams",
      desc: "Invite colleagues, manage roles, and build a shared knowledge base that grows with your organization.",
      color: "#FBF0E4",
      iconColor: "#A35E12",
    },
    {
      icon: "lock",
      title: "Completely private",
      desc: "Your documents never leave your organization. They are not shared, indexed publicly, or used to train any model.",
      color: "#F2DCDA",
      iconColor: "#94413A",
    },
  ];

  const useCases = [
    {
      label: "Pharma and biotech",
      example: "Upload clinical trial protocols, safety reports, and regulatory submissions. Atlas cross-references them in every literature review it produces.",
    },
    {
      label: "Strategy and consulting",
      example: "Store past client deliverables, market studies, and frameworks. Atlas surfaces the right prior work when writing new competitive analyses.",
    },
    {
      label: "Corporate R&D",
      example: "Index internal patents, lab notebooks, and vendor assessments. Atlas weaves them into technology landscape reports automatically.",
    },
    {
      label: "Investment and finance",
      example: "Keep deal memos, sector theses, and portfolio notes in one place. Atlas draws on them when researching a new company or market.",
    },
  ];

  return (
    <div style={{ maxWidth: 760, margin: "0 auto", padding: "0 0 80px" }}>

      {/* Back */}
      <button
        onClick={onBack}
        style={{
          background: "none", border: "none", cursor: "pointer",
          fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.06em",
          color: "var(--ink-3)", padding: 0, marginBottom: 24,
          display: "inline-flex", alignItems: "center", gap: 6,
        }}
      >
        <Icon name="chevronLeft" size={12} /> Back
      </button>

      {/* Hero */}
      <div style={{
        background: "var(--ink)", borderRadius: 16, padding: "52px 48px",
        marginBottom: 40, position: "relative", overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", top: -60, right: -60,
          width: 280, height: 280, borderRadius: "50%",
          background: "rgba(255,255,255,0.04)", pointerEvents: "none",
        }} />
        <div style={{
          position: "absolute", bottom: -80, right: 80,
          width: 200, height: 200, borderRadius: "50%",
          background: "rgba(255,255,255,0.03)", pointerEvents: "none",
        }} />
        <div style={{
          fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.12em",
          color: "rgba(255,255,255,0.4)", textTransform: "uppercase", marginBottom: 20,
        }}>
          Enterprise feature
        </div>
        <h1 style={{
          fontSize: 34, fontWeight: 700, lineHeight: 1.2,
          color: "#F5F5F7", margin: "0 0 18px", maxWidth: 520,
        }}>
          Your organization's knowledge, inside every report
        </h1>
        <p style={{
          fontSize: 16, color: "rgba(255,255,255,0.6)", lineHeight: 1.65,
          margin: "0 0 36px", maxWidth: 480,
        }}>
          The Repository connects Atlas to your internal documents. Upload what your team already knows, and Atlas will cite it alongside public research in every report it writes.
        </p>
        <div style={{ display: "flex", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
          <button
            className="btn"
            onClick={onUpgrade}
            style={{
              background: "#F5F5F7", color: "#1D1D1F", border: "none",
              padding: "12px 24px", fontSize: 14, fontWeight: 600,
              borderRadius: 8, cursor: "pointer",
            }}
          >
            Request enterprise access
          </button>
          <span style={{ fontSize: 13, color: "rgba(255,255,255,0.4)" }}>
            We follow up within one business day.
          </span>
        </div>
      </div>

      {/* Benefits grid */}
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 40,
      }}>
        {benefits.map((b) => (
          <div key={b.title} style={{
            border: "1px solid var(--line)",
            borderRadius: 12,
            padding: "24px",
            background: "var(--paper)",
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 8,
              background: b.color, display: "flex", alignItems: "center", justifyContent: "center",
              marginBottom: 14, color: b.iconColor,
            }}>
              <Icon name={b.icon} size={16} />
            </div>
            <div style={{
              fontWeight: 600, fontSize: 14, color: "var(--ink)", marginBottom: 8, lineHeight: 1.3,
            }}>
              {b.title}
            </div>
            <div style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.6 }}>
              {b.desc}
            </div>
          </div>
        ))}
      </div>

      {/* Use cases */}
      <div style={{
        border: "1px solid var(--line)", borderRadius: 12,
        overflow: "hidden", marginBottom: 40,
      }}>
        <div style={{
          padding: "20px 24px 16px",
          borderBottom: "1px solid var(--line)",
        }}>
          <div style={{
            fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.1em",
            color: "var(--ink-3)", textTransform: "uppercase",
          }}>
            How teams use the Repository
          </div>
        </div>
        {useCases.map((u, i) => (
          <div key={u.label} style={{
            padding: "18px 24px",
            borderBottom: i < useCases.length - 1 ? "1px solid var(--line)" : "none",
            display: "flex", gap: 24, alignItems: "flex-start",
          }}>
            <div style={{
              fontFamily: "var(--mono)", fontSize: 11, fontWeight: 600,
              color: "var(--ink-2)", whiteSpace: "nowrap", paddingTop: 2, minWidth: 160,
            }}>
              {u.label}
            </div>
            <div style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.6 }}>
              {u.example}
            </div>
          </div>
        ))}
      </div>

      {/* Bottom CTA */}
      <div style={{
        background: "var(--success-tint)", border: "1px solid var(--success-line)",
        borderRadius: 12, padding: "28px 32px",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap",
      }}>
        <div>
          <div style={{ fontWeight: 600, fontSize: 15, color: "var(--success)", marginBottom: 4 }}>
            Ready to connect your organization's knowledge?
          </div>
          <div style={{ fontSize: 13, color: "var(--ink-2)" }}>
            Tell us about your team and we will be in touch to get you set up.
          </div>
        </div>
        <button className="btn accent" onClick={onUpgrade} style={{ whiteSpace: "nowrap", flexShrink: 0 }}>
          Request enterprise access
        </button>
      </div>

    </div>
  );
}