// POC landing page — the front door of the prototype, recreated from the
// Proxa concept page ("A model for your model"). A full scrolling page: hero,
// thesis, the Data→Model→Harness→LLM rings, section per layer, FAQ, and a
// final CTA. The marketing CTAs are replaced with the two ways into the POC:
// explore the built Cascade Ridge Foods workspace, or start from scratch.
// Rendered INSTEAD of the app shell while view === 'landing'.

const LDG_PILLS = ['A portfolio', 'A construction project', 'A company', 'A budget',
  'A supply chain', 'A research program', 'Something entirely different'];

const LDG_FAQ = [
  {
    q: 'Is it secure?',
    a: ['Proxa is designed so the Model and Harness operate within defined permissions, review, and governance controls. The LLM works through the Harness rather than receiving unrestricted access to every underlying system.'],
  },
  {
    q: 'How does it work with Excel?',
    a: ['Excel stays Excel. The Model connects and represents the information you need from your spreadsheets, while ChatGPT and Claude can query the Model through Proxa rather than working directly from a pile of disconnected files.',
      'You can still update the spreadsheet as you do today. Proxa keeps the Model aligned with the information it depends on.'],
  },
  {
    q: 'How does it work with PowerPoint and Word?',
    a: ['The same way. Your presentations and documents remain in the tools you already use. ChatGPT and Claude can work through the Model to answer questions, create new material, or update existing outputs using the same structured representation of the domain.'],
  },
];

// Glossary — the underlined terms in the copy link here. Each entry: what the
// capability is, and (where it matters) how it differs from what Proxa adds.
const LDG_GLOSSARY = [
  {
    id: 'ldg2-gl-tools', term: 'Tools',
    def: 'Functions the model can call to act — search the web, run code, query a system, write a file. Tools let a model do things rather than just describe them.',
  },
  {
    id: 'ldg2-gl-skills', term: 'Skills',
    def: 'Packaged instructions and procedures a model loads for a specialized task — a house style, a review checklist, a domain workflow. Skills tell the model how to do a job well.',
  },
  {
    id: 'ldg2-gl-context', term: 'Context',
    def: 'The working set of information a model sees for the current task — the prompt, the conversation so far, whatever files and instructions were brought in. Everything an LLM knows in the moment lives in context. It is assembled per task and gone when the conversation ends.',
  },
  {
    id: 'ldg2-gl-memory', term: 'Memory & Retrieval',
    def: 'Mechanisms for accessing information: memory saves notes across conversations; retrieval fetches relevant documents into context at query time. Both are recall — unstructured text the model re-reads and re-interprets each time. Neither maintains state: nothing is computed, kept consistent, or updated when the world changes.',
  },
  {
    id: 'ldg2-gl-harness', term: 'Harness',
    def: 'The working environment that runs the model reliably — the loop that manages context, executes tools, enforces permissions and review, and recovers from errors. Claude Code is a harness for coding; Proxa is a harness for modeling.',
  },
  {
    id: 'ldg2-gl-domain-model', term: 'Domain Model',
    def: 'A model is a simplified representation of a subject (i.e. a domain). Like a spreadsheet, it allows you to organize your data and relationships so you can better understand, analyze, and predict how the domain behaves. The domain can be almost anything — a project, an asset, a function. Or an organization (which is just a model of other models). For an AI to work with it, the model needs to be:',
    points: [
      ['Explicit', 'written down: what things are, how they relate, what the rules are. Nothing can depend on the AI guessing.'],
      ['Persistent', 'still there tomorrow, outside any conversation. The AI shouldn’t start from zero every time you talk to it.'],
      ['Computational', 'it calculates, deterministically. An LLM reasons in probabilities — ask it to re-derive your forecast and you’ll get a slightly different answer each time. What’s known should be computed, not inferred.'],
      ['Current', 'updated as its sources change. The AI should be working with the domain as it is now, not as it was when someone last assembled the context.'],
    ],
  },
];

function LandingPage({ onExplore, onLab, onScratch }) {
  // The two POC entry buttons, reused in the hero and the final section.
  const entries = (
    <div className="ldg2-hero-actions">
      <button type="button" className="ldg2-button filled" onClick={onExplore}>Explore Cascade Ridge Foods →</button>
      <button type="button" className="ldg2-button" onClick={onLab}>Model a research lab</button>
      <button type="button" className="ldg2-button" onClick={onScratch}>Start from scratch</button>
    </div>
  );

  return (
    <div className="ldg2" id="ldg2-top">
      <header className="ldg2-hero">
        <img className="ldg2-hero-sphere" src="assets/proxa-sphere.svg" alt="" aria-hidden="true" />
        <div className="ldg2-wrap ldg2-hero-inner">
          <div className="ldg2-brand">Proxa</div>
          <h1>A model for your model</h1>
          <p>Proxa is a persistent workspace for your team and Claude that works with the files and tools you already use.</p>
          {entries}
        </div>
      </header>

      <section id="ldg2-idea">
        <div className="ldg2-wrap">
          <div className="ldg2-copy">
            <div className="ldg2-label">A different way to think about models</div>
            <h2>Why not give the LLM a Model?</h2>
            <p>Over the last few years, language models have steadily gained new capabilities. They were given <a className="ldg2-term" href="#ldg2-gl-tools">Tools</a> so they could act. <a className="ldg2-term" href="#ldg2-gl-skills">Skills</a> so they could perform specialized tasks. <a className="ldg2-term" href="#ldg2-gl-context">Context</a> so they could see what they are working on. <a className="ldg2-term" href="#ldg2-gl-memory">Memory&nbsp;&amp;&nbsp;Retrieval</a> so they could access information. <a className="ldg2-term" href="#ldg2-gl-harness">Harnesses</a> so they could operate reliably.</p>
            <p className="ldg2-lead">We think there is another important capability: not more reasoning, but a structured representation of the subject the language model is reasoning about. This is a <a className="ldg2-term" href="#ldg2-gl-domain-model">Domain Model</a>.</p>
          </div>
        </div>
      </section>

      <section id="ldg2-model">
        <div className="ldg2-wrap">
          <div className="ldg2-label">A neuro-symbolic approach</div>
          <h2>A Language Model reasons. A Domain Model represents.</h2>
          <div className="ldg2-copy">
            <p>A language model is built to reason, interpret, synthesize, and generate. A Domain Model serves a different purpose. It represents what is already known about a subject in a structured and deterministic form. Once something is known, there is little benefit in asking the LLM to infer it again. Relationships can be explicit. Calculations can be deterministic. State can persist. Dependencies can be maintained.</p>
            <p>The language model can focus on what actually requires reasoning.</p>
            <p className="ldg2-lead">That is the combination we are exploring with Proxa.</p>
          </div>
          <div className="ldg2-architecture">
            <div className="ldg2-rings" aria-label="Concentric diagram: Data, Model, Harness, LLM">
              <div className="ldg2-ring r1"><span>LLM</span></div>
              <div className="ldg2-ring r2"><span>HARNESS</span></div>
              <div className="ldg2-ring r3"><span>MODEL</span></div>
              <div className="ldg2-ring r4"><span>DATA</span></div>
            </div>
            <div className="ldg2-arch-copy">
              <h3>Data is the source. The Model provides structure. The Harness provides capabilities. The LLM provides reasoning.</h3>
              <p>Each part has a different job. Start with the information you already have, give it structure, connect it to the tools and processes needed to do work, then use the LLM to reason across it.</p>
            </div>
          </div>
        </div>
      </section>

      <section id="ldg2-work">
        <div className="ldg2-wrap">
          <div className="ldg2-copy">
            <h2>Once the Model exists</h2>
            <p>The interaction with AI changes.</p>
            <p>Someone can ask Claude, ChatGPT, Copilot, or another AI tool a question against the Model. They can run a scenario, recalculate a forecast, update a presentation, generate a dashboard, build a form, create a workflow, or build a new tool on top of it.</p>
            <p>The interface can change. The output can change. The AI model can change.</p>
            <p className="ldg2-lead">The Domain Model remains.</p>
            <p>That means the work no longer needs to begin by assembling enough context for each task. AI can work against a persistent representation of the domain and use the relevant structure and computation as needed.</p>
          </div>
        </div>
      </section>

      <section>
        <div className="ldg2-wrap">
          <div className="ldg2-copy">
            <div className="ldg2-eyebrow">Data</div>
            <h2>Your work already has structure — it is just scattered.</h2>
            <p>Spreadsheets, documents, presentations, systems of record, and shared folders already contain the information you use to run a business, project, portfolio, asset, or plan.</p>
            <p>The problem is that the structure is spread across disconnected sources.</p>
            <p><strong>Your tools stay your tools.</strong> Excel can remain Excel. Files can stay in shared folders. Systems of record can remain systems of record.</p>
          </div>
        </div>
      </section>

      <section>
        <div className="ldg2-wrap">
          <div className="ldg2-copy">
            <div className="ldg2-eyebrow">Model</div>
            <h2>Bring that structure together into a persistent representation of what you are working on.</h2>
            <p>It defines the objects, relationships, calculations, dependencies, and current state that make up the domain.</p>
            <p>The Model gives the LLM something coherent to reason across rather than a collection of disconnected files and systems.</p>
          </div>
        </div>
      </section>

      <section className="ldg2-claude">
        <div className="ldg2-wrap">
          <div className="ldg2-copy">
            <div className="ldg2-eyebrow">Harness</div>
            <h2>The working environment around the Model.</h2>
            <p>Claude Code showed what happens when an LLM is connected to a coherent codebase, the tools it needs, and the processes required to do the job.</p>
            <p>A developer can say: write this feature, change this code, run the tests, fix the error, try again. The LLM handles much of the mechanical work while the developer directs and reviews it.</p>
            <p>Proxa applies the same pattern to professional work. The Harness connects the LLM to the Model, tools, and workflows, and includes agents that can carry out work.</p>
            <p>Those agents can detect new information, determine what changed, update the Model, involve you when judgment is required, and continue the process.</p>
          </div>
        </div>
      </section>

      <section>
        <div className="ldg2-wrap">
          <div className="ldg2-label">A General Purpose Tool</div>
          <h2>Start with: “This is what I want to model.”</h2>
          <div className="ldg2-copy">
            <p>You do not need to be a developer or an IT team. Proxa is a general-purpose modeling environment. You describe what you want to model, and AI helps you structure it, connect the information you already have, keep it current, and work with it.</p>
            <div className="ldg2-examples">
              {LDG_PILLS.map((p) => <span className="ldg2-pill" key={p}>{p}</span>)}
            </div>
          </div>
        </div>
      </section>

      <section id="ldg2-faq">
        <div className="ldg2-wrap">
          <div className="ldg2-copy">
            <div className="ldg2-label">FAQ</div>
            <h2>Questions people ask</h2>
            <div className="ldg2-faq-list">
              {LDG_FAQ.map((f) => (
                <details className="ldg2-faq-item" key={f.q}>
                  <summary>{f.q}</summary>
                  <div className="ldg2-faq-answer">
                    {f.a.map((p, i) => <p key={i}>{p}</p>)}
                  </div>
                </details>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section id="ldg2-glossary">
        <div className="ldg2-wrap">
          <div className="ldg2-copy">
            <div className="ldg2-label">Glossary</div>
            <h2>The terms, in more detail</h2>
            <div className="ldg2-glossary">
              {LDG_GLOSSARY.map((g) => (
                <div className="ldg2-gl-item" id={g.id} key={g.id}>
                  <div className="ldg2-gl-term">{g.term}</div>
                  <div>
                    <p className="ldg2-gl-def">{g.def}</p>
                    {g.points && (
                      <ul className="ldg2-proplist ldg2-proplist--gl">
                        {g.points.map(([t, d]) => <li key={t}><strong>{t}</strong> — {d}</li>)}
                      </ul>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <footer className="ldg2-footer ldg2-wrap">
        <span>© 2026 Proxa</span>
        <span>A general-purpose environment for persistent computational Domain Models.</span>
      </footer>
    </div>
  );
}

window.LandingPage = LandingPage;