/* global React, OntologyStack, WorkSplit, LeakageViz, TwinGraph,
   TweaksPanel, TweakSection, TweakRadio, TweakColor, useTweaks,
   PartnerModalProvider, usePartnerModal */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "mint",
  "type": "editorial",
  "density": "comfortable",
  "img": "natural"
}/*EDITMODE-END*/;

function PartnerCTA({ className = "btn", children }) {
  const { open } = usePartnerModal();
  return (
    <button type="button" className={className} onClick={open}>
      {children}
    </button>
  );
}

function ArrowIcon() {
  return (
    <svg className="arr" viewBox="0 0 14 14" aria-hidden="true">
      <path d="M2 7h10M8 3l4 4-4 4" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  // Close menu on link click + on resize past breakpoint
  React.useEffect(() => {
    if (!open) return;
    const close = () => setOpen(false);
    const onResize = () => { if (window.innerWidth > 760) setOpen(false); };
    document.body.style.overflow = "hidden";
    window.addEventListener("resize", onResize);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("resize", onResize);
    };
  }, [open]);

  const links = [
    { href: "#thesis", label: "Thesis" },
    { href: "#building", label: "Products" },
    { href: "#telos42", label: "Telos42" },
    { href: "#team", label: "Team" },
    { href: "statement.html", label: "Statement" },
    { href: "#contact", label: "Contact" },
  ];

  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "") + (open ? " is-open" : "")}>
      <div className="page nav-inner">
        <a className="brand" href="#top" onClick={() => setOpen(false)}>
          <img src="assets/logo.png" alt="Tavyaan" />
          <span>Tavyaan</span>
          <span className="tag">AI-native</span>
        </a>
        <ul>
          {links.map((l) => (
            <li key={l.href}><a href={l.href}>{l.label}</a></li>
          ))}
        </ul>
        <button
          className="nav-toggle"
          type="button"
          aria-label={open ? "Close menu" : "Open menu"}
          aria-expanded={open}
          aria-controls="nav-mobile"
          onClick={() => setOpen((v) => !v)}
        >
          <span className="nav-toggle-bars" aria-hidden="true">
            <span></span><span></span>
          </span>
          <span className="nav-toggle-label">{open ? "Close" : "Menu"}</span>
        </button>
      </div>
      <div id="nav-mobile" className="nav-mobile" hidden={!open}>
        <ul>
          {links.map((l) => (
            <li key={l.href}>
              <a href={l.href} onClick={() => setOpen(false)}>
                <span>{l.label}</span>
                <ArrowIcon />
              </a>
            </li>
          ))}
        </ul>
        <div className="nav-mobile-foot">
          <a href="mailto:enquiry@tavyaan.com?subject=Design%20partner%20enquiry" onClick={() => setOpen(false)}>
            enquiry@tavyaan.com
          </a>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  const { armed, lit, arm } = useNorthStar();
  return (
    <section className="hero page" id="top">
      <div className="eyebrow"><span className="dot"></span>AI-native product firm &middot; London</div>
      <h1 className="display">
        The work itself <em>needs to reason,</em> not just run faster.
      </h1>
      <div className="hero-meta">
        <div className="lede-col">
          <p className="lede">
            AI is infrastructural now. We build <em>structured intelligence</em>, systems that reason against a world model rather than guess at one, shipped as products. The value that broken processes leave behind, recovered and made accountable.
          </p>
        </div>
        <div className="cta-col">
          <PartnerCTA>Become a design partner <ArrowIcon /></PartnerCTA>
          <a className="btn ghost" href="statement.html">Read the statement</a>
        </div>
      </div>
      <div className="marquee" aria-label="Domains in play">
        <span>Music IP &amp; royalties</span><span className="sep">/</span>
        <span>Asset-backed securities</span><span className="sep">/</span>
        <span>Banking</span><span className="sep">/</span>
        <span>Lending</span><span className="sep">/</span>
        <span>Payments</span><span className="sep">/</span>
        <span>Insurance</span><span className="sep">/</span>
        <span>Multilateral &amp; regulator workflows</span>
      </div>

      <div className="bleed hero-figure">
        <Figure
          src="https://images.unsplash.com/photo-1454789548928-9efd52dc4031?auto=format&fit=crop&w=2400&q=80"
          alt="Architectural concrete forms meeting open sky"
          fig="I"
          caption="Foundations. What needs to be true"
          ratio="21 / 8"
        />
        <button
          type="button"
          className={"ns-hotspot" + (armed ? " is-armed" : "") + (lit ? " is-lit" : "")}
          aria-label=""
          tabIndex={-1}
          onClick={() => { if (!lit) arm(); }}
        />
        <NorthStarOverlay armed={armed} lit={lit} />
      </div>
    </section>
  );
}

function Thesis() {
  return (
    <section className="section page" id="thesis">
      <div className="two-col">
        <div className="section-head" data-chapter="01">
          <span className="eyebrow"><span className="num">01 · </span>Why we exist</span>
          <h2 className="section-title">Most of what the world calls AI is still Work 2.0.</h2>
        </div>
        <div className="body-col">
          <p>
            Take an existing process, automate the steps, measure throughput, reduce cost.
            It works. And it is <strong>architecturally capped</strong>. You cannot make a predetermined
            sequence run faster than its slowest mandatory step. You cannot discover what you
            never thought to look for. You cannot learn continuously from a system that only
            improves in quarterly review cycles.
          </p>
          <p>
            Work 3.0 is a different question entirely. Not <em>“how do we execute this faster?”</em>, but
            <em> “what needs to be true?”</em> A system that starts with a goal, reasons about
            constraints, discovers its own workflow, and gets smarter with every decision it makes.
          </p>
          <div className="inset">
            The shift is not incremental. Every dollar invested in making Work 2.0 faster moves
            an organisation deeper into a paradigm that cannot reach where it needs to go.
          </div>
          <p>
            The cost of cognition has collapsed. A task that cost $20 of expert time three years
            ago now runs for fractions of a cent. But most enterprises are bolting that cheap
            cognition onto an operating model designed in 1776, for a world where thinking was
            scarce. <strong>Fast bureaucracy is still bureaucracy.</strong>
          </p>
        </div>
      </div>
    </section>
  );
}

function Shift() {
  return (
    <section className="section page" id="shift">
      <div className="two-col">
        <div className="section-head" data-chapter="02">
          <span className="eyebrow"><span className="num">02 · </span>The shift</span>
          <h2 className="section-title">Two paradigms. Different domains entirely.</h2>
        </div>
        <div className="body-col">
          <p>
            Work 2.0 optimises a sequence. Work 3.0 optimises a goal.
          </p>
          <WorkSplit />
          <p style={{ marginTop: 32 }}>
            The organisations that recognise this first will build compound learning advantages
            that late movers cannot close.
          </p>
        </div>
      </div>

      <div className="bleed" style={{ marginTop: "clamp(64px, 8vw, 120px)" }}>
        <Figure
          src="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=2400&q=80"
          alt="Macro photograph of a circuit board"
          fig="II"
          caption="Ontology. Structure beneath the surface"
          ratio="21 / 8"
        />
      </div>
    </section>
  );
}

function Telos42() {
  return (
    <section className="section page" id="telos42">
      <div className="two-col">
        <div className="section-head" data-chapter="03">
          <span className="eyebrow"><span className="num">03 · </span>What is Telos42</span>
          <h2 className="section-title">A domain intelligence layer for goal-oriented SuperAgents.</h2>
        </div>
        <div className="body-col">
          <p>
            The agentic stack is commoditising fast. Model providers, agent frameworks, retrieval, all replaceable and increasingly indistinguishable. The durable advantage sits one layer up: a system that encodes how an industry actually operates and uses everything below it to act on that understanding.
          </p>
          <p>
            <strong>Telos42</strong> is that layer. It leverages best-of-breed agentic infrastructure underneath, and turns it into goal-oriented SuperAgents reasoning against a seven-layer world model, from raw signal up to governance and decision tracing. The infrastructure beneath us improves continuously. The intelligence above it compounds.
          </p>
        </div>
      </div>

      <div style={{ marginTop: 64 }}>
        <OntologyStack />
      </div>

      <div className="trio">
        <div className="card">
          <span className="tag">telos42.core</span>
          <h4>The intelligence substrate.</h4>
          <p>
            Domain-agnostic. Ontology framework, world-model construction, goal management,
            rule evaluation, and SHA-256 decision tracing. Everything runs on this.
          </p>
        </div>
        <div className="card">
          <span className="tag">SuperAgent</span>
          <h4>One agent. The full ontology.</h4>
          <p>
            A single autonomous agent operating against the full domain ontology for a specific
            function. It reasons about causality rather than just pattern-matching.
          </p>
        </div>
        <div className="card">
          <span className="tag">SuperOrganisation</span>
          <h4>An ensemble of SuperAgents.</h4>
          <p>
            A coordinated network covering the full operational surface of a domain. It shares a
            common world model and a single decision trace.
          </p>
        </div>
      </div>

      <div className="card" style={{ marginTop: 24 }}>
        <div style={{ display: "flex", justifyContent: "space-between", gap: 24, flexWrap: "wrap", alignItems: "center" }}>
          <div>
            <div className="eyebrow"><span className="dot"></span>Deployment model</div>
            <p style={{ fontFamily: "var(--display)", fontSize: 22, lineHeight: 1.3, margin: "10px 0 0", maxWidth: "40ch" }}>
              No rip-and-replace. Telos42 connects to existing systems, builds a living digital
              twin, and progressively takes on more of the operational surface.
            </p>
          </div>
          <div className="phases">
            <div className="phase"><span>01</span><b>Listen</b></div>
            <div className="phase-arrow">→</div>
            <div className="phase"><span>02</span><b>Reason</b></div>
            <div className="phase-arrow">→</div>
            <div className="phase active"><span>03</span><b>Act</b></div>
            <div className="phase-foot">Only when you are ready.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Building() {
  return (
    <section className="section page" id="building">
      <div className="two-col">
        <div className="section-head" data-chapter="04">
          <span className="eyebrow"><span className="num">04 · </span>Products</span>
          <h2 className="section-title">Every asset has a gap between what it earns and what it should.</h2>
        </div>
        <div className="body-col">
          <p>
            Income that leaks. Risk that compounds invisibly. Valuations built on both. Whether
            it is a royalty catalogue, a lending book, a payments operation, or an insurance
            portfolio, the underlying problem is structurally identical.
          </p>
          <p>
            <strong>Revenue that should exist does not. Risk that should be visible is not.</strong> The valuation
            that rests on both is wrong as a result, and every decision made against that
            valuation carries the error forward. The artist who is owed, the borrower who is judged, the regulator who cannot see, they all pay the cost.
          </p>
        </div>
      </div>

      <div className="track" id="limestreet">
        <div className="meta">
          <div className="label">Track 01 · In market</div>
          <h3>Limestreet</h3>
          <div className="muted" style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.06em" }}>
            Music IP · Royalty intelligence · Catalogue ABS
          </div>
          <p style={{ marginTop: 12, fontSize: 15.5 }}>
            A SuperAgent grounded in a deep ontology of music rights, royalties and catalogue
            intelligence. It finds the gap, arrests the leakage, and turns a recovered position
            into a compounding advantage.
          </p>
          <p style={{ fontSize: 15.5 }}>
            Limestreet ships today with a curated set of design partners: PE funds and asset managers running music IP-backed securities. Building toward GA.
          </p>
          <PartnerCTA className="btn ghost">
            Design partner enquiries <ArrowIcon />
          </PartnerCTA>
        </div>
        <div className="body">
          <LeakageViz />
        </div>
      </div>

      <div className="bleed" style={{ margin: "48px 0" }}>
        <Figure
          src="https://images.unsplash.com/photo-1501612780327-45045538702b?auto=format&fit=crop&w=2400&q=80"
          alt="Performance stage seen from the audience at distance, silhouettes in the foreground"
          fig="III"
          caption="Reach. Domain-portable, asset-specific"
          ratio="21 / 8"
        />
      </div>

      <div className="track" id="hive">
        <div className="meta">
          <div className="label">Track 02 · Design Preview</div>
          <h3>Hive</h3>
          <div className="muted" style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.06em" }}>
            Design preview · New business models · New industry cores
          </div>
          <p style={{ marginTop: 12, fontSize: 15.5 }}>
            Hive is where Tavyaan builds what comes after Limestreet. New business models, new industry cores, patterns the world model has not been built for yet.
          </p>
          <p style={{ fontSize: 15.5 }}>
            <b>Compass for Retail Banking.</b> A working retail bank modelled end to end, wrapped in a connected intelligence layer that links every product to its accounting consequence, every regulation to its filing, every operation to its control. The WorldModel every Tavyaan agent is grounded in.
          </p>
          <p style={{ fontSize: 15.5 }}>
            <b>Vehicle lending.</b> Agentic underwriting and portfolio operations against asset, market, and counterparty data the legacy stack cannot reason about.
          </p>
          <p style={{ fontSize: 15.5 }}>
            We work with a small set of partners and academic collaborators to develop these patterns at full depth.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 4 }}>
            <PartnerCTA className="btn ghost">
              Collaborate with Hive <ArrowIcon />
            </PartnerCTA>
            <a className="btn ghost" href="compass.html">
              See Compass for Retail Banking <ArrowIcon />
            </a>
          </div>
        </div>
        <div className="body">
          <TwinGraph />
        </div>
      </div>

      <div className="portable">
        <div className="eyebrow"><span className="dot"></span>Portable logic</div>
        <p className="lede" style={{ maxWidth: "44ch", marginTop: 12 }}>
          The approach is domain-portable. What it does for a music publisher, it does for a
          lender, and for an insurer after that. The asset changes. The approach does not.
        </p>
        <div className="portable-row">
          <div data-status="active"><b>Music IP</b><span>active</span></div>
          <div data-status="building"><b>Vehicle lending</b><span>building</span></div>
          <div data-status="queued"><b>Payments</b><span>queued</span></div>
          <div data-status="queued"><b>Insurance</b><span>queued</span></div>
        </div>
      </div>
    </section>
  );
}

function Team() {
  return (
    <section className="section page" id="team">
      <div className="two-col">
        <div className="section-head" data-chapter="05">
          <span className="eyebrow"><span className="num">05 · </span>Team</span>
          <h2 className="section-title">Seasoned operators with domain depth and creativity at scale.</h2>
        </div>
        <div className="body-col">
          <p>
            The founding team spent years building high-ROI intelligent systems for Fortune 100
            organisations including Citi, AWS, and Intel. That work taught us something
            specific. The missing layer between large language models and real business outcomes
            is not more prompting or finer tuning. It is <strong>domain knowledge encoded as operational
            structure that agents can reason over.</strong> Stack it deep enough, and agents stop being
            task runners. They become decision makers.
          </p>
        </div>
      </div>

      <div className="bio-grid">

        <article className="bio-col">
          <header className="bio-col-head">
            <div className="bio-role">Chief Executive Officer</div>
            <h3 className="bio-name">
              Brian<br />Jamieson
              <a className="bio-li" href="https://www.linkedin.com/in/jamiesonbrian/" target="_blank" rel="noopener noreferrer" aria-label="Brian Jamieson on LinkedIn">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.61 0 4.27 2.38 4.27 5.47v6.27zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z" fill="currentColor"/>
                </svg>
              </a>
            </h3>
          </header>
          <div className="bio-portrait">
            <img src="assets/brian.png" alt="Brian Jamieson" />
          </div>
          <p className="bio-lede">
            Twenty-five years where regulated finance meets the industries with the most complex revenue.
          </p>
          <ul className="bio-roles">
            <li><b>Schneider FX.</b> Co-founder. Scaled to $15B annual FX turnover. Acquired by Banca Monex.</li>
            <li><b>Centtrip.</b> Co-founder. FCA-regulated EMI, Top 100 UK fintech. Music, film, media, superyachting.</li>
            <li><b>Invest Bank UAE.</b> Head of Digital. Advisor across the KSA / GCC fintech corridor.</li>
          </ul>
          <p className="bio-throughline">
            <span className="bio-throughline-label">Throughline.</span>{" "}
            Finding markets that have outgrown their financial infrastructure, and building what replaces it.
          </p>
        </article>

        <article className="bio-col">
          <header className="bio-col-head">
            <div className="bio-role">Chief Product &amp; Technology Officer</div>
            <h3 className="bio-name">
              Senthilkumar<br />Ravindran
              <a className="bio-li" href="https://www.linkedin.com/in/senthil-ravindran" target="_blank" rel="noopener noreferrer" aria-label="Senthilkumar Ravindran on LinkedIn">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.61 0 4.27 2.38 4.27 5.47v6.27zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z" fill="currentColor"/>
                </svg>
              </a>
            </h3>
          </header>
          <div className="bio-portrait">
            <img src="assets/senthil.png" alt="Senthilkumar Ravindran" />
          </div>
          <p className="bio-lede">
            Inventor, technology leader, builder of platforms that link innovation to enterprise value.
          </p>
          <ul className="bio-roles">
            <li><b>Polaris.</b> Product firm with implementations across 300+ banks. Launched the Digital Banking Lab. Relationships scaled past $600M.</li>
            <li><b>Virtusa xLabs.</b> Founder, Head of Cloud Transformation. 6 patents. Open Innovation Platform adopted by MAS, IFC, and the ASEAN Bankers Association as APIX. Instrumental in the $1B AWS Strategic Collaboration with vertical solutions. Award-winning work with Microsoft, BIS, SWIFT.</li>
            <li><b>ConceptVines AI.</b> Co-founder. AI solutions for Intel, AWS, Hitachi, Guggenheim, IQVIA.</li>
          </ul>
          <p className="bio-throughline">
            <span className="bio-throughline-label">Throughline.</span>{" "}
            Design and deliver products and business models with emerging technologies, at speed.
          </p>
        </article>

        <article className="bio-col">
          <header className="bio-col-head">
            <div className="bio-role">Chief Finance &amp; Operating Officer</div>
            <h3 className="bio-name">
              Narayanasamy<br />Natarajan
              <a className="bio-li" href="https://www.linkedin.com/in/narayanasamy-natarajan-0a5927/" target="_blank" rel="noopener noreferrer" aria-label="Narayanasamy Natarajan on LinkedIn">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.61 0 4.27 2.38 4.27 5.47v6.27zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z" fill="currentColor"/>
                </svg>
              </a>
            </h3>
          </header>
          <div className="bio-portrait">
            <img src="assets/nat.png" alt="Narayanasamy Natarajan" />
          </div>
          <p className="bio-lede">
            Executive and board adviser with a proven record of accelerating enterprise value creation.
          </p>
          <ul className="bio-roles">
            <li>Senior mandates as <b>CIO, CTO, COO,</b> and <b>Group CFO.</b> P&amp;L ownership upwards of $750M.</li>
            <li>Operates across banking, insurance, financial services, pharma, energy, and sports &amp; entertainment.</li>
            <li>Leadership at <b>PwC, Citibank, EY, Deloitte, Accenture, Zurich Insurance, FIFA, Polaris, ConceptVines AI,</b> and international ventures.</li>
          </ul>
          <p className="bio-throughline">
            <span className="bio-throughline-label">Throughline.</span>{" "}
            Translating board-level conviction into operational reality across complex, multi-jurisdictional businesses.
          </p>
        </article>

      </div>

      <div className="aff-strip">
        <div className="aff-head">
          <div className="eyebrow"><span className="dot"></span>Where the team has built</div>
          <p className="aff-lede">Three founders. <em>Decades of receipts.</em></p>
        </div>
        <div className="aff-rows">

          <div className="aff-row">
            <div className="aff-who">
              Brian Jamieson
              <small>Chief Executive</small>
            </div>
            <div className="aff-marks">
              <span>Centtrip</span><span className="aff-sep">/</span>
              <span>Invest Bank UAE</span><span className="aff-sep">/</span>
              <span>Schneider FX</span>
            </div>
          </div>

          <div className="aff-row">
            <div className="aff-who">
              Senthilkumar Ravindran
              <small>Chief Product &amp; Technology</small>
            </div>
            <div className="aff-marks">
              <span>APIX</span><span className="aff-sep">/</span>
              <span>AWS</span><span className="aff-sep">/</span>
              <span>Citi</span><span className="aff-sep">/</span>
              <span>Intel</span><span className="aff-sep">/</span>
              <span>Polaris</span><span className="aff-sep">/</span>
              <span>Virtusa xLabs</span>
            </div>
          </div>

          <div className="aff-row">
            <div className="aff-who">
              Narayanasamy Natarajan
              <small>Chief Finance &amp; Operating</small>
            </div>
            <div className="aff-marks">
              <span>Accenture</span><span className="aff-sep">/</span>
              <span>Citibank</span><span className="aff-sep">/</span>
              <span>Deloitte</span><span className="aff-sep">/</span>
              <span>EY</span><span className="aff-sep">/</span>
              <span>FIFA</span><span className="aff-sep">/</span>
              <span>PwC</span><span className="aff-sep">/</span>
              <span>Zurich Insurance</span>
            </div>
          </div>

        </div>
      </div>

      <div className="people">
        <div className="person">
          <div className="role">Founding Engineering</div>
          <p>
            We&rsquo;re hiring. Senior engineers and applied researchers working at the boundary
            of ontology engineering, agentic systems, and regulated-finance domain logic.
          </p>
          <div className="person-meta"><a href="mailto:careers@tavyaan.com" style={{ color: "var(--ink)" }}>careers@tavyaan.com</a></div>
        </div>
      </div>

      <a className="statement-card" href="statement.html">
        <div className="statement-card-inner">
          <div>
            <div className="eyebrow"><span className="dot"></span>From the Chief Executive</div>
            <h3 className="statement-card-title">Building what must be built.</h3>
            <p className="statement-card-sub">A statement from Brian Jamieson on what Tavyaan is for, why now, and how far it goes.</p>
          </div>
          <span className="btn ghost" role="presentation">Read the statement <ArrowIcon /></span>
        </div>
      </a>
    </section>
  );
}

function CTA() {
  return (
    <section className="section page" id="contact">
      <div className="cta">
        <div>
          <div className="eyebrow" style={{ color: "var(--paper)", opacity: 0.7 }}>
            <span className="dot"></span>Currently selecting partners. Q3 2026
          </div>
          <h2>We are working with a few select design partners. Taking on a few more for new use cases.</h2>
          <p>
            If you have a use case we should know about, talk to us. A short call is the fastest way to find out whether the fit is right.
          </p>
        </div>
        <div className="ctas">
          <PartnerCTA>Become a design partner <ArrowIcon /></PartnerCTA>
          <a className="btn ghost" href="mailto:enquiry@tavyaan.com?subject=Briefing%20request">Request a briefing <ArrowIcon /></a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const { open: openPartner } = usePartnerModal();
  return (
    <footer>
      <div className="page">
        <div className="row">
          <div>
            <a className="brand" href="#top" style={{ marginBottom: 16 }}>
              <img src="assets/logo.png" alt="Tavyaan" />
              <span>Tavyaan</span>
            </a>
            <p style={{ fontSize: 14, color: "var(--ink-mute)", maxWidth: "32ch", marginTop: 12 }}>
              Tavyaan. AI-native product firm. London.
            </p>
          </div>
          <div>
            <h5>Platform</h5>
            <ul>
              <li><a href="#telos42">Telos42</a></li>
            </ul>
          </div>
          <div>
            <h5>What we build</h5>
            <ul>
              <li><a href="#limestreet">Limestreet</a></li>
              <li><a href="#hive">Hive</a></li>
              <li><a href="compass.html">Compass for Retail Banking</a></li>
              <li><a href="#building">Roadmap</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#team">Team</a></li>
              <li><a href="statement.html">CEO statement</a></li>
              <li><button type="button" className="footer-link" onClick={openPartner}>Contact</button></li>
              <li><a href="mailto:careers@tavyaan.com">careers@tavyaan.com</a></li>
              <li><a href="legal.html">Privacy</a></li>
              <li><a href="terms.html">Terms</a></li>
            </ul>
          </div>
        </div>
        <div className="bottom">
          <div>© 2026 Tavyaan Limited &middot; Registered in England and Wales &middot; Company no. 17147085</div>
          <div>Westgate Chambers, 8a Elm Park Road, Pinner, Middlesex, HA5 3LA, United Kingdom</div>
        </div>
      </div>
    </footer>
  );
}

// ============ Pullquote: Architects of this era ============
function ArchitectsPull() {
  return (
    <section className="architects-pull">
      <div className="architects-pull-inner page">
        <p>
          <strong>Architects of this era.</strong> <em>Not its participants.</em>
        </p>
      </div>
    </section>
  );
}

// ============ Three tiers ============
function ThreeTier() {
  return (
    <section className="three-tier-section">
      <div className="page three-tier">
        <div className="three-tier-head">
          <span className="eyebrow"><span className="dot"></span>How we are organised</span>
          <p className="three-tier-lede">One firm. Three tiers. <em>Each does its own work.</em></p>
        </div>
        <div className="three-tier-grid">
          <div className="three-tier-card">
            <div className="three-tier-tag">Tavyaan</div>
            <div className="three-tier-stance">Big thinkers. Bigger builders.</div>
            <p>The vision and the conviction. The work we choose, and why it matters.</p>
          </div>
          <div className="three-tier-card">
            <div className="three-tier-tag">Telos42</div>
            <div className="three-tier-stance">Master craftsmen.</div>
            <p>The platform. Domain intelligence layered on the best agentic infrastructure.</p>
          </div>
          <div className="three-tier-card">
            <div className="three-tier-tag">Product brands</div>
            <div className="three-tier-stance">Customer-led. Industry-shaping.</div>
            <p>Limestreet for music IP. Compass for retail banking. Hive&rsquo;s next bet, tomorrow.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

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

  React.useEffect(() => {
    document.documentElement.dataset.theme = t.theme;
    document.documentElement.dataset.accent = t.accent;
    document.documentElement.dataset.type = t.type;
    document.documentElement.dataset.density = t.density;
    document.documentElement.dataset.img = t.img;
  }, [t.theme, t.accent, t.type, t.density, t.img]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakRadio
        label="Theme"
        value={t.theme}
        onChange={(v) => setTweak("theme", v)}
        options={[
          { value: "light", label: "Light" },
          { value: "dark", label: "Dark" },
        ]}
      />
      <TweakRadio
        label="Accent"
        value={t.accent}
        onChange={(v) => setTweak("accent", v)}
        options={[
          { value: "mint", label: "Mint" },
          { value: "gold", label: "Gold" },
          { value: "ink", label: "Ink" },
        ]}
      />
      <TweakRadio
        label="Type"
        value={t.type}
        onChange={(v) => setTweak("type", v)}
        options={[
          { value: "editorial", label: "Editorial" },
          { value: "modern", label: "Modern" },
          { value: "classic", label: "Classic" },
        ]}
      />
      <TweakRadio
        label="Density"
        value={t.density}
        onChange={(v) => setTweak("density", v)}
        options={[
          { value: "compact", label: "Compact" },
          { value: "comfortable", label: "Comfort" },
          { value: "spacious", label: "Spacious" },
        ]}
      />
      <TweakRadio
        label="Imagery"
        value={t.img}
        onChange={(v) => setTweak("img", v)}
        options={[
          { value: "natural", label: "Natural" },
          { value: "mono", label: "Mono" },
          { value: "duotone", label: "Duo" },
          { value: "off", label: "Off" },
        ]}
      />
    </TweaksPanel>
  );
}

function useNorthStar() {
  const [armed, setArmed] = React.useState(false);
  const [lit, setLit] = React.useState(false);
  const armTimerRef = React.useRef(null);
  const litTimerRef = React.useRef(null);
  const bufferRef = React.useRef("");

  const arm = React.useCallback(() => {
    setArmed(true);
    if (armTimerRef.current) clearTimeout(armTimerRef.current);
    armTimerRef.current = setTimeout(() => {
      setArmed(false);
      bufferRef.current = "";
    }, 6000);
  }, []);

  React.useEffect(() => {
    if (!armed) return;
    const onKey = (e) => {
      const tag = e.target && e.target.tagName;
      if (tag && /^(INPUT|TEXTAREA|SELECT)$/.test(tag)) return;
      if (!/^[0-9]$/.test(e.key)) return;
      bufferRef.current = (bufferRef.current + e.key).slice(-4);
      if (bufferRef.current.endsWith("42")) {
        setLit(true);
        setArmed(false);
        bufferRef.current = "";
        if (litTimerRef.current) clearTimeout(litTimerRef.current);
        litTimerRef.current = setTimeout(() => setLit(false), 5000);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [armed]);

  return { armed, lit, arm };
}

function NorthStarOverlay({ armed, lit }) {
  if (!lit && !armed) return null;
  return (
    <div
      className={"northstar" + (armed ? " is-armed" : "") + (lit ? " is-lit" : "")}
      aria-hidden={!lit}
    >
      <span className="ns-streak" aria-hidden="true"></span>
      <span className="ns-aura" aria-hidden="true"></span>
      <span className="ns-burst" aria-hidden="true"></span>
      <svg viewBox="0 0 120 120" className="northstar-svg" aria-hidden="true">
        <defs>
          <radialGradient id="ns-core" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#ffffff" stopOpacity="1" />
            <stop offset="40%" stopColor="#ffffff" stopOpacity="0.6" />
            <stop offset="100%" stopColor="#ffffff" stopOpacity="0" />
          </radialGradient>
          <linearGradient id="ns-ray-v" x1="60" y1="0" x2="60" y2="120" gradientUnits="userSpaceOnUse">
            <stop offset="0%"   stopColor="#ffffff" stopOpacity="0" />
            <stop offset="48%"  stopColor="#ffffff" stopOpacity="1" />
            <stop offset="52%"  stopColor="#ffffff" stopOpacity="1" />
            <stop offset="100%" stopColor="#ffffff" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="ns-ray-h" x1="0" y1="60" x2="120" y2="60" gradientUnits="userSpaceOnUse">
            <stop offset="0%"   stopColor="#ffffff" stopOpacity="0" />
            <stop offset="48%"  stopColor="#ffffff" stopOpacity="1" />
            <stop offset="52%"  stopColor="#ffffff" stopOpacity="1" />
            <stop offset="100%" stopColor="#ffffff" stopOpacity="0" />
          </linearGradient>
        </defs>

        {/* Long subtle axis rays (lens-flare feel) */}
        <g className="ns-rays-long">
          <rect x="59.4" y="0"  width="1.2" height="120" fill="url(#ns-ray-v)" />
          <rect x="0"  y="59.4" width="120" height="1.2" fill="url(#ns-ray-h)" />
        </g>

        {/* Diagonal rays */}
        <g className="ns-rays-diag" transform="rotate(45 60 60)">
          <rect x="59.6" y="20" width="0.8" height="80" fill="url(#ns-ray-v)" opacity="0.65" />
          <rect x="20" y="59.6" width="80" height="0.8" fill="url(#ns-ray-h)" opacity="0.65" />
        </g>

        {/* Classic 4-point star (Polaris diamond) */}
        <g className="ns-diamond">
          <path
            d="M60 28 L66 60 L60 92 L54 60 Z M28 60 L60 54 L92 60 L60 66 Z"
            fill="#ffffff"
          />
        </g>

        {/* Core glow */}
        <circle className="ns-core" cx="60" cy="60" r="22" fill="url(#ns-core)" />
        <circle className="ns-pip" cx="60" cy="60" r="2.4" fill="#ffffff" />
      </svg>

      {/* Orbiting micro-sparkles */}
      <span className="ns-sparkles" aria-hidden="true">
        <i style={{ "--a": "10deg",  "--r": "62px", "--d": "0.2s", "--s": "3.6s" }}></i>
        <i style={{ "--a": "70deg",  "--r": "78px", "--d": "0.9s", "--s": "4.2s" }}></i>
        <i style={{ "--a": "130deg", "--r": "55px", "--d": "1.4s", "--s": "3.2s" }}></i>
        <i style={{ "--a": "210deg", "--r": "84px", "--d": "0.5s", "--s": "4.6s" }}></i>
        <i style={{ "--a": "270deg", "--r": "60px", "--d": "1.1s", "--s": "3.8s" }}></i>
        <i style={{ "--a": "330deg", "--r": "72px", "--d": "1.7s", "--s": "3.5s" }}></i>
      </span>
    </div>
  );
}

function App() {
  // initialize document tokens from defaults on first paint
  React.useEffect(() => {
    document.documentElement.dataset.theme = TWEAK_DEFAULTS.theme;
    document.documentElement.dataset.accent = TWEAK_DEFAULTS.accent;
    document.documentElement.dataset.type = TWEAK_DEFAULTS.type;
    document.documentElement.dataset.density = TWEAK_DEFAULTS.density;
    document.documentElement.dataset.img = TWEAK_DEFAULTS.img;
  }, []);

  // Reveal-on-scroll: tag elements with class="reveal" to fade up as they enter view
  React.useEffect(() => {
    if (typeof IntersectionObserver === "undefined") return;
    // Auto-tag every section-head and section-title; opt-in elsewhere via .reveal class
    const autos = document.querySelectorAll(
      ".section-head, .architects-pull-inner, .three-tier-head, .aff-head, .portable .eyebrow, .portable .lede, .portable-row, .statement-card, .cta"
    );
    autos.forEach((el) => el.classList.add("reveal"));

    const targets = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("is-in");
          } else {
            // Only retract once the element is well outside the viewport,
            // so a small scroll wobble doesn't strip the reveal.
            const r = entry.boundingClientRect;
            const vh = window.innerHeight;
            if (r.top > vh + 120 || r.bottom < -120) {
              entry.target.classList.remove("is-in");
            }
          }
        });
      },
      { rootMargin: "0px 0px -8% 0px", threshold: [0, 0.05, 0.5] }
    );
    targets.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <PartnerModalProvider>
      <Nav />
      <main>
        <Hero />
        <Thesis />
        <Shift />
        <Telos42 />
        <ArchitectsPull />
        <Building />
        <ThreeTier />
        <Team />
        <CTA />
      </main>
      <Footer />
      <Tweaks />
    </PartnerModalProvider>
  );
}

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