// MostlyRender — marketing landing. Hero = the signature widget; the no-hard-caps
// wedge; the proof shot; features; transparent pricing line; footer endorsement.
const { Button, Badge, Card, CardBody } = MR_F;
const { useState: useStateLD, useEffect: useEffectLD } = React;

function LandingNav({ go }) {
  return (
    <header className="mk-nav">
      <div className="mk-wrap mk-nav__inner">
        <a className="mk-brand" href="#" onClick={(e) => { e.preventDefault(); go("home"); }}>
          <RenderMark s={28} animate /><Wordmark />
        </a>
        <nav className="mk-nav__links">
          <a href="#features" onClick={(e) => { e.preventDefault(); document.getElementById("features")?.scrollIntoView?.({ behavior: "smooth" }); }}>Features</a>
          <a href="#" onClick={(e) => { e.preventDefault(); go("pricing"); }}>Pricing</a>
          <a href="#" onClick={(e) => { e.preventDefault(); go("compare"); }}>vs Bannerbear</a>
          <a href="#" onClick={(e) => { e.preventDefault(); go("app/playground"); }}>Docs</a>
        </nav>
        <div className="mk-nav__cta">
          <Button variant="ghost" size="sm" onClick={() => go("auth")}>Sign in</Button>
          <Button variant="primary" size="sm" iconRight={<Icon d="arrow" size={15} />} onClick={() => go("app/editor")}>Start rendering</Button>
        </div>
      </div>
    </header>
  );
}

function Hero({ go, heroLayout = "split", heroSubject = "launch" }) {
  return (
    <section className="mk-hero">
      <div className="mk-wrap">
        <div className="mk-hero__head">
          <span className="mk-eyebrow">The image &amp; PDF render API</span>
          <h1 className="mk-h1">The render API that<br />doesn&rsquo;t cut you off.</h1>
          <p className="mk-lead mk-hero__lead">
            Design a template once, then render millions of images, PDFs &amp; videos from your code.
            Usage-based pricing with <strong>no hard caps</strong> — we bill the overage, we don&rsquo;t block your renders.
          </p>
          <div className="mk-hero__actions">
            <Button variant="primary" size="lg" iconRight={<Icon d="arrow" size={16} />} onClick={() => go("app/editor")}>Start rendering free</Button>
            <Button variant="secondary" size="lg" iconLeft={<Icon d="book" size={16} />} onClick={() => go("app/playground")}>Read the docs</Button>
          </div>
          <div className="mk-hero__meta">
            <span><Icon d="check" size={15} /> 100 free renders / mo</span>
            <span><Icon d="check" size={15} /> No card to start</span>
            <span><Icon d="check" size={15} /> First render in ~60s</span>
          </div>
        </div>
        <div className="mk-hero__widget">
          <HeroWidget key={heroSubject} layout={heroLayout} subject={heroSubject} />
          <p className="mk-hero__caption">This isn&rsquo;t a screenshot. Edit the template — the render and the code update together. It&rsquo;s your first API call.</p>
        </div>
      </div>
    </section>
  );
}

// the launch wedge, made visible: a soft usage meter, not a wall.
function WedgeBand() {
  return (
    <section className="mk-band">
      <div className="mk-wrap mk-band__inner">
        <div className="mk-band__copy">
          <span className="mk-eyebrow" style={{ color: "var(--accent)" }}>No hard caps</span>
          <h2 className="mk-h2" style={{ color: "#fff" }}>Hit your quota? Your renders keep flowing.</h2>
          <p className="mk-lead" style={{ color: "rgba(255,255,255,0.66)" }}>
            Most tools stop rendering the moment you cross a limit. We show you the line, project the
            overage, and keep going — so a launch-day spike never breaks production.
          </p>
          <div className="mk-band__pills">
            <span className="mk-band__pill"><Icon d="check" size={14} /> Soft budget, not a wall</span>
            <span className="mk-band__pill"><Icon d="check" size={14} /> Overage projected in-period</span>
          </div>
        </div>
        <div className="mk-band__meter">
          <UsageMeterMini />
        </div>
      </div>
    </section>
  );
}

function UsageMeterMini() {
  const [v, setV] = useStateLD(9500);
  useEffectLD(() => {
    const t = setInterval(() => setV((x) => (x >= 11200 ? 9500 : x + 90)), 700);
    return () => clearInterval(t);
  }, []);
  const quota = 10000;
  const pct = Math.min((v / quota) * 100, 116);
  const over = Math.max(0, v - quota);
  return (
    <div className="meter-card">
      <div className="meter-card__head">
        <span>Renders this period</span>
        <span className="meter-card__count">{v.toLocaleString()} <span>/ {quota.toLocaleString()}</span></span>
      </div>
      <div className="meter-track">
        <div className="meter-fill" style={{ width: Math.min(pct, 100) + "%" }} />
        {pct > 100 && <div className="meter-over" style={{ width: (pct - 100) + "%" }} />}
        <div className="meter-quota" />
      </div>
      <div className="meter-card__foot">
        <span className={"meter-tag" + (over ? " is-over" : "")}>
          <span className="meter-tag__dot" />
          {over ? `Over by ${over.toLocaleString()} · projected +$${(over / 1000 * 4).toFixed(2)}` : "Within included quota"}
        </span>
        <span className="meter-card__note">renders never paused</span>
      </div>
    </div>
  );
}

// the proof shot: same $49, far more renders.
function ProofShot() {
  return (
    <section className="mk-proof">
      <div className="mk-wrap">
        <div className="mk-section-head">
          <span className="mk-eyebrow">The same $49, a different ceiling</span>
          <h2 className="mk-h2">More renders per dollar — and the meter never slams shut.</h2>
        </div>
        <div className="mk-proof__grid">
          <div className="proof-card proof-card--ours">
            <div className="proof-card__top"><RenderMark s={26} /><span>MostlyRender · Pro</span></div>
            <div className="proof-card__price">$49<span>/mo</span></div>
            <div className="proof-card__big">10,000</div>
            <div className="proof-card__lbl">renders included</div>
            <div className="proof-card__row"><Icon d="check" size={15} /> then $4 / 1,000 — same rate</div>
            <div className="proof-card__row"><Icon d="check" size={15} /> overage billed, never blocked</div>
            <div className="proof-card__row"><Icon d="check" size={15} /> images, PDFs &amp; video</div>
          </div>
          <div className="proof-vs">vs</div>
          <div className="proof-card proof-card--them">
            <div className="proof-card__top"><span className="proof-card__generic" />‌<span>Typical competitor · same tier</span></div>
            <div className="proof-card__price proof-card__price--muted">$49<span>/mo</span></div>
            <div className="proof-card__big proof-card__big--muted">1,000</div>
            <div className="proof-card__lbl">renders included</div>
            <div className="proof-card__row proof-card__row--no"><Icon d="x" size={15} /> renders blocked at the cap</div>
            <div className="proof-card__row proof-card__row--no"><Icon d="x" size={15} /> upgrade to keep going</div>
            <div className="proof-card__row proof-card__row--no"><Icon d="x" size={15} /> opaque credit buckets</div>
          </div>
        </div>
        <p className="mk-proof__foot">Illustrative tiers for comparison. <a href="#" onClick={(e) => { e.preventDefault(); document.querySelector('[data-go="compare"]')?.click(); }}>See the honest breakdown →</a></p>
      </div>
    </section>
  );
}

const FEATURES = [
  { icon: "image", title: "One template, infinite renders", body: "Design it once in the editor; every layer name becomes an API parameter. Change the data, get a new image — no redesign." },
  { icon: "code", title: "Your first call just works", body: "Copy-paste cURL, Node or Python with your real test key pre-filled. The demo on this page is the call you ship." },
  { icon: "film", title: "Images, PDFs & video", body: "The same template renders a 1200×630 OG image, a multi-page PDF, or an MP4 — one endpoint, three outputs." },
  { icon: "gauge", title: "Usage you can see", body: "A live meter with projected overage. Know exactly where you are before the invoice — never a bill-shock surprise." },
  { icon: "plug", title: "Connect anything", body: "Zapier, Make, n8n, Google Sheets & Airtable — plus a plain HTTP node for the workflow we didn't think of." },
  { icon: "bolt", title: "Built to spike", body: "Render farms scale with your launch day. Burst to millions, settle back down, pay for what you used." },
];
function Features() {
  return (
    <section className="mk-features" id="features">
      <div className="mk-wrap">
        <div className="mk-section-head">
          <span className="mk-eyebrow">Why MostlyRender</span>
          <h2 className="mk-h2">Render infrastructure that treats you like an engineer.</h2>
        </div>
        <div className="mk-feature-grid">
          {FEATURES.map((f) => (
            <Card className="mk-feature" key={f.title}>
              <CardBody>
                <span className="mk-feature__icon"><Icon d={f.icon} size={20} /></span>
                <h3 className="mk-feature__title">{f.title}</h3>
                <p className="mk-feature__body">{f.body}</p>
              </CardBody>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function PricingLine({ go }) {
  return (
    <section className="mk-priceline">
      <div className="mk-wrap mk-priceline__inner">
        <div>
          <h2 className="mk-h2">Pricing you can say in one sentence.</h2>
          <p className="mk-priceline__big">
            <strong>10,000 renders included, then $4 / 1,000</strong> — same rate, no credits to convert.
          </p>
          <p className="mk-lead">Send 10,003 renders? You&rsquo;re billed one extra bucket of 1,000. That&rsquo;s the whole rule.</p>
          <div className="mk-hero__actions">
            <Button variant="primary" size="lg" onClick={() => go("pricing")} iconRight={<Icon d="arrow" size={16} />}>See all plans</Button>
            <Button variant="secondary" size="lg" onClick={() => go("app/usage")}>See the usage meter</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function DevProof() {
  const quotes = [
    { t: "We swapped off a capped tool the week a launch 5×&rsquo;d our render volume. Nothing broke — we just saw the overage and paid it.", a: "Staff Engineer, Series B SaaS" },
    { t: "The test key in the docs meant my first render worked on the first paste. Shipped a proof-of-concept before lunch.", a: "Founding engineer, fintech" },
    { t: "Finally a render meter I can put on a dashboard. Projected overage means no surprise invoice.", a: "Platform lead, marketplace" },
  ];
  return (
    <section className="mk-quotes">
      <div className="mk-wrap">
        <p className="mk-row-label">Trusted by teams who got burned by a hard cap</p>
        <div className="mk-quote-grid">
          {quotes.map((q, i) => (
            <Card key={i} className="mk-quote"><CardBody>
              <p className="mk-quote__t" dangerouslySetInnerHTML={{ __html: '&ldquo;' + q.t + '&rdquo;' }} />
              <p className="mk-quote__a">{q.a}</p>
            </CardBody></Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA({ go }) {
  return (
    <section className="mk-cta">
      <div className="mk-wrap mk-cta__inner">
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 18 }}><RenderMark s={52} /></div>
        <h2 className="mk-h2">Render your first image in a minute.</h2>
        <p className="mk-lead">100 renders a month, free. No card. The meter shows you everything before you ever pay.</p>
        <div className="mk-hero__actions" style={{ justifyContent: "center" }}>
          <Button variant="primary" size="lg" iconRight={<Icon d="arrow" size={16} />} onClick={() => go("app/editor")}>Start rendering free</Button>
          <Button variant="secondary" size="lg" onClick={() => go("pricing")}>See pricing</Button>
        </div>
      </div>
    </section>
  );
}

function LandingFooter({ go }) {
  const cols = [
    ["Product", [["Template editor", "app/editor"], ["API playground", "app/playground"], ["Usage & billing", "app/usage"], ["Integrations", "app/integrations"]]],
    ["Compare", [["vs Bannerbear", "compare"], ["Pricing", "pricing"]]],
    ["Developers", [["Docs", "app/playground"], ["API reference", "app/playground"], ["Status", "home"]]],
  ];
  return (
    <footer className="mk-footer">
      <div className="mk-wrap mk-footer__inner">
        <div className="mk-footer__brand">
          <a className="mk-brand" href="#" onClick={(e) => { e.preventDefault(); go("home"); }}><RenderMark s={26} /><Wordmark size={17} /></a>
          <p className="mk-footer__tag">The image, PDF &amp; video render API with transparent usage pricing and no hard caps.</p>
        </div>
        {cols.map(([h, links]) => (
          <div className="mk-footer__col" key={h}>
            <div className="mk-footer__h">{h}</div>
            {links.map(([l, r]) => <a key={l} href="#" onClick={(e) => { e.preventDefault(); go(r); }}>{l}</a>)}
          </div>
        ))}
      </div>
      <div className="mk-wrap mk-footer__base">
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          <MTMark s={16} /> A <strong style={{ color: "var(--fg-muted)", fontWeight: 600 }}>Mostly Tiny</strong> product · © 2026 Mostly Tiny Ltd
        </span>
        <span className="forge-mono" style={{ fontSize: 11 }}>MostlyRender · v1.0</span>
      </div>
    </footer>
  );
}

function Landing({ go, heroLayout = "split", heroSubject = "launch" }) {
  return (
    <div className="mk-root">
      <button data-go="compare" style={{ display: "none" }} onClick={() => go("compare")} />
      <LandingNav go={go} />
      <Hero go={go} heroLayout={heroLayout} heroSubject={heroSubject} />
      <WedgeBand />
      <ProofShot />
      <Features />
      <PricingLine go={go} />
      <DevProof />
      <CTA go={go} />
      <LandingFooter go={go} />
    </div>
  );
}

window.Landing = Landing;
window.MkNav = LandingNav;
window.MkFooter = LandingFooter;