// app.jsx — MakeMemory.com homepage
// Long scroll, classical product page. Editorial register only at the colophon.

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false,
  "rainbowSpeed": 10,
  "dashSpeed": 2.5,
  "ctaBorder": 3
} /*EDITMODE-END*/;

// Q&A content from the brief, with the dominant source for each row.
// `accent` is used as the left-rule color (matches the dominant source); when
// an answer pulls from multiple sources, NEUTRAL resolves to a light or dark
// hairline depending on theme.
const NEUTRAL = "neutral";
const NEUTRAL_LIGHT = "rgba(14,14,12,0.32)";
const NEUTRAL_DARK = "rgba(229,226,218,0.32)";
const QA_GROUPS = [
{
  label: "ONBOARDING",
  em: "your first weeks",
  items: [
  {
    q: '"What does PRR mean here, and who owns it?"',
    a: <>Product Release Review. Owned by Marie on the platform team. Defined in the Notion doc <em>Engineering Playbook → Release Process</em>.</>,
    accent: SOURCES.notion.color
  },
  {
    q: '"Who should I talk to about expense reports?"',
    a: <>Camille in Finance. She handles all reimbursements over €100. She last replied about expenses in the <code style={inlineCode}>#ops</code> channel three days ago.</>,
    accent: SOURCES.slack.color
  }]

},
{
  label: "CATCHING UP",
  em: "meetings, threads, emails",
  items: [
  {
    q: '"What did the team decide in Monday\'s product review?"',
    a: <>The team chose option B — incremental rollout over Q3 — in the meeting on May 11. Decision logged in the Notion doc <em>Q3 Plan</em>. The SharePoint schedule was updated the next day.</>,
    accent: NEUTRAL
  },
  {
    q: '"Did Sarah reply to the Acme contract email?"',
    a: <>Yes, on Friday at 4:12pm. She asked for a 14-day extension on the SLA clause. The thread is in your inbox under <em>Acme — Master Agreement</em>.</>,
    accent: SOURCES.gmail.color
  }]

},
{
  label: "PROJECT STATUS",
  em: "what's on, what's late, what's next",
  items: [
  {
    q: '"What\'s the status of Project Meridian? Is it on time?"',
    a: <>On track for August 14. Two of nine subtasks are blocked — both waiting on legal review since May 8. Everything else is green.</>,
    accent: NEUTRAL
  },
  {
    q: '"What\'s blocked across all our jobs right now?"',
    a: <>Four things. Meridian (legal review). The Rue Lafayette job (waiting on the structural report). The Q3 tender (waiting on a subcontractor quote). The warehouse fit-out (waiting on materials).</>,
    accent: NEUTRAL
  }]

},
{
  label: "THE PAPER TRAIL",
  em: "quotes, contracts, invoices",
  items: [
  {
    q: '"What did we quote Acme for the roof job, and did they sign?"',
    a: <>€42,800 excluding VAT, quoted on May 4. Signed on May 19 — the countersigned PDF sits in SharePoint under <em>Acme → Contracts</em>.</>,
    accent: SOURCES.sharepoint.color
  },
  {
    q: '"Which invoices are overdue right now?"',
    a: <>Three. Bertrand (14 days), Lemoine (21 days), and Acme's second instalment, which only went out yesterday.</>,
    accent: SOURCES.outlook.color
  }]

}];


const inlineCode = {
  fontFamily: "var(--mono)",
  fontSize: "0.92em",
  background: "rgba(14,14,12,0.05)",
  padding: "1px 5px",
  borderRadius: 3
};

const SOURCE_GRID = [
"outlook", "teams", "sharepoint",
"gmail", "drive", "gcal",
"notion", "slack"];


function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.body.classList.toggle("dark", !!t.dark);
  }, [t.dark]);

  useEffect(() => {
    document.documentElement.style.setProperty("--rainbow-speed", `${t.rainbowSpeed}s`);
    document.documentElement.style.setProperty("--dash-speed", `${t.dashSpeed}s`);
    document.documentElement.style.setProperty("--cta-border", `${t.ctaBorder}px`);
  }, [t.rainbowSpeed, t.dashSpeed, t.ctaBorder]);

  return (
    <div className="page">
      {/* ── Top chrome ─────────────────────────────────────────────── */}
      <nav className="nav nav-wide" aria-label="Top">
        <a className="wordmark" href="Manifold.md Homepage.html">
          MakeMemory<span className="ext">.com</span>
        </a>
        <div className="nav-links">
          <a className="nav-link" href="Manifold.md Pricing.html">Pricing</a>
          <a className="nav-link" href="Manifold.md Brand.html">Brand</a>
          <a className="nav-link" href="/app">Se connecter&nbsp;→</a>
        </div>
      </nav>

      {/* ── Hero ───────────────────────────────────────────────────── */}
      <section className="hero-section" style={{ paddingTop: 56, paddingBottom: 32 }}>
        <div className="hero-layout">
          <div className="hero-text">
            <h1 className="hero">La mémoire de votre entreprise, enfin à un seul endroit.</h1>
            <p className="sub">Tout ce que votre entreprise sait est éparpillé entre les boîtes mail, les
documents partagés, les réunions et les conversations. Make Memory rassemble tout ça, l'organise à votre façon —
par client, par chantier, par dossier — et vous répond en citant sa source.
            </p>

            <CTA href="/app/onboarding">Essayer maintenant</CTA>

            <div className="cta-meta">
              Gratuit. 5 minutes. Sans carte bancaire.<br />
              <a href="/app">Se connecter&nbsp;→</a>
            </div>
          </div>

          <div className="hero-diagram-slot">
            <HeroFluxDiagram dark={t.dark} />
          </div>
        </div>
      </section>

      {/* ── Ask Claude things you used to ask people ────────────────── */}
      <hr className="rule" />
      <section className="shell">
        <div className="col-text">
          <h2 className="head">Ask Claude things you used to ask people.</h2>
          <p className="body" style={{ opacity: 0.78 }}>
            The same questions you'd Slack a colleague, ping the data team about, or scroll
            through Notion to find. You ask Claude instead. Claude already knows where to look.
          </p>
        </div>

        <div className="col-text" style={{ marginTop: 56 }}>
          {QA_GROUPS.map((g) =>
          <div className="qa-group" key={g.label}>
              <div className="section-label">
                {g.label} <span className="em">— {g.em}</span>
              </div>
              {g.items.map((qa, i) =>
            <div className="qa" key={i} style={{ "--accent":
              qa.accent === NEUTRAL ?
              t.dark ? NEUTRAL_DARK : NEUTRAL_LIGHT :
              brandStroke(qa.accent, t.dark) }}>
                  <p className="q">{qa.q}</p>
                  <p className="a">{qa.a}</p>
                </div>
            )}
            </div>
          )}
        </div>
      </section>

      {/* ── Everything stays in Claude ──────────────────────────────── */}
      <hr className="rule" />
      <section className="shell">
        <div className="col-text">
          <h2 className="head">It works where you already work.</h2>
          <p className="body">
            Claude is already where you work. You draft emails there, write code there,
            plan there, think there. The last thing you need is another tab, another login,
            another app to keep open.
          </p>
          <p className="body">
            Make Memory has its own home — where you set up your company's memory and browse
            what it has filed. It also plugs into Claude as an MCP server, so the same memory
            answers questions in the conversation where you're already working. Set it up
            once; read it from wherever suits you.
          </p>
          <p className="body">
            The meeting you missed. The Slack thread you didn't read. The Notion doc nobody
            can find. The number you'd usually wait two days for the data team to pull.
            All of it, queryable, from where you already are.
          </p>
        </div>
      </section>

      {/* ── How it works ────────────────────────────────────────────── */}
      <hr className="rule" />
      <section className="shell">
        <div className="col-text">
          <h2 className="head">How it works.</h2>
        </div>

        <HowItWorksDiagram />

        <div className="col-text" style={{ marginTop: 32 }}>
          <ol className="steps">
            <li>
              <p>
                <strong>Create your account.</strong> An email and a password. Then five minutes
                of plain questions about how your company actually works — what your days
                revolve around, and how you look things up.
              </p>
            </li>
            <li>
              <p>
                <strong>Connect your sources.</strong> OAuth into Outlook, Teams, SharePoint,
                Gmail, Drive, Notion, Slack — whichever ones your company uses. Each connection
                takes about 30 seconds.
                Permissions are inherited from each tool; Make Memory only sees what you can already see.
              </p>
            </li>
            <li>
              <p>
                <strong>Ask anything.</strong> Make Memory figures out which tools to query and returns
                a cited answer. Every claim links back to the source. If you don't trust the answer,
                you can verify it in one click.
              </p>
            </li>
          </ol>

          <p className="body body-note" style={{ marginTop: 8 }}>
            Your data stays where it lives. Make Memory doesn't copy it, doesn't index it, doesn't
            move it. We hold a small map of what your company calls things and where each thing
            lives — nothing more.
          </p>
        </div>
      </section>

      {/* ── But Claude already connects to Notion ───────────────────── */}
      <hr className="rule" />
      <section className="shell">
        <div className="col-text">
          <h2 className="head">But Claude already connects to Notion. And Slack. And Gmail.</h2>
        </div>

        <EntityResolutionDiagram dark={t.dark} />

        <div className="col-text">
          <p className="body">Yes. And if every question you ask only lives in one tool, the official MCPs work fine.</p>
          <p className="body">
            Most questions don't. <em>"Where do we stand on the Meridian job?"</em> lives in an Outlook
            thread, a SharePoint folder, a Teams channel and a Drive album — all at once. With separate
            MCPs, Claude has to guess which tool to ask, in what order, and stitch the four answers
            together. Most of the time it can't, because the four sources don't share a common name
            for Meridian. Outlook has a thread called <em>Chantier Meridian</em>. SharePoint files it
            under <em>2026-04 — Ilot Meridian</em>. Teams has a{" "}
            <code style={inlineCode}>#meridian</code> channel. Drive has <em>Photos Meridian</em>.
          </p>
          <p className="body">Make Memory resolves all of these to the same thing. One question. One answer. Every source already considered.</p>
          <p className="body">
            We also maintain a small living document of your company — your acronyms, who owns what,
            how your team defines metrics, your data conventions. Claude reads it on every question,
            so it gets the same context a new hire would after a month at your company. The official
            Notion MCP doesn't ship with that. Neither does the Slack one. Each one starts from zero
            on every conversation.
          </p>
          <p className="body">
            And then there's the long tail. Your ERP. Your accounting software. The scheduling tool
            your team has used for ten years. The internal panel someone built three years ago and
            nobody dares replace. Some have an MCP. Most don't. Make Memory ships the connectors that
            don't exist yet, and gives you one place to manage all of them.
          </p>
          <p className="body body-note">
            <em>If you've already wired up the Notion MCP, keep it. Make Memory doesn't replace it — we
            sit above it, federate across it, and add what it's missing.</em>
          </p>
        </div>
      </section>

      {/* ── What it isn't ───────────────────────────────────────────── */}
      <hr className="rule" />
      <section className="shell">
        <div className="col-text">
          <h2 className="head">What it isn't.</h2>
          <p className="body">
            Not a place to put your data. Make Memory doesn't ingest, doesn't index, doesn't store
            your content. The sources of truth stay where they were. You can disconnect us tomorrow
            and lose nothing.
          </p>
          <p className="body">
            Not another inbox to keep up with. Make Memory has no feed, no notifications and
            nothing to check. You go to it when you need an answer, and the rest of the time
            it stays out of the way.
          </p>
          <p className="body">
            Not enterprise software. No SSO setup forms, no annual contracts, no SDR calls. One
            engineer can connect their first source and ask their first real question in under
            five minutes.
          </p>
        </div>
      </section>

      {/* ── Sources ─────────────────────────────────────────────────── */}
      <hr className="rule" />
      <section className="shell">
        <div className="col-text">
          <h2 className="head">Sources.</h2>
        </div>
        <div className="col-grid" style={{ marginTop: 16 }}>
          <div className="sources-grid">
            {SOURCE_GRID.map((id) =>
            <SourcePill key={id} id={id} />
            )}
            <div className="src-pill" style={{ color: "var(--graphite)", fontStyle: "italic" }}>
              <div className="swatch" style={{ background: "transparent",
                boxShadow: "inset 0 0 0 1px var(--hairline-strong)", color: "var(--graphite)" }}>+</div>
              <span>The long tail</span>
            </div>
          </div>
          <p className="body body-note" style={{ marginTop: 24 }}>
            <em>More on request. The long tail is what we're built for.</em>
          </p>
        </div>
      </section>

      {/* ── Pricing ─────────────────────────────────────────────────── */}
      <hr className="rule" />
      <section className="shell">
        <div className="col-text">
          <h2 className="head">Pricing.</h2>
          <p className="body">
            Solo is free. One person, one source, unlimited questions. Use it to evaluate the
            product, or for your own personal work.
          </p>
          <p className="body">
            Teams start at $500/month. That covers up to 50 people, plus usage on queries and
            connected sources. No per-seat charges. No annual contracts. Pricing scales with what
            you actually use, not with how many laptops you bought.
          </p>
          <p className="body body-note" style={{ fontFamily: "var(--mono)", fontStyle: "normal", fontSize: 14 }}>
            For larger setups, write to <a href="mailto:hello@makememory.com">hello@makememory.com</a>.
          </p>
        </div>
      </section>

      {/* ── Why now ─────────────────────────────────────────────────── */}
      <hr className="rule" />
      <section className="shell">
        <div className="col-text">
          <h2 className="head">Why now.</h2>
          <p className="body">
            MCP became the standard for connecting agents to systems in late 2024. Every major data
            platform shipped its own MCP server in the last year. Claude is becoming where work
            happens — Cowork, Claude in Excel, Claude in Chrome. What's missing is the layer between
            Claude and your company's actual memory. That's the layer we're building, and we're
            building it now because the window is open and it won't be for long.
          </p>
        </div>
      </section>

      {/* ── Final CTA ───────────────────────────────────────────────── */}
      <section className="final-cta shell">
        <h2>Essayez sur votre propre entreprise.</h2>
        <CTA href="/app/onboarding">Essayer maintenant</CTA>
        <div className="cta-meta">Gratuit. 5 minutes. Sans carte bancaire.</div>
      </section>

      {/* ── Colophon ────────────────────────────────────────────────── */}
      <footer className="shell">
        <div className="colophon">
          <span className="colo-line">MakeMemory.com is set in Source Serif 4, Inter, and JetBrains Mono.</span>
          <span className="colo-line">The wordmark combines Source Serif 4 (MakeMemory) and JetBrains Mono (.com).</span>
          <span className="colo-line">MakeMemory.com is closed-source software.</span>
          <span className="colo-line">© MakeMemory.com, 2026.</span>
          <a className="toggle" onClick={(e) => {e.preventDefault();setTweak("dark", !t.dark);}} href="#">
            {t.dark ? "Light mode" : "Dark mode"}
          </a>
        </div>
      </footer>

      {/* ── Tweaks panel ────────────────────────────────────────────── */}
      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakToggle label="Dark mode" value={t.dark}
        onChange={(v) => setTweak("dark", v)} />

        <TweakSection label="Motion" />
        <TweakSlider label="Dash flow" value={t.dashSpeed}
        min={1.5} max={6} step={0.1} unit="s"
        onChange={(v) => setTweak("dashSpeed", v)} />
        <TweakSlider label="Rainbow CTA" value={t.rainbowSpeed}
        min={4} max={20} step={0.5} unit="s"
        onChange={(v) => setTweak("rainbowSpeed", v)} />

        <TweakSection label="CTA" />
        <TweakSlider label="Border width" value={t.ctaBorder}
        min={1} max={6} step={0.5} unit="px"
        onChange={(v) => setTweak("ctaBorder", v)} />
      </TweaksPanel>
    </div>);

}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);