// Landing page

const HeroKicker = () => (
  <a className="hero-kicker" href="products/rewards.html">
    <span className="tag">NEW</span>
    <span className="hk-msg">
      <span className="hk-title">Cobalt Rewards</span>
      <span className="hk-sub"> — earn points on every dollar of cashflow</span>
    </span>
    <span className="hk-arrow" aria-hidden="true">→</span>
  </a>
);

const Hero = () => (
  <section className="hero">
    <div className="wrap hero-inner">
      <HeroKicker/>
      <h1 className="hero-title">
        The <span className="serif">AI operating system</span><br/>for <span className="highlight-cobalt">business</span> <span className="serif">capital</span>.
      </h1>
      <p className="hero-sub">
        Banking, cards, invoicing, rewards, stablecoins and treasury — in one place, built for the way Australian businesses run today.
      </p>
      <div className="hero-cta">
        <a className="btn btn-accent btn-lg" href="https://cobaltfi.app">
          Open an account <Icon.arrow/>
        </a>
        <a className="btn btn-ghost btn-lg" href="contact.html">Book a demo</a>
      </div>
      <div className="hero-meta">
        <span><span className="bullet">●</span> AI-powered</span>
        <span><span className="bullet">●</span> AUD-native</span>
        <span><span className="bullet">●</span> Crypto-integrated</span>
        <span><span className="bullet">●</span> GST-compliant</span>
        <span><span className="bullet">●</span> API-first</span>
      </div>
    </div>
    <div className="wrap hero-stage" style={{marginTop: 80, position:'relative'}}>
      <div className="stage-orb"/>
      <div className="stage-grid"/>
      <div style={{position:'relative', zIndex:2}}>
        <DashboardMock/>
      </div>
    </div>
  </section>
);

const FeatureBanking = () => (
  <section className="feat-section">
    <div className="wrap">
      <div className="feat-row">
        <div className="feat-copy">
          <span className="eyebrow">02 · Banking</span>
          <h2>A proper bank account, <span className="ital">built like a modern app</span>.</h2>
          <p>A real Aussie business account with a real BSB — but the app feels like it was built in this decade, not 1998. Create free "pockets" inside it for payroll, tax and projects. Watch your balance tick the second money comes and goes.</p>
          <ul className="feat-bullets">
            <li><span className="check"><Icon.check/></span><span><b>A real BSB and account number</b> — works with everything that already takes one: customer payments, payroll, ATO direct debits, your accountant.</span></li>
            <li><span className="check"><Icon.check/></span><span><b>Free "pockets" inside your account</b> — one for payroll, one for tax, one per project. Move money between them in one click; each shows its own balance.</span></li>
            <li><span className="check"><Icon.check/></span><span><b>Idle cash earns interest in the background</b> — at a rate close to what big banks pay each other (around 4% a year right now). Pull it back to your operating account instantly when you need it.</span></li>
          </ul>
          <a className="feat-link" href="products/banking.html">Explore Banking <Icon.arrow/></a>
        </div>
        <div><BankingMock/></div>
      </div>
    </div>
  </section>
);

const FeatureCards = () => (
  <section className="feat-section">
    <div className="wrap">
      <div className="feat-row reverse">
        <div><CardMock/></div>
        <div className="feat-copy">
          <span className="eyebrow">03 · Cards</span>
          <h2>Cards with controls <span className="ital">built for finance teams</span>.</h2>
          <p>Make a new card in three taps. Set a monthly limit, lock it to specific shops, hand it to a team member. Cancel or freeze it in one tap if anything looks off. Every charge lands in your books already sorted.</p>
          <ul className="feat-bullets">
            <li><span className="check"><Icon.check/></span><span><b>New cards in seconds</b> — no waiting weeks for plastic. Add the new card straight to Apple Pay or Google Wallet on the same screen.</span></li>
            <li><span className="check"><Icon.check/></span><span><b>Lock each card to where it should be used</b> — the "Ads" card only works at Google, Meta and LinkedIn. The "Travel" card only works at airlines and hotels. Anywhere else, the charge is declined.</span></li>
            <li><span className="check"><Icon.check/></span><span><b>Single-use cards for one-off charges</b> — generate a card that only works for one payment, then dies. Perfect for sketchy free trials and one-time vendors.</span></li>
          </ul>
          <a className="feat-link" href="products/cards.html">Explore Cards <Icon.arrow/></a>
        </div>
      </div>
    </div>
  </section>
);

const FeaturePayments = () => (
  <section className="feat-section">
    <div className="wrap">
      <div className="feat-row">
        <div className="feat-copy">
          <span className="eyebrow">04 · Payments</span>
          <h2>Every way you need to pay, <span className="ital">optimised</span> for how you <span className="mark-blue">run</span>.</h2>
          <p>Pay anyone in Australia in under 10 seconds. Pay an overseas supplier in under a minute, instead of waiting three business days. Pay big bills (rent, ATO, suppliers) through your existing credit card so you keep your points. Every payment lands in your books with the right code attached.</p>
          <ul className="feat-bullets">
            <li><span className="check"><Icon.check/></span><span><b>Domestic payments in under 10 seconds</b> — PayID, Osko and bank transfers, free and unlimited. No more 24-hour "pending" purgatory.</span></li>
            <li><span className="check"><Icon.check/></span><span><b>Pay big bills through your business credit card</b> — rent, ATO, suppliers, even ones that don't take cards. They get a normal bank transfer; you keep your card's points (plus Cobalt Points on top).</span></li>
            <li><span className="check"><Icon.check/></span><span><b>Pay everyone at once</b> — got 50 contractors or suppliers to pay? Upload the list, approve once, every payment goes out and every one lands in your books already categorised.</span></li>
          </ul>
          <a className="feat-link" href="products/payments.html">Explore Payments <Icon.arrow/></a>
        </div>
        <div><PaymentsMock/></div>
      </div>
    </div>
  </section>
);

const FeatureRewards = () => (
  <section className="feat-section">
    <div className="wrap">
      <div className="feat-row reverse">
        <div><DashboardMock/></div>
        <div className="feat-copy">
          <span className="eyebrow">05 · Rewards</span>
          <h2>Earn rewards on <span className="ital">every dollar</span> your business <span className="mark-blue">moves</span>.</h2>
          <p>Credit cards reward you for card spending. Cobalt rewards you for everything else your business does — payroll, supplier payments, overseas transfers. The more you run through Cobalt, the more you earn. Redeem points for flights, AUD cashback into your account, or credits against the software bills you already pay.</p>
          <ul className="feat-bullets">
            <li><span className="check"><Icon.check/></span><span><b>Keep your existing card's points</b> — pay rent, suppliers and the ATO through Cobalt using your business credit card. The recipient gets a normal bank transfer; you still earn the card's points like normal.</span></li>
            <li><span className="check"><Icon.check/></span><span><b>Earn extra Cobalt Points on everything else</b> — payroll, supplier transfers, international payments. Things banks never used to pay you for. Stacks on top of your card rewards.</span></li>
            <li><span className="check"><Icon.check/></span><span><b>Redeem how it suits you</b> — flights and hotels, AUD cashback into your account, or credits against tools you already pay for (Xero, Slack, AWS, Adobe, etc.).</span></li>
          </ul>
          <a className="feat-link" href="products/rewards.html">Explore Rewards <Icon.arrow/></a>
        </div>
      </div>
    </div>
  </section>
);

const FeatureCrypto = () => (
  <section className="feat-section">
    <div className="wrap">
      <div className="feat-row reverse">
        <div><CryptoMock/></div>
        <div className="feat-copy">
          <span className="eyebrow">06 · Stablecoins</span>
          <h2>Move money across borders <span className="ital">in seconds</span>, not days.</h2>
          <p>Banks take 3-5 business days to move money internationally, and skim 3-4% on the exchange rate. Cobalt uses stablecoins (digital US dollars) under the hood to do it in under a minute, for a fraction of the cost. You don't have to know how any of it works — just send AUD, the supplier gets paid in their currency, and you save thousands.</p>
          <ul className="feat-bullets">
            <li><span className="check"><Icon.check/></span><span><b>Pay overseas in under a minute</b> — including weekends, public holidays and 2am. The recipient gets paid in their local currency; you see Aussie dollars leave your account.</span></li>
            <li><span className="check"><Icon.check/></span><span><b>Take payments from anywhere in the world</b> — customers send US dollars (or their own currency), it lands as AUD in your operating account the same minute. No "international transfer in progress" emails for two weeks.</span></li>
            <li><span className="check"><Icon.check/></span><span><b>No crypto wallets or jargon to learn</b> — Cobalt handles all the stablecoin stuff behind the scenes. Your dashboard just shows Aussie dollars.</span></li>
          </ul>
          <a className="feat-link" href="products/crypto.html">Explore Stablecoins <Icon.arrow/></a>
        </div>
      </div>
    </div>
  </section>
);

const FeatureGetPaid = () => (
  <section className="feat-section" id="get-paid">
    <div className="wrap">
      <div className="feat-row">
        <div className="feat-copy">
          <span className="eyebrow">01 · Get Paid</span>
          <h2>Get paid faster with <span className="ital">AI that chases your money for you</span>.</h2>
          <p>Chasing late payments is the job no one wants to do. Drop your invoices into Cobalt — it sends them with a payment link, follows up politely (then firmly) on the ones that don't get paid, and ticks them off the moment money lands in your account.</p>
          <ul className="feat-bullets">
            <li><span className="check"><Icon.check/></span><span><b>Send invoices in seconds</b> — upload a list (or sync from Xero/MYOB) and Cobalt sets them up ready to send, each with a branded payment link your customer can click to pay by PayID, BPAY, bank transfer or card.</span></li>
            <li><span className="check"><Icon.check/></span><span><b>An assistant that does the chasing</b> — when invoices go overdue, Cobalt sends polite reminders (and firmer ones if it has to) by email, SMS or WhatsApp. You set how aggressive it can be and what's allowed to send on its own.</span></li>
            <li><span className="check"><Icon.check/></span><span><b>Automatically marked paid</b> — when the money lands in your account, Cobalt finds the matching invoice and marks it paid. No more reconciling line by line at month-end.</span></li>
          </ul>
          <a className="feat-link" href="products/getpaid.html">Explore Get Paid <Icon.arrow/></a>
        </div>
        <div><CollectionsMockSide/></div>
      </div>
    </div>
  </section>
);

const FeatureTreasury = () => (
  <section className="feat-section">
    <div className="wrap">
      <div className="feat-row reverse">
        <div><TreasuryMock/></div>
        <div className="feat-copy">
          <span className="eyebrow">07 · Treasury</span>
          <h2>Idle cash, <span className="ital">working in the background</span>.</h2>
          <p>Most businesses keep a cash buffer for payroll, tax and rainy days — and earn essentially nothing on it. Cobalt automatically puts the excess to work at a rate close to what banks pay each other (around 4% a year right now). Pull it back instantly the moment you need it.</p>
          <ul className="feat-bullets">
            <li><span className="check"><Icon.check/></span><span><b>Set a minimum balance you always want available</b> — say, enough to cover two months of payroll. Anything above that line earns interest automatically.</span></li>
            <li><span className="check"><Icon.check/></span><span><b>Interest paid daily, visible in your dashboard</b> — no fine print, no fixed terms. Move it all back to your operating account in one tap.</span></li>
            <li><span className="check"><Icon.check/></span><span><b>Held by a regulated bank, not by us</b> — your balance sits in a trust account separate from Cobalt, backed by some of the safest assets in the world. If we disappeared tomorrow, your cash stays yours.</span></li>
          </ul>
          <a className="feat-link" href="products/treasury.html">Explore Treasury <Icon.arrow/></a>
        </div>
      </div>
    </div>
  </section>
);

const FeatureEntities = () => (
  <section className="feat-section">
    <div className="wrap">
      <div className="feat-row">
        <div className="feat-copy">
          <span className="eyebrow">08 · Multi-entity</span>
          <h2>Every entity, every currency, <span className="mark">one login</span>.</h2>
          <p>Got more than one company? Maybe an Aussie operating business, a Singapore trading arm, a US subsidiary, a holding company on top. Cobalt brings them all into one login. See total cash across the group, move money between your own entities in seconds, and pull a consolidated report that used to take your accountant a week.</p>
          <ul className="feat-bullets">
            <li><span className="check"><Icon.check/></span><span><b>Unlimited companies, one login</b> — Australia, Singapore, UK, US, NZ and EU. Each gets its own accounts, cards, and books. Switch between them in one click.</span></li>
            <li><span className="check"><Icon.check/></span><span><b>Move money between your own entities in seconds</b> — Cobalt handles the FX in the background. No SWIFT delays, no surprise correspondent-bank fees.</span></li>
            <li><span className="check"><Icon.check/></span><span><b>Group-level reports at a click</b> — total cash, intercompany balances, monthly close, all in one view. Export straight to Xero, MYOB, QuickBooks or NetSuite for each entity.</span></li>
          </ul>
          <a className="feat-link" href="contact.html">Talk to us about your group <Icon.arrow/></a>
        </div>
        <div><MultiEntityMock/></div>
      </div>
    </div>
  </section>
);

const Stats = () => (
  <section className="stat-section">
    <div className="wrap">
      <div className="eyebrow">The structure</div>
      <h2 className="stat-title">The <span className="mark-lime">infrastructure</span> <span className="ital">underneath</span>.</h2>
      <div className="stat-grid">
        <div className="stat">
          <div className="stat-num">On<span className="sub">/off-ramp</span></div>
          <div className="stat-lbl">Crypto ↔ fiat</div>
          <div className="stat-desc">Move USD, EUR, GBP, SGD or AUD in and out of USDC, USDT or PYUSD at institutional spreads. T+0 settlement across Ethereum, Base, Arbitrum, Solana and Polygon.</div>
        </div>
        <div className="stat">
          <div className="stat-num">Multi<span className="sub">-entity</span></div>
          <div className="stat-lbl">One console, every entity</div>
          <div className="stat-desc">Run every HoldCo, subsidiary and SPV under a single login. Consolidated balances, intercompany transfers on stablecoin rails, audit-grade books per entity.</div>
        </div>
        <div className="stat">
          <div className="stat-num">Granular<span className="sub"> controls</span></div>
          <div className="stat-lbl">Permissions that match your org</div>
          <div className="stat-desc">Role-based access down to the line item. Custom approval chains. Per-user spend limits. SSO, SCIM and hardware-key 2FA standard, not an add-on.</div>
        </div>
        <div className="stat">
          <div className="stat-num">Cash-rate<span className="sub"> tracking</span></div>
          <div className="stat-lbl">Treasury yield (planned)</div>
          <div className="stat-desc">An intended money-market exposure to short-dated government Treasury bills in a bankruptcy-remote structure. Designed for daily liquidity with no lockups or notice periods. Final yield and fees published before launch.</div>
        </div>
      </div>
    </div>
  </section>
);

const GridSection = () => (
  <section className="grid-section">
    <div className="wrap">
      <div className="grid-head">
        <span className="eyebrow">Everything, one login</span>
        <h2>One platform for <span className="mark-lime">every dollar</span> your business <span className="ital">touches</span>.</h2>
        <p className="lede">Replace a patchwork of SaaS tools, a dated bank portal and a separate crypto app with a single platform.</p>
      </div>
      <div className="caps-grid">
        <div className="cap span-6">
          <div className="cap-ico"><Icon.bank/></div>
          <h3>Multi-account banking</h3>
          <p>AUD operating accounts, sub-accounts per team or property, and real-time balance charts. Real BSB and real rails.</p>
          <div className="cap-visual-bar">
            <div className="vb dark"/><div className="vb dark"/><div className="vb"/><div className="vb"/><div className="vb dark"/><div className="vb"/>
          </div>
          <div className="cap-foot"><span>Accounts · sub-accounts</span><span>→</span></div>
        </div>
        <div className="cap span-6">
          <div className="cap-ico"><Icon.book/></div>
          <h3>Accounting sync, AI categorisation</h3>
          <p>Bidirectional sync with Xero, MYOB, QuickBooks Online and NetSuite. AI that learns your coding. GST treatments, GL mapping, tax pockets and receipt matching, automated.</p>
          <div className="cap-foot"><span>Accounting · automation</span><span>→</span></div>
        </div>
        <div className="cap span-4">
          <div className="cap-ico"><Icon.send/></div>
          <h3>Instant payments</h3>
          <p>NPP, Osko, PayID, batched pay runs. Free on domestic rails.</p>
          <div className="cap-foot"><span>Payments</span><span>→</span></div>
        </div>
        <div className="cap span-4">
          <div className="cap-ico"><Icon.card/></div>
          <h3>Virtual cards</h3>
          <p>Instant issuance, spend controls, merchant rules, single-use cards.</p>
          <div className="cap-foot"><span>Cards</span><span>→</span></div>
        </div>
        <div className="cap span-4">
          <div className="cap-ico"><Icon.coin/></div>
          <h3>Stablecoin rails</h3>
          <p>Receive USD from anywhere, settle to AUD the same minute. 24/7, institutional spreads.</p>
          <div className="cap-foot"><span>Stablecoins</span><span>→</span></div>
        </div>
        <div className="cap span-12">
          <div className="cap-ico"><Icon.bolt/></div>
          <h3>Cobalt Rewards — points on every dollar moved</h3>
          <p>Two engines. Pay any payable through your existing business credit card and keep your issuer's points. Then earn Cobalt Points on top — on payroll, supplier payments, FX and card spend. Redeem for travel, AUD cashback, or credits against the SaaS tools you already run on.</p>
          <div className="cap-foot"><span>Rewards · loyalty</span><span>→</span></div>
        </div>
        <div className="cap span-6">
          <div className="cap-ico"><Icon.doc/></div>
          <h3>GST-compliant invoicing</h3>
          <p>Professional invoices with your branding, PayID and BPAY payment methods, client ABN tracking, recurring schedules. Status tracking from draft to paid.</p>
          <div className="cap-foot"><span>Invoicing · clients</span><span>→</span></div>
        </div>
        <div className="cap span-6">
          <div className="cap-ico"><Icon.people/></div>
          <h3>Team & approvals</h3>
          <p>Role-based permissions for team and contractors. Approval workflows on payments and invoices. See who did what, when, from where.</p>
          <div className="cap-foot"><span>Team · permissions</span><span>→</span></div>
        </div>
      </div>
    </div>
  </section>
);

const Quote = () => (
  <section className="quote-section">
    <div className="wrap">
      <div className="quote">
        <span className="quote-mark">“</span>Your idle cash shouldn't sit still — it should be <span style={{background:'var(--cobalt)', color:'var(--paper)', padding:'0 0.14em 0.06em', borderRadius:8, display:'inline-block'}}>earning the risk-free rate</span>, in a structure you can trust.<span className="quote-mark">”</span>
      </div>
      <div className="quote-author">
        <div style={{fontFamily:"'JetBrains Mono', monospace", fontSize:12, color:'var(--ink-2)', letterSpacing:'0.12em', textTransform:'uppercase'}}>— The thesis behind Cobalt Treasury</div>
      </div>
    </div>
  </section>
);

const How = () => (
  <section className="how-section">
    <div className="wrap">
      <div className="how-head">
        <span className="eyebrow">Get started</span>
        <h2>Up and running in <span className="mark">a lunch break</span>.</h2>
        <a className="btn btn-ghost" href="contact.html" style={{marginTop:8}}>See the demo <Icon.arrow/></a>
      </div>
      <div className="steps">
        <div className="step">
          <div className="step-no">01</div>
          <h3>Verify your ABN</h3>
            <p>Designed to verify Australian businesses straight from the ABR — no passport scans, document uploads, or phone calls.</p>
          <div className="step-foot">~ 2 minutes</div>
        </div>
        <div className="step">
          <div className="step-no">02</div>
          <h3>Fund your operating account</h3>
          <p>Get a real BSB and account number on the spot. PayID works from day one. Move existing balances from any Australian bank.</p>
          <div className="step-foot">Same session</div>
        </div>
        <div className="step">
          <div className="step-no">03</div>
          <h3>Issue cards, send invoices, set sweep</h3>
          <p>Virtual cards are minted in seconds. Invoices go out with PayID. Treasury sweep earns on anything above your working-capital floor.</p>
          <div className="step-foot">Before lunch ends</div>
        </div>
      </div>
    </div>
  </section>
);

const Final = () => (
  <section className="final">
    <div className="wrap">
      <h2>Banking that <span className="mark-lime">keeps up</span> with your <span className="ital">business</span>.</h2>
      <p>Get started in minutes. No paperwork required.</p>
      <div className="btns">
        <a className="btn btn-lime btn-lg" href="https://cobaltfi.app">Open an account <Icon.arrow/></a>
        <a className="btn btn-ghost btn-lg" href="contact.html" style={{borderColor:'rgba(255,255,255,0.3)', color:'var(--paper)'}}>Book a demo</a>
      </div>
      <div className="final-list">
        <span><span className="dot">●</span> Australian owned</span>
        <span><span className="dot">●</span> Built for the ABN</span>
        <span><span className="dot">●</span> Designed in Sydney</span>
      </div>
    </div>
  </section>
);

const Home = () => (
  <>
    <Nav active="home"/>
    <Hero/>
    <FeatureGetPaid/>
    <FeatureBanking/>
    <FeatureCards/>
    <FeaturePayments/>
    <FeatureRewards/>
    <FeatureCrypto/>
    <FeatureTreasury/>
    <FeatureEntities/>
    <Stats/>
    <GridSection/>
    <Quote/>
    <How/>
    <Final/>
    <Footer/>
  </>
);

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