// Page sections + Tweaks panel.
// All copy lifted from live agenticsadvisory.ai; sharpened only where it weakens the brand.

const { useState, useEffect, useRef } = React;

// ---- Tiny inline sparkline (editorial ink) ----------------------------------
function Sparkline({ seed = 1, width = 86, height = 22, color = '#2A2F36' }) {
  // deterministic sequence
  const rnd = (n) => {
    const x = Math.sin(seed * 9301 + n * 49297) * 233280;
    return x - Math.floor(x);
  };
  const N = 14;
  const pts = [];
  for (let i = 0; i < N; i++) {
    const x = i / (N - 1) * (width - 2) + 1;
    const y = height - 2 - rnd(i) * (height - 4);
    pts.push([x, y]);
  }
  const d = pts.map(([x, y], i) => i === 0 ? `M${x.toFixed(1)} ${y.toFixed(1)}` : `L${x.toFixed(1)} ${y.toFixed(1)}`).join(' ');
  return (
    <svg width={width} height={height} aria-hidden="true" className="spark">
      <path d={d} fill="none" stroke={color} strokeWidth="1" />
      {pts.map(([x, y], i) =>
      <circle key={i} cx={x} cy={y} r={i === pts.length - 1 ? 1.8 : 0.9} fill={color} opacity={i === pts.length - 1 ? 1 : 0.55} />
      )}
    </svg>);

}

// ---- Scrim block: every copy block sits on this ------------------------------
function Scrim({ children, className = '', as: As = 'div', ...rest }) {
  return (
    <As className={`scrim ${className}`} {...rest}>
      {children}
    </As>);

}

// ---- Section shell ----------------------------------------------------------
function Section({ id, eyebrow, children, label }) {
  return (
    <section id={id} className="section" data-screen-label={label}>
      {eyebrow && <div className="eyebrow">{eyebrow}</div>}
      {children}
    </section>);

}

// ---- NAV --------------------------------------------------------------------
function Nav() {
  return (
    <nav className="nav" aria-label="Primary">
      <div className="nav-brand">
        <a className="wordmark" href="#top" aria-label="Agentics Advisory — home">
          <span className="wm-serif">Agentics Advisory</span>
        </a>
        <div className="channel-pair" aria-label="Two channels">
          <span className="channel current">
            <span className="channel-dot" aria-hidden="true">•</span>
            Advisory
          </span>
          <a className="channel other" href="https://agenticscapital.ai">
            Capital
            <span className="channel-arrow" aria-hidden="true">↗</span>
          </a>
        </div>
      </div>
      <a className="nav-cta" href="#contact">Contact</a>
    </nav>);
}

// ---- HERO -------------------------------------------------------------------
const HERO_VARIANTS = [
{ display: ['We encode', 'what your', 'business knows.'], sub: 'Judgment, values, and hard-won wisdom — turned into AI systems that act on your behalf.' },
{ display: ['AI that inherits', 'your business', 'judgment.'], sub: 'We map how your best people decide, then encode it into systems that scale that judgment.' },
{ display: ['Operators who', 'build with AI.'], sub: 'We deploy AI in our own companies before we deploy it in yours. No pilots. No demos.' }];


function Hero({ variant = 0 }) {
  const v = HERO_VARIANTS[variant] || HERO_VARIANTS[0];
  return (
    <Section id="hero" label="01 Hero">
      <div className="hero-grid">
        <Scrim className="hero-copy">
          <div className="eyebrow">Agentics Advisory · Adelaide</div>
          <h1 className="display">
            {v.display.map((line, i) =>
            <span key={i} className="display-line">{line}</span>
            )}
          </h1>
          <p className="lede">{v.sub}</p>
          <div className="hero-actions">
            <a href="#contact" className="btn-primary">Start a conversation</a>
            <a href="#what" className="btn-ghost">What we encode →</a>
          </div>
          <div className="hero-meta">
            <span>Est. 2025</span>
            <span className="dot" />
            <span>Adelaide, AU</span>
            <span className="dot" />
            <span>Advisory · Capital</span>
          </div>
        </Scrim>

        <Scrim className="hero-stat">
          <div className="stat-number">74<span className="stat-pct">%</span></div>
          <div className="stat-label">
            of companies struggle to achieve tangible value from AI.
          </div>
          <div className="stat-source">
</div>
          <div className="hr" />
          <p className="stat-note">
            Not because the technology fails — because nobody taught it what the business actually values. We close that gap.
          </p>
        </Scrim>
      </div>
    </Section>);
}

// ---- WHAT WE ENCODE ---------------------------------------------------------
const CAPABILITIES = [
{
  tag: 'Revenue',
  title: 'Your sales judgment, at scale.',
  body: 'We encode your ideal customer profile, your best salesperson\u2019s instincts, and your qualification criteria into systems that prospect, score, and follow up — replacing feast-or-famine with consistent deal flow that reflects how you actually sell.',
  size: 'lg'
},
{
  tag: 'Operations',
  title: 'Your operational decisions, automated.',
  body: 'We map the hundreds of small judgment calls your team makes daily — scheduling, quoting, dispatching, prioritising — and encode them. The decisions still reflect your standards. They just happen faster.',
  size: 'md'
},
{
  tag: 'Intelligence',
  title: 'Your strategic priorities, wired in.',
  body: 'Inventory weighted by your margin priorities. Pricing that reflects your positioning. Resource allocation that balances the trade-offs the way you would at 2am.',
  size: 'md'
},
{
  tag: 'Customer',
  title: 'Your service standards, encoded.',
  body: 'Communication that knows when to be efficient and when to be generous. Follow-ups timed the way your best people time them. Escalation when the situation calls for a human touch.',
  size: 'lg'
}];


function WhatWeEncode() {
  return (
    <Section id="what" label="02 What we encode">
      <div className="section-head">
        <Scrim className="head-inner">
          <div className="eyebrow">What we encode</div>
          <h2 className="h-display">Every business runs on judgment that was never written down.</h2>
          <p className="lede-sm">
            Four layers of decision-making. We encode each the way your best people already make them — then let the systems handle the volume.
          </p>
        </Scrim>
      </div>

      <div className="cap-grid">
        {CAPABILITIES.map((c, i) =>
        <Scrim key={i} className={`cap cap-${c.size} cap-pos-${i}`}>
            <div className="cap-head">
              <span className="cap-tag">0{i + 1} · {c.tag}</span>
              <Sparkline seed={i + 2} />
            </div>
            <h3 className="cap-title">{c.title}</h3>
            <p className="cap-body">{c.body}</p>
          </Scrim>
        )}
      </div>
    </Section>);

}

// ---- HOW IT WORKS -----------------------------------------------------------
const STEPS = [
{
  n: '01',
  title: 'Intent mapping',
  body: 'We interview your key people — the ones who carry the judgment that makes the business work. We map how decisions actually get made: the trade-offs, the priorities, the unwritten rules. The output is your organisational intent framework.',
  focus: 'Foundation'
},
{
  n: '02',
  title: 'System deployment',
  body: 'With intent encoded, we build and deploy AI systems that act on what your business actually values. Not a handoff — we stay until everything works in the context of your actual operations, with your actual people, handling your actual edge cases.',
  focus: 'Delivery'
},
{
  n: '03',
  title: 'Alignment maintenance',
  body: 'Businesses evolve. Values shift. New people bring new judgment. We monitor whether your systems are still aligned with what the business needs — and correct drift before it compounds. The layer most companies skip.',
  focus: 'Continuity'
}];


function HowItWorks() {
  return (
    <Section id="how" label="03 How it works">
      <div className="section-head tight">
        <Scrim className="head-inner">
          <div className="eyebrow">How it works</div>
          <h2 className="h-display">Three phases. One engagement.</h2>
        </Scrim>
      </div>

      <ol className="steps">
        {STEPS.map((s, i) =>
        <li key={i} className="step">
            <Scrim className="step-inner">
              <div className="step-num">{s.n}</div>
              <div className="step-body">
                <div className="step-focus">{s.focus}</div>
                <h3 className="step-title">{s.title}</h3>
                <p>{s.body}</p>
              </div>
              <div className="step-edge" aria-hidden="true">
                {i < STEPS.length - 1 ? '↘' : '●'}
              </div>
            </Scrim>
          </li>
        )}
      </ol>
    </Section>);

}

// ---- BEST SUITED FOR --------------------------------------------------------
const FITS = [
['Established businesses', 'With real revenue, real customers, and real operations that can benefit from AI-driven efficiency and growth.'],
['Essential industries', 'Trades, logistics, healthcare, manufacturing, food production, facilities management, professional services — where operations are complex and margins matter.'],
['Hands-on owners', 'Who understand their business deeply and want a partner, not a vendor. You don\u2019t need to understand AI — you need to be open to what it can do.'],
['Growth-minded', 'Scaling revenue, improving margins, reducing owner-dependence, preparing for succession — not just keeping the lights on.']];


function BestSuitedFor() {
  return (
    <Section id="fit" label="04 Best suited for">
      <div className="fit-wrap">
        <Scrim className="fit-aside">
          <div className="eyebrow">Best suited for</div>
          <h2 className="h-display small">Context without intent is like a loaded weapon with no target.</h2>
          <p className="lede-sm">
            We work with businesses where the wisdom is real, the owner is committed, and encoding that wisdom into systems can unlock genuine, measurable value.
          </p>
        </Scrim>
        <Scrim className="fit-table">
          <dl>
            {FITS.map(([k, v], i) =>
            <div className="fit-row" key={i}>
                <dt>{k}</dt>
                <dd>{v}</dd>
              </div>
            )}
          </dl>
        </Scrim>
      </div>
    </Section>);

}

// ---- PROOF / RESULTS --------------------------------------------------------
const CASES = [
{
  tag: 'Lead Generation · Wholesale Coffee',
  title: 'B2B pipeline from scratch.',
  body: 'A leading roaster needed wholesale customers across Adelaide. We built a full lead discovery, verification, and outreach system.',
  metric: '4,915',
  unit: 'verified B2B contacts · deployed in 6 weeks'
},
{
  tag: 'CRM Intelligence · Wine Distribution',
  title: 'Relationship intelligence from email history.',
  body: 'A boutique wine company needed visibility across their distributor network. We built a CRM intelligence system extracted entirely from their email archive — delivering a daily brief with relationship context and draft outreach.',
  metric: '108',
  unit: 'distributor profiles · built from existing email corpus'
},
{
  tag: 'Customer Retention · E-Commerce',
  title: 'Founder-voiced follow-up at every order.',
  body: 'A growing e-commerce brand wanted every customer to hear from the founder after fulfilment — without the founder having to write a thousand emails. We built a system that drafts a personalised check-in four days after each order, in the founder’s voice, ready for one-click review and send.',
  metric: '100%',
  unit: 'orders followed up · drafted by AI, sent by a human'
}];


function Results() {
  return (
    <Section id="results" label="05 Results">
      <div className="section-head">
        <Scrim className="head-inner">
          <div className="eyebrow">Results</div>
          <h2 className="h-display">Built inside our own businesses first.</h2>
          <p className="lede-sm">Real deployments. Not pilots. Not demos.</p>
        </Scrim>
      </div>

      <div className="cases">
        {CASES.map((c, i) =>
        <Scrim key={i} className="case">
            <div className="case-head">
              <div className="case-tag">{c.tag}</div>
              <div className="case-idx">{String(i + 1).padStart(2, '0')} / 03</div>
            </div>
            <h3 className="case-title">{c.title}</h3>
            <p className="case-body">{c.body}</p>
            <div className="case-metric">
              <div className="metric-num">{c.metric}</div>
              <div className="metric-unit">{c.unit}</div>
            </div>
          </Scrim>
        )}
      </div>
    </Section>);

}

// ---- BEYOND ADVISORY --------------------------------------------------------
function BeyondAdvisory() {
  return (
    <Section id="capital" label="06 Beyond advisory">
      <div className="beyond-wrap">
        <Scrim className="beyond-inner">
          <div className="eyebrow">Beyond advisory</div>
          <h2 className="h-display">Two channels, one practice.</h2>
          <div className="beyond-grid">
            <div>
              <div className="beyond-tag">Agentics Advisory</div>
              <p>Strategy and implementation on a retainer basis. AI architecture, automation deployment, ongoing optimisation — for businesses that want expert guidance without changing their ownership structure.</p>
            </div>
            <div>
              <div className="beyond-tag">Agentics Capital</div>
              <p>The same expertise deployed in exchange for equity, performance-linked compensation, or a blend — where deeper alignment and long-term shared upside create a better outcome for everyone.</p>
              <a className="beyond-link" href="https://agenticscapital.ai" target="_blank" rel="noreferrer">agenticscapital.ai →</a>
            </div>
          </div>
          <p className="beyond-foot" style={{ fontFamily: "Geist" }}>
            The common thread is alignment: we structure every engagement so that we succeed only when you do.
          </p>
        </Scrim>
      </div>
    </Section>);

}

// ---- TEAM / ABOUT -----------------------------------------------------------
const TEAM = [
{
  initials: 'TE',
  name: 'Theo Engela - Agentics Capital Lead',
  role: 'Partner · BA, BBus, MBA',
  bio: 'Serial founder and operator across manufacturing, technology, agriculture, distribution, consulting, and hospitality. Value-chain obsessed.'
},
{
  initials: 'SM',
  name: 'Sam McKay - Agentics Advisory Lead',
  role: 'Partner · BA',
  bio: 'Multi-business owner and operator. Team and culture builder. Problem solver, fixated on optimising efficiency.'
}];


function Portrait({ initials }) {
  return (
    <div className="portrait" aria-hidden="true">
      <svg viewBox="0 0 120 160" width="100%" height="100%">
        <defs>
          <pattern id={`h-${initials}`} width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <line x1="0" y1="0" x2="0" y2="4" stroke="currentColor" strokeWidth="0.6" />
          </pattern>
        </defs>
        <rect width="120" height="160" fill="var(--scrim-strong)" />
        <rect width="120" height="160" fill={`url(#h-${initials})`} opacity="0.28" />
        <circle cx="60" cy="64" r="26" fill="var(--base)" stroke="currentColor" strokeWidth="1" />
        <path d="M 22 158 C 22 118, 98 118, 98 158 Z" fill="var(--base)" stroke="currentColor" strokeWidth="1" />
        <text x="60" y="72" textAnchor="middle" fontFamily="var(--sans)" fontSize="18" letterSpacing="1" fill="currentColor">{initials}</text>
      </svg>
    </div>);

}

function About() {
  return (
    <Section id="about" label="07 About">
      <div className="section-head">
        <Scrim className="head-inner">
          <div className="eyebrow">About</div>
          <h2 className="h-display">Operators who build with AI.</h2>
          <p className="lede-sm">
            We didn&rsquo;t come to AI from technology. We came to it from the shop floor, the supplier meeting, the Saturday delivery run. Between us: multiple companies across food & beverage, hospitality, manufacturing, wholesale distribution, and e-commerce — employing fifty-plus people at any given time.
          </p>
        </Scrim>
      </div>

      <div className="team">
        {TEAM.map((m, i) =>
        <Scrim key={i} className="team-card">
            <Portrait initials={m.initials} />
            <div className="team-meta">
              <div className="team-role">{m.role}</div>
              <div className="team-name">{m.name}</div>
              <p>{m.bio}</p>
            </div>
          </Scrim>
        )}
      </div>
    </Section>);

}

// ---- NOTES (expanding blog module) ------------------------------------------
const NOTES = [
{
  slug: 'level-b',
  date: '2026-05',
  kicker: 'Field notes',
  title: 'You’ve outgrown the chatbot. Here’s what comes next.',
  preview: `You can tell where someone is in their AI journey by how they describe their setup. Level A is “I use ChatGPT for emails and ideas.” The tab’s open. You ask it things. Sometimes the answer is great, sometimes it’s wrong and you can’t tell. There’s nothing systematic about it — and you can feel the ceiling. Level B looks different from the outside. Quieter. More boring. Less impressive in a demo. There’s no genius prompt being passed around, and no one person whose superpower is “really good at AI.”`,
  body: [
  `Instead there’s a system: a small library of specific jobs the AI does reliably, a few standard workflows that chain those jobs together, and a thin layer that decides which workflow to run when a human asks for something. It’s less magic and more like a well-run finance function. That’s exactly why it scales.`,
  `The teams stuck at Level A have a common symptom: every new use case requires the same person to sit down and craft a new mega-prompt. Every time. The prompt grows. It accretes edge cases. Eventually it’s four thousand tokens of “always do this, never do that, except when…” and only one person on the team understands it. When that person goes on holiday, the whole thing breaks. When the underlying model gets an update, half the edge cases regress and nobody knows which ones.`,
  `That’s not an AI problem. It’s an architecture problem. You’ve built a single bloated brain instead of a team of specialists.`,
  `The shift to Level B is mental before it’s technical. You stop asking “what’s the best prompt for this?” and start asking three different questions.`,
  { h: 'First: what are the actual atomic jobs you want done?' },
  `Not workflows. Not categories. Specific, named, repeatable jobs. Draft a chase email for an overdue invoice. Pull the top five risks from this contract. Summarise yesterday’s customer support tickets and group complaints by theme. If you can’t name the job in seven words without saying “and then,” it’s actually two jobs and you’ve been bundling them. Bundling is what makes prompts unmaintainable.`,
  `Most teams discover, when they do this exercise honestly, that they have eight to twelve jobs they actually want done — not the fifty things they vaguely imagined the AI doing. Those eight to twelve are the foundation. Each one gets its own clear definition, its own examples of good and bad outputs, its own owner. Yes, owner — a human who is accountable for whether that job is working well. Without an owner, AI work atrophies the same way unowned spreadsheets do.`,
  { h: 'Second: where do these jobs chain, and where does a human need to look?' },
  `This is where most teams either go too cautious or too cowboy. The cautious team puts a human checkpoint at every single step and the whole thing becomes slower than doing it manually. The cowboy team chains seven jobs together with no checkpoints and is genuinely surprised when the AI confidently sends an invoice for forty-seven million dollars to a vendor that doesn’t exist.`,
  `The right question isn’t “how many steps?” — it’s “where would I notice if this went wrong?” If the answer is “I’d see it in the sent folder after it went out,” that’s the wrong place for the checkpoint. Move it earlier. If the answer is “every output is reviewed before anything leaves the building,” you’re paying for a feature you don’t need and you’ll abandon it within a quarter. Find the actual leverage points — usually they’re at the boundary between internal draft and external action, between advisory and decision, between reversible and irreversible.`,
  `A useful exercise: for each chain of jobs, name the worst plausible failure. The chase email goes to a customer you just signed a partnership with. The forecast confuses two divisions. The summary misses the one critical ticket. Now place the human checkpoint at whatever step prevents that specific failure. That’s where the gate goes. Everything before it can run on autopilot. Everything after it should too — once a human has confirmed.`,
  { h: 'Third: who decides which workflow runs when?' },
  `This is the question most Level A teams have never asked, and it’s the one that unlocks everything.`,
  `In the Level A world, you are the routing layer. You see the email, you decide it’s a chase situation, you grab the right prompt out of your notes, you customise it, you run it. That works for one person doing it once a day. It does not work for a five-person team handling forty situations a day.`,
  `At Level B, you need an explicit answer to “when a request comes in, what decides which workflow runs?” For some teams that’s a person — the operations lead routes incoming requests. For some it’s a simple form. For more sophisticated setups it’s a thin AI layer whose only job is routing — it reads the request, names the workflow it thinks fits, and asks “should I run this?” before doing anything. Whichever you choose, make the choice explicit. The teams who skip this question end up with a routing layer that exists in someone’s head, which means it dies when that person leaves.`,
  `The hardest discipline at this level is keeping the routing layer pure. Its job is to choose. The moment it starts drafting the email itself or pulling the data itself, you’ve collapsed back to the mega-prompt failure mode. It feels efficient (“just have it do both!”) and it isn’t. Six weeks later you can’t tell whether the failure was in the choice or the execution, and you’re back to debugging a black box.`,
  { h: 'What Level B feels like to operate' },
  `The AI is doing less visible work but more reliable work. The team stops swapping screenshots of impressive ChatGPT outputs. Instead they say things like “the chase-email workflow ran on twelve invoices yesterday, two needed manual rewording, ten went out clean.” Boring. Measurable. Repeatable. The kind of thing you can put in a board pack with a straight face.`,
  `It also feels like the team can grow without retraining everyone. New hire on the finance team? They learn the four workflows that finance uses. They don’t need to learn prompt engineering. The capability library and the workflow definitions do the teaching. The routing layer is the only thing they interact with directly, and it’s a one-page document of “what to ask for when.”`,
  `Most importantly, the AI no longer has a single point of failure. If one capability is producing weak output, you replace that capability without touching anything else. If a new model comes out that’s better at summarisation, you swap it in and every workflow that uses it instantly gets better. The mega-prompt approach can’t do this. The architectural approach can.`,
  { h: 'How to know you’re already moving' },
  `You’re moving if you can name three things your team does with AI today and describe each one in a sentence without saying “and we sort of also use it for…”`,
  `You’re moving if more than one person on your team can run the same AI workflow and get similar outputs.`,
  `You’re moving if you have a written-down checklist of where humans look before an AI output leaves the building.`,
  `You’re stuck if your best AI work lives in one person’s chat history and dies when they leave for two weeks.`,
  { h: 'What to do this month' },
  `Don’t rip anything out. The chatbot you’re using is fine — it’s not the enemy. The enemy is all your AI value living inside it.`,
  `List the five things you currently lean on AI for most often. For each one, write down what the actual job is in seven words. If you can’t, split it. You should end up with somewhere between seven and twelve atomic jobs.`,
  `Look at those jobs and notice which ones cluster together — which sequences keep happening. Those clusters are your workflows. There will be three to five of them. Name them.`,
  `Then ask the question Level A teams never ask: when a request comes in, who or what decides which workflow runs? Write the answer down. If the answer is “it depends on who’s available,” that’s fine — but write it down. Make the implicit explicit.`,
  `That’s the entire move from A to B. Not new tools. Not better prompts. The same AI you’re already using, with three layers of clarity laid on top of it. Most of the leverage you’re missing is on the other side of just doing this.`,
  `The teams who do it spend the next year compounding. The teams who don’t will spend the next year explaining why their AI work didn’t scale, and most of them will quietly blame the model. The model is fine. The architecture is the answer.`]

}];


function Notes() {
  const [openSlug, setOpenSlug] = useState(null);
  return (
    <Section id="notes" label="08 Field notes">
      <div className="notes">
        {NOTES.map((n) => {
          const isOpen = openSlug === n.slug;
          return (
            <Scrim key={n.slug} className={`note-card ${isOpen ? 'is-open' : ''}`}>
              <article>
                <header className="note-head">
                  <div className="note-meta">
                    <span className="note-kicker">{n.kicker}</span>
                    <span className="note-date">{n.date}</span>
                  </div>
                  <h3 className="note-title">{n.title}</h3>
                </header>

                <p className="note-preview">{n.preview}</p>

                {isOpen &&
                <div className="note-body">
                  {n.body.map((para, i) => {
                      if (typeof para === 'object' && para.h) {
                        return <h4 key={i} className="note-h">{para.h}</h4>;
                      }
                      return <p key={i}>{para}</p>;
                    })}
                </div>
                }

                <button
                  type="button"
                  className="note-toggle"
                  aria-expanded={isOpen}
                  onClick={() => setOpenSlug(isOpen ? null : n.slug)}>
                  {isOpen ? 'Collapse' : 'Read full note'}
                  <span className="note-toggle-mark" aria-hidden="true">{isOpen ? '−' : '+'}</span>
                </button>
              </article>
            </Scrim>);
        })}
      </div>
    </Section>);

}

// ---- CONTACT ----------------------------------------------------------------
function Contact() {
  return (
    <Section id="contact" label="09 Contact">
      <div className="contact-wrap">
        <Scrim className="contact-inner">
          <div className="eyebrow">Contact</div>
          <h2 className="contact-q">Where should your agents begin?</h2>
          <p className="lede-sm">
            Tell us about your business and what you&rsquo;re trying to achieve. We&rsquo;ll let you know honestly whether we can help — and what the right engagement might look like.
          </p>
          <div className="contact-actions">
            <a className="btn-primary large" href="mailto:deploy@agenticsadvisory.ai">Start a conversation</a>
            <a className="btn-ghost" href="mailto:deploy@agenticsadvisory.ai">deploy@agenticsadvisory.ai</a>
          </div>
          <div className="contact-meta">We respond personally within 48 hours.</div>
        </Scrim>
      </div>
    </Section>);

}

// ---- FOOTER -----------------------------------------------------------------
function Footer() {
  return (
    <footer className="footer">
      <div className="foot-inner">
        <div className="foot-col">
          <div className="wm-serif foot-mark">Agentics Advisory</div>
          <div className="foot-sub">Adelaide, Australia · © 2026</div>
        </div>
        <div className="foot-col right">
          <a href="https://agenticscapital.ai" target="_blank" rel="noreferrer">Agentics Capital ↗</a>
          <a href="mailto:deploy@agenticsadvisory.ai">deploy@agenticsadvisory.ai</a>
        </div>
      </div>
    </footer>);

}

// ---- TWEAKS PANEL -----------------------------------------------------------
const DEFAULT_TWEAKS = window.__defaultTweaks;

const ACCENT_SWATCHES = ['#C8553D', '#2E5E4E', '#4A5A7A', '#8A5A2E', '#B6923E', '#6B2E5E', '#3D6A8A'];
const FONT_PAIRS = [
{ key: 'source-geist', label: 'Source Serif 4 · Geist', display: "'Source Serif 4', Georgia, serif", ui: "'Geist', system-ui, sans-serif" },
{ key: 'fraunces-inter', label: 'Fraunces · Inter', display: "'Fraunces', Georgia, serif", ui: "'Inter', system-ui, sans-serif" },
{ key: 'instrument-geist', label: 'Instrument Serif · Geist', display: "'Instrument Serif', Georgia, serif", ui: "'Geist', system-ui, sans-serif" }];

const TOPOLOGY_PRESETS = {
  'Blueprint': { topology: 'iso', density: 0.6, edgeStyle: 'straight', nodeStyle: 'diamond', packetStyle: 'dot', packetRate: 0.5, lineWeight: 1, lineOpacity: 0.22, labels: 'sparse', grain: 0, vignette: 0.35, breathe: 0.3 },
  'Schematic': { topology: 'ortho', density: 0.75, edgeStyle: 'stepped', nodeStyle: 'square', packetStyle: 'dash', packetRate: 0.55, lineWeight: 1, lineOpacity: 0.18, labels: 'frequent', grain: 0, vignette: 0.3, breathe: 0.2 },
  'Neural': { topology: 'neural', density: 0.7, edgeStyle: 'curved', nodeStyle: 'circle', packetStyle: 'dot', packetRate: 0.7, lineWeight: 0.8, lineOpacity: 0.16, labels: 'off', grain: 0.05, vignette: 0.4, breathe: 0.4 },
  'Constellation': { topology: 'constellation', density: 0.55, edgeStyle: 'straight', nodeStyle: 'ring', packetStyle: 'pulse', packetRate: 0.35, lineWeight: 0.7, lineOpacity: 0.14, labels: 'sparse', grain: 0.15, vignette: 0.5, breathe: 0.5 },
  'Dataflow': { topology: 'flow', density: 0.55, edgeStyle: 'curved', nodeStyle: 'circle', packetStyle: 'dash', packetRate: 0.85, lineWeight: 1, lineOpacity: 0.22, labels: 'sparse', grain: 0, vignette: 0.3, breathe: 0.2 },
  'Radial': { topology: 'radial', density: 0.65, edgeStyle: 'straight', nodeStyle: 'diamond', packetStyle: 'dot', packetRate: 0.5, lineWeight: 0.9, lineOpacity: 0.2, labels: 'sparse', grain: 0, vignette: 0.4, breathe: 0.3 },
  'Organic DAG': { topology: 'dag', density: 0.7, edgeStyle: 'curved', nodeStyle: 'circle', packetStyle: 'dot', packetRate: 0.6, lineWeight: 0.9, lineOpacity: 0.18, labels: 'sparse', grain: 0.08, vignette: 0.35, breathe: 0.3 }
};

function TweaksPanel({ tweaks, setTweaks, visible }) {
  if (!visible) return null;
  const set = (k, v) => setTweaks({ ...tweaks, [k]: v });
  const applyPreset = (name) => {
    const p = TOPOLOGY_PRESETS[name];if (!p) return;
    setTweaks({ ...tweaks, ...p });
  };

  return (
    <div className="tweaks" role="dialog" aria-label="Tweaks">
      <div className="tweaks-head">
        <span className="tweaks-title">Tweaks</span>
        <span className="tweaks-sub">design knobs</span>
      </div>

      <div className="tw-section">Background</div>

      <TweakRow label="Preset">
        <select onChange={(e) => {applyPreset(e.target.value);e.target.value = '';}} value="">
          <option value="" disabled>— apply preset —</option>
          {Object.keys(TOPOLOGY_PRESETS).map((k) => <option key={k} value={k}>{k}</option>)}
        </select>
      </TweakRow>

      <TweakRow label="Topology">
        <select value={tweaks.topology} onChange={(e) => set('topology', e.target.value)}>
          {['iso', 'ortho', 'dimetric', 'radial', 'neural', 'constellation', 'flow', 'dag'].map((k) => <option key={k} value={k}>{k}</option>)}
        </select>
      </TweakRow>

      <TweakRow label="Density">
        <input type="range" min="0.25" max="1" step="0.05" value={tweaks.density} onChange={(e) => set('density', parseFloat(e.target.value))} />
        <span className="val">{tweaks.density.toFixed(2)}</span>
      </TweakRow>

      <TweakRow label="Motion">
        <input type="range" min="0" max="1" step="0.05" value={tweaks.motion} onChange={(e) => set('motion', parseFloat(e.target.value))} />
        <span className="val">{tweaks.motion === 0 ? 'paused' : tweaks.motion.toFixed(2)}</span>
      </TweakRow>

      <TweakRow label="Edges">
        <div className="seg">
          {['straight', 'stepped', 'curved', 'arc'].map((k) =>
          <button key={k} className={tweaks.edgeStyle === k ? 'on' : ''} onClick={() => set('edgeStyle', k)}>{k}</button>
          )}
        </div>
      </TweakRow>

      <TweakRow label="Nodes">
        <div className="seg">
          {['diamond', 'circle', 'square', 'ring'].map((k) =>
          <button key={k} className={tweaks.nodeStyle === k ? 'on' : ''} onClick={() => set('nodeStyle', k)}>{k}</button>
          )}
        </div>
      </TweakRow>

      <TweakRow label="Packets">
        <div className="seg">
          {['dot', 'dash', 'pulse', 'off'].map((k) =>
          <button key={k} className={tweaks.packetStyle === k ? 'on' : ''} onClick={() => set('packetStyle', k)}>{k}</button>
          )}
        </div>
      </TweakRow>

      <TweakRow label="Packet rate">
        <input type="range" min="0" max="1" step="0.05" value={tweaks.packetRate ?? 0.5} onChange={(e) => set('packetRate', parseFloat(e.target.value))} />
        <span className="val">{(tweaks.packetRate ?? 0.5).toFixed(2)}</span>
      </TweakRow>

      <TweakRow label="Line weight">
        <input type="range" min="0.5" max="2" step="0.1" value={tweaks.lineWeight ?? 1} onChange={(e) => set('lineWeight', parseFloat(e.target.value))} />
        <span className="val">{(tweaks.lineWeight ?? 1).toFixed(1)}</span>
      </TweakRow>

      <TweakRow label="Line opacity">
        <input type="range" min="0.05" max="0.5" step="0.01" value={tweaks.lineOpacity ?? 0.22} onChange={(e) => set('lineOpacity', parseFloat(e.target.value))} />
        <span className="val">{(tweaks.lineOpacity ?? 0.22).toFixed(2)}</span>
      </TweakRow>

      <TweakRow label="Labels">
        <div className="seg">
          {['off', 'sparse', 'frequent', 'coords'].map((k) =>
          <button key={k} className={tweaks.labels === k ? 'on' : ''} onClick={() => set('labels', k)}>{k}</button>
          )}
        </div>
      </TweakRow>

      <TweakRow label="Vocabulary">
        <div className="seg">
          {['agent', 'intent', 'mix', 'encode'].map((k) =>
          <button key={k} className={tweaks.vocab === k ? 'on' : ''} onClick={() => set('vocab', k)}>{k}</button>
          )}
        </div>
      </TweakRow>

      <TweakRow label="Vignette">
        <input type="range" min="0" max="0.8" step="0.02" value={tweaks.vignette ?? 0.35} onChange={(e) => set('vignette', parseFloat(e.target.value))} />
        <span className="val">{(tweaks.vignette ?? 0.35).toFixed(2)}</span>
      </TweakRow>

      <TweakRow label="Grain">
        <input type="range" min="0" max="0.5" step="0.02" value={tweaks.grain ?? 0} onChange={(e) => set('grain', parseFloat(e.target.value))} />
        <span className="val">{(tweaks.grain ?? 0).toFixed(2)}</span>
      </TweakRow>

      <TweakRow label="Breathe">
        <input type="range" min="0" max="1" step="0.05" value={tweaks.breathe ?? 0.3} onChange={(e) => set('breathe', parseFloat(e.target.value))} />
        <span className="val">{(tweaks.breathe ?? 0.3).toFixed(2)}</span>
      </TweakRow>

      <div className="tw-section">Page</div>

      <TweakRow label="Accent">
        <div className="swatches">
          {ACCENT_SWATCHES.map((c) =>
          <button key={c} style={{ background: c }} className={tweaks.accent === c ? 'sw on' : 'sw'} onClick={() => set('accent', c)} aria-label={c} />
          )}
        </div>
      </TweakRow>

      <TweakRow label="Mode">
        <div className="seg">
          <button className={!tweaks.dark ? 'on' : ''} onClick={() => set('dark', false)}>light</button>
          <button className={tweaks.dark ? 'on' : ''} onClick={() => set('dark', true)}>dark</button>
        </div>
      </TweakRow>

      <TweakRow label="Type">
        <select value={tweaks.fontPair} onChange={(e) => set('fontPair', e.target.value)}>
          {FONT_PAIRS.map((f) => <option key={f.key} value={f.key}>{f.label}</option>)}
        </select>
      </TweakRow>

      <TweakRow label="Headline">
        <div className="seg">
          {[0, 1, 2].map((i) =>
          <button key={i} className={tweaks.heroVariant === i ? 'on' : ''} onClick={() => set('heroVariant', i)}>v{i + 1}</button>
          )}
        </div>
      </TweakRow>
    </div>);

}

function TweakRow({ label, children }) {
  return (
    <div className="tw-row">
      <label>{label}</label>
      <div className="tw-ctrl">{children}</div>
    </div>);

}

// ---- APP --------------------------------------------------------------------
function App() {
  const [tweaks, setTweaks] = useState(DEFAULT_TWEAKS);
  const [editMode, setEditMode] = useState(false);

  // Expose tweaks to canvas
  useEffect(() => {
    window.__tweaks = tweaks;
  }, [tweaks]);

  // Apply font + accent via CSS vars
  useEffect(() => {
    const pair = FONT_PAIRS.find((p) => p.key === tweaks.fontPair) || FONT_PAIRS[0];
    const r = document.documentElement;
    r.style.setProperty('--serif', pair.display);
    r.style.setProperty('--sans', pair.ui);
    r.style.setProperty('--accent', tweaks.accent);
    r.dataset.theme = tweaks.dark ? 'dark' : 'light';
  }, [tweaks]);

  // Scroll progress → window.__scrollProgress
  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      window.__scrollProgress = max > 0 ? Math.min(1, Math.max(0, h.scrollTop / max)) : 0;
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Edit mode plumbing
  useEffect(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setEditMode(true);
      if (e.data.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // Persist tweaks to file
  useEffect(() => {
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: tweaks }, '*');
  }, [tweaks]);

  return (
    <>
      <Topology />
      <div className="page">
        <Nav />
        <main>
          <Hero variant={tweaks.heroVariant} />
          <WhatWeEncode />
          <HowItWorks />
          <BestSuitedFor />
          <Results />
          <BeyondAdvisory />
          <About />
          <Notes />
          <Contact />
        </main>
        <Footer />
      </div>
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} visible={editMode} />
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);