// Agentics Capital — page sections.
// Based on Advisory's design system. Same primitives, Capital-specific content.

const { useState, useEffect, useRef } = React;

// ---- Tiny inline sparkline (editorial ink) ----------------------------------
function Sparkline({ seed = 1, width = 86, height = 22, color = '#2A2F36' }) {
  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 ------------------------------------------------------------
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 Capital — home">
          <span className="wm-serif">Agentics Capital</span>
        </a>
        <div className="channel-pair" aria-label="Two channels">
          <span className="channel current">
            <span className="channel-dot" aria-hidden="true">•</span>
            Capital
          </span>
          <a className="channel other" href="https://agenticsadvisory.ai">
            Advisory
            <span className="channel-arrow" aria-hidden="true">↗</span>
          </a>
        </div>
      </div>
      <a className="nav-cta" href="#contact">Register interest</a>
    </nav>);
}

// ---- HERO -------------------------------------------------------------------
function Hero() {
  return (
    <Section id="hero" label="01 Hero">
      <div className="hero-grid">
        <Scrim className="hero-copy">
          <div className="eyebrow">Agentics Capital · Adelaide</div>
          <h1 className="display">
            <span className="display-line">Your business runs</span>
            <span className="display-line">on judgment that&rsquo;s</span>
            <span className="display-line">never been written down.</span>
          </h1>
          <p className="lede">
            Your best people know when to bend a rule, when to push a sale, when to spend extra time. That judgment is the business. We encode it into systems that run on your behalf &mdash; so the wisdom stays, even as the world changes.
          </p>
          <div className="hero-actions">
            <a href="#contact" className="btn-primary">Register your interest</a>
            <a href="#thesis" className="btn-ghost">The thesis →</a>
          </div>
          <div className="hero-meta">
            <span>Est. 2025</span>
            <span className="dot" />
            <span>Adelaide, AU</span>
            <span className="dot" />
            <span>Advisory · Equity</span>
          </div>
        </Scrim>

        <Scrim className="hero-stat">
          <div className="stat-number">4<span className="stat-pct">–5</span></div>
          <div className="stat-label">
            new engagements per year. We go deep, which means we cannot go wide.
          </div>
          <div className="hr" />
          <p className="stat-note">
            We embed inside each business — deploying systems, training teams, driving transformation. The 2026 programme is committed through August.
          </p>
        </Scrim>
      </div>
    </Section>);
}

// ---- THESIS -----------------------------------------------------------------
function Thesis() {
  return (
    <Section id="thesis" label="02 Thesis">
      <div className="section-head">
        <Scrim className="head-inner">
          <div className="eyebrow">Thesis</div>
          <h2 className="h-display">Thousands of essential Australian businesses are sitting on unrealised value.</h2>
        </Scrim>
      </div>

      <div className="thesis-body">
        <Scrim className="thesis-card">
          <p>Profitable, essential, well-run &mdash; not because anything is broken, but because the knowledge that makes them work has never been captured in a form that scales.</p>
          <p>Most AI deployments fail. Not because the technology doesn&rsquo;t work &mdash; it works brilliantly. They fail because nobody taught the AI what the business actually values. A major fintech deployed AI customer service that saved sixty million dollars, then nearly destroyed their brand. The AI was fast, efficient, and optimising for exactly the wrong objective. The wisdom that mattered &mdash; when to be generous, when to escalate, when efficiency is less important than trust &mdash; walked out the door with the humans who were let go.</p>
          <p>We start where others skip. Before deploying a single system, we map how your business actually makes decisions &mdash; the unwritten rules, the trade-offs your experienced people navigate instinctively, the values that no process document has ever captured. We encode that judgment into systems that act on your behalf. Then we deploy AI that doesn&rsquo;t just work &mdash; it works the way <em>you</em> would.</p>
        </Scrim>
      </div>
    </Section>);
}

// ---- HOW WE WORK ------------------------------------------------------------
const WORK_PHASES = [
{
  n: '01',
  focus: 'Phase I · First 90 days',
  title: 'Map the intent, deploy the quick wins',
  body: 'We embed with your team. Before we touch any technology, we interview your key people — the ones who carry the judgment that makes the business work. We map decision boundaries, trade-off hierarchies, and the unwritten rules nobody has documented. Then we deploy battle-tested AI for the highest-impact opportunities: lead generation, scheduling, quoting, admin reduction. Real systems generating real returns within weeks — but built on a foundation of your business\u2019s actual values, not generic automation.'
},
{
  n: '02',
  focus: 'Phase II · Months 3–12',
  title: 'Build the intelligence architecture',
  body: 'With momentum established and intent encoded, we address the deeper structure: end-to-end workflow automation, intelligent resource planning, AI-assisted customer service that knows when to be efficient and when to be generous. Your business begins operating with encoded judgment at every decision point — the kind of institutional wisdom that used to take a new hire five years to absorb.'
},
{
  n: '03',
  focus: 'Phase III · Year two and beyond',
  title: 'Compounding autonomy',
  body: 'The business runs on encoded intent, not tribal knowledge. Revenue is higher. Margins are wider. Your best people are doing their best work — augmented, not replaced. The wisdom that used to live in one person\u2019s head now lives in systems that scale. And you choose your level of involvement — from daily operations to quarterly board meetings.'
}];


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

      <ol className="steps">
        {WORK_PHASES.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 < WORK_PHASES.length - 1 ? '↘' : '●'}
              </div>
            </Scrim>
          </li>
        )}
      </ol>
    </Section>);
}

// ---- ENGAGEMENT MODELS ------------------------------------------------------
const MODELS = [
{
  tag: 'Hybrid',
  title: 'Advisory retainer with equity',
  body: 'Monthly advisory engagement at below-market rates, combined with a minority equity stake that vests as milestones are achieved. Gives you immediate access to our expertise with cash flow from day one, while aligning our long-term interests through shared ownership.',
  terms: [
  ['Retainer', 'Monthly, below-market'],
  ['Equity', 'Minority stake, vests over milestones'],
  ['Board seat', 'Included'],
  ['Commitment', '3-year minimum']]
},
{
  tag: 'Capital',
  title: 'Pure equity partnership',
  body: 'No retainer. No fees. We deploy our full capability in exchange for a larger equity stake. Best suited for high-conviction opportunities where the transformation potential is significant and both parties are prepared to commit fully to the long-term outcome.',
  terms: [
  ['Retainer', 'None'],
  ['Equity', 'Larger minority stake'],
  ['Board seat', 'Included'],
  ['Capacity', '1–2 per year maximum']]
},
{
  tag: 'Results',
  title: 'Performance-linked',
  body: 'Our compensation is tied directly to the results we generate. A smaller equity stake combined with a share of the measurable EBITDA improvement we deliver. Ideal for owners who want full alignment between what we earn and what we achieve.',
  terms: [
  ['Retainer', 'None'],
  ['Equity', 'Smaller minority stake'],
  ['Performance', 'Share of EBITDA improvement'],
  ['Board seat', 'Included']]
}];


function Engagement() {
  return (
    <Section id="engagement" label="04 Engagement">
      <div className="section-head">
        <Scrim className="head-inner">
          <div className="eyebrow">Engagement</div>
          <h2 className="h-display">Three models. Chosen together. Tailored to fit.</h2>
          <p className="lede-sm">
            Every business is different. We structure each engagement to match the opportunity, the owner&rsquo;s preferences, and the depth of transformation required.
          </p>
        </Scrim>
      </div>

      <div className="models">
        {MODELS.map((m, i) =>
        <Scrim key={i} className="model-card">
            <div className="model-head">
              <span className="model-tag">{m.tag}</span>
              <Sparkline seed={i + 7} />
            </div>
            <h3 className="model-title">{m.title}</h3>
            <p className="model-body">{m.body}</p>
            <dl className="model-terms">
              {m.terms.map(([k, v], j) =>
              <div key={j} className="model-term">
                  <dt>{k}</dt>
                  <dd>{v}</dd>
                </div>
              )}
            </dl>
          </Scrim>
        )}
      </div>

      <Scrim className="model-note-card">
        <p className="model-note">The right structure emerges from conversation, not a menu. We discuss your goals, your business, and what alignment looks like for you.</p>
      </Scrim>
    </Section>);
}

// ---- PRINCIPLES -------------------------------------------------------------
const PRINCIPLES = [
['Intent before automation', 'Before we deploy a single AI system, we map how your business actually makes decisions. The judgment calls your warehouse manager makes at 6am. The way your best salesperson knows when to push and when to back off. The unwritten rules that make your business work. We encode that first. The automation follows.'],
['Alignment by structure, not promise', 'Every engagement model we offer is designed so that our incentives and yours are inseparable. We don\u2019t just say we\u2019re aligned — the deal structure guarantees it.'],
['Patient by design', 'We think in years, not quarters. Whether through equity, performance fees, or a combination — our returns are tied to the durable success of your business.'],
['People grow, they don\u2019t go', 'AI replaces tasks, not people. Your office manager becomes a strategic coordinator. Your sales team becomes relationship architects with AI doing the prospecting. We upskill, not downsize.'],
['Operators, not consultants', 'We deploy systems, train teams, and drive outcomes. We don\u2019t produce reports and leave. If it doesn\u2019t work, we haven\u2019t earned our keep — regardless of the engagement model.']];


function Principles() {
  return (
    <Section id="principles" label="05 Principles">
      <div className="fit-wrap">
        <Scrim className="fit-aside">
          <div className="eyebrow">Principles</div>
          <h2 className="h-display small">How we work, written down.</h2>
          <p className="lede-sm">
            We codify the things most operators only say. Below is how we behave when there&rsquo;s no contract to point at.
          </p>
        </Scrim>
        <Scrim className="fit-table">
          <dl>
            {PRINCIPLES.map(([k, v], i) =>
            <div className="fit-row" key={i}>
                <dt>{k}</dt>
                <dd>{v}</dd>
              </div>
            )}
          </dl>
        </Scrim>
      </div>
    </Section>);
}

// ---- CRITERIA ---------------------------------------------------------------
const CRITERIA = [
['Revenue', '$5M+ annual. Established and profitable.'],
['Industry', 'Economy-essential services — trades, logistics, healthcare, aged care, manufacturing, waste management, agricultural services, food production, facilities management. Industries that endure.'],
['Condition', 'Dusty, not rusty. The business works — it just hasn\u2019t been modernised. Good bones, loyal customers, reliable revenue.'],
['Location', 'Australia. We work hands-on, and proximity matters.'],
['Operations', 'High manual-process overhead. Paper-based quoting, phone-driven scheduling, spreadsheet reporting. The more analogue the operation, the greater the opportunity.'],
['Owner', 'Open to change. Doesn\u2019t need to understand AI — just needs to believe the business deserves better than the status quo.']];

const EXCLUSIONS = [
'Digital agencies or consultancies',
'Franchise operations',
'Pure retail or discretionary consumer',
'Turnaround or rescue situations',
'Already heavily automated',
'Seeking exit within 12 months'];


function Criteria() {
  return (
    <Section id="criteria" label="06 What we look for">
      <div className="section-head">
        <Scrim className="head-inner">
          <div className="eyebrow">What we look for</div>
          <h2 className="h-display">Dusty, not rusty.</h2>
          <p className="lede-sm">
            The pattern we keep returning to: an established business that works, run by an owner who knows it deserves better than the status quo.
          </p>
        </Scrim>
      </div>

      <div className="criteria-wrap">
        <Scrim className="criteria-table">
          <dl>
            {CRITERIA.map(([k, v], i) =>
            <div className="criteria-row" key={i}>
                <dt>{k}</dt>
                <dd>{v}</dd>
              </div>
            )}
          </dl>
        </Scrim>

        <Scrim className="exclusions">
          <div className="eyebrow">Not a fit</div>
          <ul>
            {EXCLUSIONS.map((e, i) => <li key={i}>{e}</li>)}
          </ul>
        </Scrim>
      </div>
    </Section>);
}

// ---- VISION -----------------------------------------------------------------
const VISIONS = [
{
  who: 'For you',
  body: 'More income, less stress, real freedom. Stay as involved as you like — or hand the keys to the next generation with confidence.'
},
{
  who: 'For your family',
  body: 'A business worth inheriting, or worth substantially more at a future sale. A legacy that compounds rather than depends on one person.'
},
{
  who: 'For your team',
  body: 'Higher-value roles, better tools, clearer systems. The kind of workplace that attracts talent instead of burning through it.'
}];


function Vision() {
  return (
    <Section id="vision" label="07 The endgame">
      <div className="section-head">
        <Scrim className="head-inner">
          <div className="eyebrow">The endgame</div>
          <h2 className="h-display">Imagine your business eighteen months from now.</h2>
          <p className="lede-sm">
            The wisdom that used to live in your head &mdash; and in the heads of your three best people &mdash; now lives in systems that run twenty-four hours a day. Revenue up. Margins wider. New customers arriving systematically. Your team working on the things that matter. And you, showing up when you want to &mdash; not because the place falls apart without you.
          </p>
        </Scrim>
      </div>

      <div className="vision-grid">
        {VISIONS.map((v, i) =>
        <Scrim key={i} className="vision-card">
            <div className="vision-who">{v.who}</div>
            <p>{v.body}</p>
          </Scrim>
        )}
      </div>
    </Section>);
}

// ---- ABOUT (folded principals from Advisory) --------------------------------
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="08 About">
      <div className="section-head">
        <Scrim className="head-inner">
          <div className="eyebrow">About</div>
          <h2 className="h-display">Operators, not consultants.</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 &amp; beverage, hospitality, manufacturing, wholesale distribution, and e-commerce &mdash; employing fifty-plus people at any given time. We deploy systems in our own businesses before we deploy them in yours.
          </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>);
}

// ---- 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">
            No pitch deck. No obligation. A confidential, direct conversation between business owners about what structure might work for you. We respond personally within 48 hours. Expressions of interest are reviewed in the order received.
          </p>
          <div className="contact-actions">
            <a className="btn-primary large" href="mailto:capital@agenticscapital.ai">Begin a conversation</a>
            <a className="btn-ghost" href="mailto:capital@agenticscapital.ai">capital@agenticscapital.ai</a>
          </div>
          <div className="contact-meta">Adelaide · Australia · Capacity 4–5 per year</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 Capital</div>
          <div className="foot-sub">Adelaide, Australia · © 2026 · Capacity 4–5 per year</div>
        </div>
        <div className="foot-col right">
          <a href="https://agenticsadvisory.ai" target="_blank" rel="noreferrer">Agentics Advisory ↗</a>
          <a href="mailto:capital@agenticscapital.ai">capital@agenticscapital.ai</a>
        </div>
      </div>
    </footer>);
}

// ---- APP --------------------------------------------------------------------
function App() {
  const [tweaks] = useState(window.__defaultTweaks || {});

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

  // Apply accent + theme via CSS vars (font is now baked into styles.css default)
  useEffect(() => {
    const r = document.documentElement;
    if (tweaks.accent) r.style.setProperty('--accent', tweaks.accent);
    r.dataset.theme = tweaks.dark ? 'dark' : 'light';
  }, [tweaks]);

  // Scroll progress → window.__scrollProgress (Topology reads this for motion)
  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);
  }, []);

  return (
    <>
      <Topology />
      <div className="page">
        <Nav />
        <main>
          <Hero />
          <Thesis />
          <HowWeWork />
          <Engagement />
          <Principles />
          <Criteria />
          <Vision />
          <About />
          <Contact />
        </main>
        <Footer />
      </div>
    </>);
}

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