/* global React, ReactDOM, ProductMock, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle, useTweaks */
const { useState, useEffect, useRef, useCallback } = React;

/* ------------ COMPANY INFO ------------ */
const COMPANY = {
  legalName: "Conyvex LLC",
  brand: "Conyvex",
  address1: "30 N Gould St, Ste R",
  city: "Sheridan",
  region: "Wyoming",
  regionAbbr: "WY",
  postal: "82801",
  country: "United States",
  countryShort: "USA",
  phone: "+1 (260) 282-4300",
  phoneHref: "+12602824300",
  email: "hello@conyvex.com",
  foundedYear: 2024,
  incorporationState: "Wyoming",
  incorporationCountry: "United States",
  naics: "511210",
  naicsLabel: "Software Publishers",
  timezone: "Mountain Time (MT)",
  hours: "Mon — Fri · 09:00 — 18:00 MT",
};

/* ------------ TWEAKS ------------ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C9F84A",
  "mode": "light",
  "displayFont": "geist"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  "#C9F84A",
  "#FF5C2B",
  "#7C5CFF",
  "#1F8A5B",
];

const FONT_OPTIONS = ["geist", "helvetica"];

/* ------------ ROUTER ------------ */
const ROUTES = {
  "/": "Home",
  "/product": "Product",
  "/features": "Features",
  "/use-cases": "Use cases",
  "/about": "About",
  "/contact": "Contact",
  "/quote": "Request a quote",
  "/legal/notice": "Legal notice",
  "/legal/terms": "Terms of service",
  "/legal/privacy": "Privacy policy",
  "/legal/cookies": "Cookie policy",
  "/legal/dpa": "Data processing agreement",
  "/legal/aup": "Acceptable use policy",
  "/legal/security": "Security",
  "/legal/refund": "Refund & cancellation policy",
  "/legal/sla": "Service level agreement",
  "/legal/compliance": "Compliance & disclosures",
};

const useRoute = () => {
  const getPath = () => {
    const h = window.location.hash || "#/";
    return h.replace(/^#/, "") || "/";
  };
  const [path, setPath] = useState(getPath);
  useEffect(() => {
    const onHash = () => {
      setPath(getPath());
      window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return path;
};

const navigate = (to) => {
  window.location.hash = to.startsWith("#") ? to : `#${to}`;
};

const Link = ({ to, children, className, style, onClick }) => {
  // anchors (#xyz) on same page use plain anchors; route links use hash routes
  const isAnchor = to && to.startsWith("#") && !to.startsWith("#/");
  const handle = (e) => {
    if (onClick) onClick(e);
    if (isAnchor) return;
    if (to && (to.startsWith("/") || to.startsWith("#/"))) {
      e.preventDefault();
      navigate(to);
    }
  };
  const href = isAnchor ? to : `#${to}`;
  return (
    <a href={href} className={className} style={style} onClick={handle}>
      {children}
    </a>
  );
};

/* ------------ NAV ------------ */
const NAV_LINKS = [
  { to: "/product", label: "Product" },
  { to: "/features", label: "Features" },
  { to: "/use-cases", label: "Use cases" },
  { to: "/about", label: "About" },
];

const Nav = ({ currentPath }) => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => { setOpen(false); }, [currentPath]);

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  return (
    <>
      <header className={`nav ${scrolled ? "scrolled" : ""}`}>
        <div className="container nav-inner">
          <Link to="/" className="brand">
            <span className="brand-mark">C</span>
            {COMPANY.brand}
          </Link>
          <nav className="nav-links">
            {NAV_LINKS.map((l) => (
              <Link key={l.to} to={l.to} className={`nav-link ${currentPath === l.to ? "is-active" : ""}`}>
                {l.label}
              </Link>
            ))}
          </nav>
          <div className="nav-cta">
            <Link to="/contact" className="btn btn-ghost nav-cta-ghost">Contact</Link>
            <Link to="/quote" className="btn btn-primary nav-cta-primary">
              Request a quote <span className="arrow">→</span>
            </Link>
            <button
              className={`nav-burger ${open ? "is-open" : ""}`}
              aria-label="Menu"
              aria-expanded={open}
              onClick={() => setOpen((v) => !v)}
            >
              <span /><span /><span />
            </button>
          </div>
        </div>
      </header>

      <div className={`mobile-menu ${open ? "open" : ""}`} role="dialog" aria-modal="true">
        <div className="mobile-menu-inner">
          <ul className="mobile-menu-list">
            {NAV_LINKS.map((l) => (
              <li key={l.to}>
                <Link to={l.to} className="mobile-link">{l.label}</Link>
              </li>
            ))}
            <li><Link to="/contact" className="mobile-link">Contact</Link></li>
          </ul>
          <div className="mobile-menu-cta">
            <Link to="/quote" className="btn btn-primary">Request a quote <span className="arrow">→</span></Link>
          </div>
          <div className="mobile-menu-meta">
            <div className="mono">{COMPANY.legalName}</div>
            <div className="mono">{COMPANY.address1}</div>
            <div className="mono">{COMPANY.city}, {COMPANY.regionAbbr} {COMPANY.postal} · {COMPANY.countryShort}</div>
            <div className="mono"><a href={`mailto:${COMPANY.email}`}>{COMPANY.email}</a></div>
            <div className="mono"><a href={`tel:${COMPANY.phoneHref}`}>{COMPANY.phone}</a></div>
          </div>
        </div>
      </div>
    </>
  );
};

/* ------------ HERO ------------ */
const Hero = () => (
  <section className="hero container" id="top" data-screen-label="01 Hero">
    <div className="hero-grid">
      <div className="hero-meta">
        <span className="eyebrow">A workspace for marketing agencies</span>
        <span className="mono">B2B SaaS · onboarding new agencies</span>
      </div>
      <h1 className="h-display">
        Run your agency,<br />
        not your <em>tools.</em>
      </h1>
      <p className="lead hero-sub">
        Conyvex brings clients, campaigns, briefs, and reporting into one calm workspace — built for marketing teams who'd rather make great work than chase tabs.
      </p>
      <div className="hero-cta">
        <Link to="/quote" className="btn btn-primary">
          Request a quote <span className="arrow">→</span>
        </Link>
        <Link to="/product" className="btn btn-ghost">See the product</Link>
        <span className="hero-cta-note">Tailored proposal · no obligation</span>
      </div>
    </div>
  </section>
);

/* ------------ PRODUCT SECTION ------------ */
const ProductSection = () => (
  <section className="container section-tight" id="product" data-screen-label="02 Product">
    <ProductMock />
    <div className="product-caption">
      <span className="mono">↑ Switch views — Campaigns, Clients, Reports</span>
      <span className="mono">Live preview · interactive</span>
    </div>
  </section>
);

/* ------------ FEATURES ------------ */
const FEATURES = [
  {
    n: "01",
    title: "One workspace per client",
    body: "Briefs, files, conversations, approvals and billing — together in one place. Clients see exactly what you want them to see, nothing more.",
    visual: (
      <div className="mini-doc">
        <div className="mini-line accent" />
        <div className="mini-line med" />
        <div className="mini-line" />
        <div className="mini-line short" />
      </div>
    ),
    span: "lg",
  },
  {
    n: "02",
    title: "Campaigns that don't slip",
    body: "A board that knows your retainers, deliverables and deadlines. Slips surface early, not at end-of-month.",
    visual: (
      <div className="mini-board">
        {["To do", "Doing", "Done"].map((h) => (
          <div className="mini-col" key={h}>
            <div className="mini-col-h">{h}</div>
            <div className="mini-card">Brief v2</div>
            <div className="mini-card">Visuals</div>
          </div>
        ))}
      </div>
    ),
    span: "md",
  },
  {
    n: "03",
    title: "Approvals without the email chain",
    body: "Threaded review on every asset. Clients comment in context; nothing gets lost in CC.",
    visual: (
      <div className="mini-thread">
        <div className="mini-msg">
          <span className="avatar av-2">JT</span>
          <span className="bubble">Headline feels long — try splitting it?</span>
        </div>
        <div className="mini-msg" style={{ flexDirection: "row-reverse" }}>
          <span className="avatar av-1">AM</span>
          <span className="bubble me">Trying a two-line version now.</span>
        </div>
      </div>
    ),
  },
  {
    n: "04",
    title: "White-label reports",
    body: "Pull the numbers you already track. Send a clean monthly report under your own brand, in two clicks.",
    visual: (
      <div className="mini-pulse">
        {[20, 35, 28, 50, 42, 65, 60, 75, 70, 85, 78, 92].map((h, i) => (
          <i key={i} style={{ height: `${h}%`, background: i % 3 === 0 ? "var(--accent)" : "var(--ink)", opacity: i % 3 === 0 ? 1 : 0.7 }} />
        ))}
      </div>
    ),
  },
  {
    n: "05",
    title: "Built-in retainer tracking",
    body: "Hours, scopes and overage flagged automatically. No more rebuilding the same spreadsheet every month.",
    visual: (
      <div className="mini-keys">
        <span className="mini-key">scope</span>
        <span className="mini-key k">used 64%</span>
        <span className="mini-key">left 12h</span>
        <span className="mini-key">overage off</span>
      </div>
    ),
  },
  {
    n: "06",
    title: "Calendar that respects context",
    body: "Editorial, social, launch — schedules live next to the work they belong to, not in a separate tool.",
    visual: (
      <div className="mini-cal">
        {Array.from({ length: 21 }).map((_, i) => {
          const cls = [3, 7, 12, 13, 18].includes(i) ? "on" : [5, 10, 15, 20].includes(i) ? "mid" : "";
          return <div key={i} className={`mini-cell ${cls}`} />;
        })}
      </div>
    ),
  },
];

const Features = () => (
  <section className="section container" id="features" data-screen-label="03 Features">
    <div className="section-head">
      <div>
        <span className="eyebrow">What's inside</span>
        <h2 className="h-section" style={{ marginTop: 18 }}>
          Everything an agency runs on,<br />
          <em>without the tab graveyard.</em>
        </h2>
      </div>
      <p className="lead">
        Conyvex isn't a thousand features stitched together. It's the handful that matter, designed to work as one — so your team stops translating between tools.
      </p>
    </div>
    <div className="features-grid">
      {FEATURES.map((f, i) => (
        <div key={i} className={`feature ${f.span || ""}`}>
          <div className="feature-num">/ {f.n}</div>
          <h3>{f.title}</h3>
          <p>{f.body}</p>
          <div className="feature-visual">{f.visual}</div>
        </div>
      ))}
    </div>
  </section>
);

/* ------------ WORKFLOW ------------ */
const Workflow = () => (
  <section className="container section" id="workflow" data-screen-label="04 Workflow">
    <div className="workflow">
      <div className="section-head" style={{ margin: 0 }}>
        <div>
          <span className="eyebrow" style={{ color: "oklch(from var(--bg) calc(l - 0.18) 0.01 80)" }}>How it works</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            Onboard a client<br />
            <em>before lunch.</em>
          </h2>
        </div>
        <p className="lead">
          Conyvex is opinionated about onboarding because the first week with a client decides the next twelve months. Four steps, no friction.
        </p>
      </div>
      <div className="steps">
        {[
          { n: "01", t: "Spin up a workspace", b: "One click. The client gets their own branded portal with the brief template pre-loaded." },
          { n: "02", t: "Import the brief", b: "Paste a Doc, upload a PDF, or fill the structured template. Conyvex turns it into a working plan." },
          { n: "03", t: "Run the work", b: "Campaigns, assets, threads, approvals — your team works inside the workspace, not around it." },
          { n: "04", t: "Report & renew", b: "Reports compile themselves. Hit send at the end of the month and start the renewal conversation early." },
        ].map((s) => (
          <div className="step" key={s.n}>
            <div className="step-num">/ {s.n}</div>
            <h4>{s.t}</h4>
            <p>{s.b}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ------------ WHO IT'S FOR ------------ */
const WHO = [
  {
    title: "Brand & creative studios",
    body: "Keep moodboards, files and approvals close to the work. Stop running clients through three tools.",
    list: ["Asset libraries per client", "Threaded review on visuals", "Versioning that doesn't fight you"],
  },
  {
    title: "Performance & growth shops",
    body: "Plan, ship and report on paid + organic in one place. The handoff between strategy and execution disappears.",
    list: ["Campaign boards by channel", "Retainer & scope tracking", "Pull-from-anywhere reports"],
  },
  {
    title: "Content & SEO teams",
    body: "Editorial calendars that live next to drafts, briefs and the keyword work that informs them.",
    list: ["Editorial calendar", "Brief → draft → publish in one flow", "Topic clusters & content audits"],
  },
  {
    title: "Boutique & full-service",
    body: "If you do a bit of everything, your tooling shouldn't pick a lane. Conyvex flexes around the way you actually work.",
    list: ["Custom workspace templates", "Per-client billing & invoicing", "Roles for clients, freelancers, partners"],
  },
];

const WhoFor = () => (
  <section className="section container" data-screen-label="05 Who">
    <div className="section-head">
      <div>
        <span className="eyebrow">Who it's for</span>
        <h2 className="h-section" style={{ marginTop: 18 }}>
          Built for the way<br />
          <em>your agency actually works.</em>
        </h2>
      </div>
      <p className="lead">
        Whether you're three people in a back room or a thirty-person studio, Conyvex bends around your shape — not the other way around.
      </p>
    </div>
    <div className="who-grid">
      {WHO.map((w, i) => (
        <article className="who-card" key={i}>
          <span className="tag"><span className="dot" /> Use case · {String(i + 1).padStart(2, "0")}</span>
          <h3>{w.title}</h3>
          <p style={{ color: "var(--ink-mute)", margin: 0, fontSize: 14.5, lineHeight: 1.55, maxWidth: "44ch" }}>{w.body}</p>
          <ul className="who-list">
            {w.list.map((li, j) => (<li key={j}>{li}</li>))}
          </ul>
        </article>
      ))}
    </div>
  </section>
);

/* ------------ PRICING (now: quote-based) ------------ */
const PLANS = [
  {
    name: "Starter",
    desc: "For solo operators and very small teams. Everything you need to run a tidy book of business.",
    features: [
      "Up to 3 client workspaces",
      "Up to 3 team members",
      "Campaign boards & briefs",
      "Threaded approvals",
      "Basic reporting",
    ],
    cta: "Request a quote",
    ctaClass: "btn-ghost",
  },
  {
    name: "Studio",
    desc: "For growing agencies running multiple retainers. Built around the studio operating model.",
    features: [
      "Unlimited client workspaces",
      "Up to 15 team members",
      "Retainer & scope tracking",
      "White-label reports",
      "Client portals & branding",
      "Roles & permissions",
    ],
    cta: "Request a quote",
    ctaClass: "btn-primary",
    featured: true,
    tag: "Most picked",
  },
  {
    name: "Scale",
    desc: "For larger studios with custom needs — SSO, security review, dedicated onboarding.",
    features: [
      "Unlimited everything",
      "SSO & SCIM",
      "Custom roles & workflows",
      "Dedicated onboarding",
      "Priority support",
      "Security & DPA review",
    ],
    cta: "Talk to us",
    ctaClass: "btn-ink",
  },
];

const Pricing = () => (
  <section className="section container" id="pricing" data-screen-label="06 Quote">
    <div className="section-head">
      <div>
        <span className="eyebrow">By quote, only</span>
        <h2 className="h-section" style={{ marginTop: 18 }}>
          Priced to your shape.<br />
          <em>Not to a list.</em>
        </h2>
      </div>
      <div>
        <p className="lead" style={{ marginBottom: 18 }}>
          Every agency runs differently. We don't publish public pricing — we build a proposal sized to your team, your client book and the integrations you actually need.
        </p>
        <Link to="/quote" className="btn btn-primary">
          Request a quote <span className="arrow">→</span>
        </Link>
      </div>
    </div>
    <div className="plans">
      {PLANS.map((p) => (
        <article key={p.name} className={`plan ${p.featured ? "featured" : ""}`}>
          {p.tag && <span className="plan-tag">{p.tag}</span>}
          <div className="plan-name">{p.name}</div>
          <div className="plan-price plan-price-quote">
            <span className="plan-quote-label">On quote</span>
            <span className="per">Tailored to your team & scope</span>
          </div>
          <p className="plan-desc">{p.desc}</p>
          <ul className="plan-features">
            {p.features.map((f, i) => (<li key={i}>{f}</li>))}
          </ul>
          <Link to="/quote" className={`btn ${p.ctaClass} plan-cta`}>
            {p.cta} <span className="arrow">→</span>
          </Link>
        </article>
      ))}
    </div>
    <p className="quote-disclaimer mono">
      All offers issued by Conyvex LLC are subject to a signed order form and the <Link to="/legal/terms">Terms of Service</Link>. Indicative scopes only — final pricing is confirmed in writing.
    </p>
  </section>
);

/* ------------ FAQ ------------ */
const FAQS = [
  { q: "How is Conyvex different from a project management tool?", a: "Project management tools assume one team working on many projects. Conyvex assumes one team working with many clients — each with their own briefs, approvals, billing and reporting. The whole product is shaped around that distinction." },
  { q: "Can I bring my existing clients in?", a: "Yes. Import briefs from Docs, PDFs or Notion, and pull historical reports from your existing analytics. We don't lock anything in — exports are always one click away." },
  { q: "Do clients need to learn a new tool?", a: "No. Clients see a clean, branded portal with only the things you want them to see. Most never realise they're inside Conyvex — they just see your agency's workspace." },
  { q: "How does white-labelling work?", a: "Studio and Scale plans let you set your own colors, logo, custom domain and email sender. Reports and client portals all carry your brand, not ours." },
  { q: "Is my data safe?", a: "All data is encrypted in transit (TLS 1.2+) and at rest (AES-256). We operate a documented information security program aligned with SOC 2 controls. Our sub-processors are listed publicly in our DPA; the full security pack and signed DPA are delivered to customers under NDA." },
  { q: "How is pricing handled?", a: "All plans are quoted in writing on a per-engagement basis. Contact us with your team size, client count and required integrations — we'll send a proposal within two business days." },
  { q: "Do you offer onboarding help?", a: "Yes — Studio plans get a guided onboarding session, Scale plans get dedicated onboarding and migration help. Starter is built to be self-serve in under an hour." },
];

const FAQ = () => {
  const [open, setOpen] = useState(0);
  return (
    <section className="section container" id="faq" data-screen-label="07 FAQ">
      <div className="section-head">
        <div>
          <span className="eyebrow">Frequently asked</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            Questions, <em>answered.</em>
          </h2>
        </div>
        <p className="lead">
          If something's missing here, write to us at <a href={`mailto:${COMPANY.email}`} style={{ textDecoration: "underline" }}>{COMPANY.email}</a>. We answer ourselves — no ticketing system, no bots.
        </p>
      </div>
      <div className="faq">
        {FAQS.map((f, i) => (
          <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
            <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
              {f.q}
              <span className="sign">+</span>
            </button>
            <div className="faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

/* ------------ CTA ------------ */
const CTA = () => (
  <section className="container section-tight" id="cta" data-screen-label="08 CTA">
    <div className="cta">
      <span className="eyebrow" style={{ color: "var(--accent-ink)" }}>Get a tailored proposal</span>
      <h2 className="h-section">
        Spend the next hour<br />
        <em>making something good.</em>
      </h2>
      <p className="lead">
        Tell us about your agency in a short brief. We respond within two business days with a proposal sized to your team, your client book and the integrations you actually need.
      </p>
      <div className="cta-row">
        <Link to="/quote" className="btn btn-ink">
          Request a quote <span className="arrow">→</span>
        </Link>
        <Link to="/contact" className="btn cta-secondary">
          Book a 15-min call
        </Link>
      </div>
      <div className="cta-shape" />
    </div>
  </section>
);

/* ------------ FOOTER ------------ */
const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-mark">
        {COMPANY.brand}<em>.</em>
      </div>
      <div className="footer-inner">
        <div>
          <h5>{COMPANY.legalName}</h5>
          <p className="footer-about">
            A calmer way to run a marketing agency. Independent, built in public, paid for by the people who use it.
          </p>
          <address className="footer-address">
            <div>{COMPANY.address1}</div>
            <div>{COMPANY.city}, {COMPANY.regionAbbr} {COMPANY.postal}</div>
            <div>{COMPANY.country}</div>
            <div className="mono" style={{ marginTop: 8, fontSize: 11.5, color: "var(--ink-soft)" }}>
              A Wyoming Limited Liability Company · Founded {COMPANY.foundedYear}
            </div>
            <div style={{ marginTop: 10 }}>
              <a href={`mailto:${COMPANY.email}`}>{COMPANY.email}</a>
            </div>
            <div>
              <a href={`tel:${COMPANY.phoneHref}`}>{COMPANY.phone}</a>
            </div>
          </address>
        </div>
        <div>
          <h5>Product</h5>
          <ul>
            <li><Link to="/product">Product</Link></li>
            <li><Link to="/features">Features</Link></li>
            <li><Link to="/use-cases">Use cases</Link></li>
            <li><Link to="/quote">Request a quote</Link></li>
          </ul>
        </div>
        <div>
          <h5>Company</h5>
          <ul>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
            <li><Link to="/legal/security">Security</Link></li>
            <li><Link to="/legal/compliance">Compliance</Link></li>
          </ul>
        </div>
        <div>
          <h5>Legal</h5>
          <ul>
            <li><Link to="/legal/notice">Legal notice</Link></li>
            <li><Link to="/legal/terms">Terms of service</Link></li>
            <li><Link to="/legal/privacy">Privacy policy</Link></li>
            <li><Link to="/legal/cookies">Cookie policy</Link></li>
            <li><Link to="/legal/dpa">DPA</Link></li>
            <li><Link to="/legal/aup">Acceptable use</Link></li>
            <li><Link to="/legal/sla">SLA</Link></li>
            <li><Link to="/legal/refund">Refund policy</Link></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© {new Date().getFullYear()} {COMPANY.legalName} — all rights reserved.</span>
        <span>Headquartered in {COMPANY.city}, {COMPANY.regionAbbr} · {COMPANY.countryShort}</span>
      </div>
    </div>
  </footer>
);

/* ------------ COOKIE CONSENT ------------ */
const CookieConsent = () => {
  const [shown, setShown] = useState(false);
  useEffect(() => {
    try {
      const v = localStorage.getItem("conyvex_cookie_consent");
      if (!v) setShown(true);
    } catch (e) { setShown(true); }
  }, []);
  const set = (value) => {
    try { localStorage.setItem("conyvex_cookie_consent", value); } catch (e) {}
    setShown(false);
  };
  if (!shown) return null;
  return (
    <div className="cookie-banner" role="dialog" aria-label="Cookie preferences">
      <div className="cookie-inner">
        <div className="cookie-text">
          <strong>We use only essential cookies by default.</strong>{" "}
          Analytics and marketing cookies are off until you opt in. You can change your mind any time on the{" "}
          <Link to="/legal/cookies">Cookie policy</Link> page.
        </div>
        <div className="cookie-actions">
          <button className="btn btn-ghost cookie-btn" onClick={() => set("essential")}>Essential only</button>
          <button className="btn btn-primary cookie-btn" onClick={() => set("all")}>Accept all</button>
        </div>
      </div>
    </div>
  );
};

/* =========================================================
   PAGES
   ========================================================= */

const PageShell = ({ eyebrow, title, lead, children }) => (
  <article className="page-shell">
    <header className="page-shell-head container">
      <span className="eyebrow">{eyebrow}</span>
      <h1 className="h-section page-shell-title">{title}</h1>
      {lead && <p className="lead page-shell-lead">{lead}</p>}
    </header>
    <div className="container page-shell-body">
      {children}
    </div>
  </article>
);

/* ------------ HOME PAGE ------------ */
const HomePage = () => (
  <>
    <Hero />
    <ProductSection />
    <Features />
    <Workflow />
    <WhoFor />
    <Pricing />
    <FAQ />
    <CTA />
  </>
);

/* ------------ PRODUCT PAGE ------------ */
const ProductPage = () => (
  <>
    <PageShell
      eyebrow="The product"
      title={<>One workspace. <em>Every client.</em></>}
      lead="Conyvex collapses briefs, campaigns, approvals, retainers and reports into a single calm surface. Below: how each piece fits together."
    >
      <div className="hero-cta" style={{ marginTop: 0 }}>
        <Link to="/quote" className="btn btn-primary">Request a quote <span className="arrow">→</span></Link>
        <Link to="/features" className="btn btn-ghost">All features</Link>
      </div>
    </PageShell>
    <ProductSection />
    <Workflow />
    <CTA />
  </>
);

/* ------------ FEATURES PAGE ------------ */
const FEATURE_GROUPS = [
  {
    title: "Workspaces",
    items: [
      ["Client workspaces", "A self-contained portal per client, with files, briefs, approvals and billing in one place."],
      ["Roles & permissions", "Fine-grained roles for staff, freelancers and clients. Hide what shouldn't be seen."],
      ["Custom templates", "Reusable workspace templates so every onboarding feels professional from minute one."],
      ["Branding & white-label", "Your colors, your logo, your custom domain — clients see your studio, not us."],
    ],
  },
  {
    title: "Campaigns & delivery",
    items: [
      ["Campaign boards", "Boards that understand retainers, deliverables and deadlines — not generic kanban."],
      ["Briefs & docs", "Structured briefs you can paste, upload or build inline. Versioned automatically."],
      ["Approvals", "Threaded review on every asset. Comments live next to the work, not in inboxes."],
      ["Calendar", "Editorial, social and launch calendars next to the work they belong to."],
    ],
  },
  {
    title: "Commercial",
    items: [
      ["Retainer tracking", "Scope, used hours and overage flagged automatically — no monthly spreadsheet drama."],
      ["White-label reporting", "Pull from your existing analytics. Send a clean monthly report under your brand."],
      ["Invoicing hooks", "Connect to your billing stack. Time and scope flow into the invoice you already issue."],
      ["Renewals dashboard", "See which retainers are healthy, slipping or up for review at a glance."],
    ],
  },
  {
    title: "Security & operations",
    items: [
      ["Encryption", "TLS 1.2+ in transit, AES-256 at rest. Encrypted backups stored in U.S. and EU regions."],
      ["SSO & SCIM", "SAML SSO and SCIM user provisioning on the Scale plan."],
      ["Audit log", "An append-only log of every meaningful change — exportable on demand."],
      ["Data export", "Full data export, any time. Your data is always yours, in open formats."],
    ],
  },
];

const FeaturesPage = () => (
  <>
    <PageShell
      eyebrow="Features"
      title={<>Every feature, <em>grouped by job.</em></>}
      lead="A practical map of what Conyvex does — organised the way an agency actually works, not by feature category."
    >
      <div className="hero-cta" style={{ marginTop: 0 }}>
        <Link to="/quote" className="btn btn-primary">Request a quote <span className="arrow">→</span></Link>
        <Link to="/product" className="btn btn-ghost">See it in action</Link>
      </div>
    </PageShell>
    <section className="container section">
      {FEATURE_GROUPS.map((g, gi) => (
        <div key={gi} className="feature-group">
          <h2 className="h-card feature-group-title">{g.title}</h2>
          <div className="feature-group-grid">
            {g.items.map(([t, b], i) => (
              <div className="feature-row" key={i}>
                <div className="feature-row-num mono">/ {String(i + 1).padStart(2, "0")}</div>
                <div>
                  <h3 className="feature-row-title">{t}</h3>
                  <p className="feature-row-body">{b}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </section>
    <Features />
    <CTA />
  </>
);

/* ------------ USE CASES PAGE ------------ */
const UseCasesPage = () => (
  <>
    <PageShell
      eyebrow="Who it's for"
      title={<>Built for studios, growth shops, <em>and everyone in between.</em></>}
      lead="Conyvex is shaped around the realities of running an agency — not the abstractions of a generic project tool."
    />
    <WhoFor />
    <Workflow />
    <CTA />
  </>
);

/* ------------ ABOUT PAGE ------------ */
const AboutPage = () => (
  <>
    <PageShell
      eyebrow="About"
      title={<>An independent studio<br /><em>building one calm tool.</em></>}
      lead="Conyvex is built by a small team for the marketing agencies we've worked alongside for the better part of a decade."
    />
    <section className="container section">
      <div className="prose">
        <h2 className="h-card">Who we are</h2>
        <p>
          {COMPANY.legalName} is a {COMPANY.incorporationState} limited liability company headquartered at {COMPANY.address1}, {COMPANY.city}, {COMPANY.regionAbbr} {COMPANY.postal}, {COMPANY.country}. Founded in {COMPANY.foundedYear}, we design and operate Conyvex, a workspace for marketing agencies.
        </p>

        <h2 className="h-card">What we believe</h2>
        <p>
          Agency teams shouldn't have to translate between five tools to ship one campaign. We believe in software that has an opinion, respects your time, and gets out of the way once it has earned its place in your day.
        </p>

        <h2 className="h-card">How we work</h2>
        <ul className="prose-list">
          <li><strong>Independent.</strong> We are privately held and bootstrapped — no venture funding, no external investors.</li>
          <li><strong>Paid by customers.</strong> Revenue comes from B2B SaaS subscriptions billed by signed order form. No advertising, no data resale, no surveillance economics.</li>
          <li><strong>Long-term oriented.</strong> We optimise for years, not quarters.</li>
        </ul>

        <h2 className="h-card">Company facts</h2>
        <ul className="prose-list">
          <li><strong>Legal entity:</strong> {COMPANY.legalName}</li>
          <li><strong>Formation:</strong> {COMPANY.incorporationState} LLC, formed {COMPANY.foundedYear}</li>
          <li><strong>Principal office:</strong> {COMPANY.address1}, {COMPANY.city}, {COMPANY.regionAbbr} {COMPANY.postal}, {COMPANY.country}</li>
          <li><strong>Industry:</strong> B2B SaaS · NAICS {COMPANY.naics} ({COMPANY.naicsLabel})</li>
          <li><strong>Banking:</strong> U.S. business banking (USD operating account)</li>
          <li><strong>Customers:</strong> marketing agencies, creative studios and content teams</li>
        </ul>

        <h2 className="h-card">Get in touch</h2>
        <p>
          Press, partnerships, security disclosures or just a chat — write to{" "}
          <a href={`mailto:${COMPANY.email}`}>{COMPANY.email}</a> or call{" "}
          <a href={`tel:${COMPANY.phoneHref}`}>{COMPANY.phone}</a> (Mon–Fri 09:00–18:00 MT).
        </p>
      </div>
    </section>
    <CTA />
  </>
);

/* ------------ CONTACT PAGE ------------ */
const ContactPage = () => {
  const [sent, setSent] = useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
  };
  return (
    <>
      <PageShell
        eyebrow="Contact"
        title={<>Talk to a human, <em>not a bot.</em></>}
        lead="Sales, support, partnerships, security — every message lands with a real person on our team."
      />
      <section className="container section contact-section">
        <div className="contact-grid">
          <div className="contact-info">
            <h3 className="h-card">{COMPANY.legalName}</h3>
            <address className="contact-address">
              <div>{COMPANY.address1}</div>
              <div>{COMPANY.city}, {COMPANY.regionAbbr} {COMPANY.postal}</div>
              <div>{COMPANY.country}</div>
              <div className="mono" style={{ marginTop: 8, fontSize: 11.5, color: "var(--ink-soft)" }}>
                Wyoming LLC · Founded {COMPANY.foundedYear}
              </div>
            </address>
            <div className="contact-line">
              <span className="mono">Email</span>
              <a href={`mailto:${COMPANY.email}`}>{COMPANY.email}</a>
            </div>
            <div className="contact-line">
              <span className="mono">Phone</span>
              <a href={`tel:${COMPANY.phoneHref}`}>{COMPANY.phone}</a>
            </div>
            <div className="contact-line">
              <span className="mono">Hours</span>
              <span>{COMPANY.hours}</span>
            </div>
            <div className="contact-line">
              <span className="mono">Sales</span>
              <a href={`mailto:sales@conyvex.com`}>sales@conyvex.com</a>
            </div>
            <div className="contact-line">
              <span className="mono">Support</span>
              <a href={`mailto:support@conyvex.com`}>support@conyvex.com</a>
            </div>
            <div className="contact-line">
              <span className="mono">Security</span>
              <a href={`mailto:security@conyvex.com`}>security@conyvex.com</a>
            </div>
            <div className="contact-line">
              <span className="mono">Privacy</span>
              <a href={`mailto:privacy@conyvex.com`}>privacy@conyvex.com</a>
            </div>
          </div>

          <form className="contact-form" onSubmit={onSubmit} noValidate>
            {sent ? (
              <div className="contact-sent">
                <span className="eyebrow">Message received</span>
                <h3 className="h-card" style={{ marginTop: 12 }}>Thank you.</h3>
                <p className="lead">A team member will reply within two business days. For urgent matters, call <a href={`tel:${COMPANY.phoneHref}`}>{COMPANY.phone}</a>.</p>
              </div>
            ) : (
              <>
                <div className="field">
                  <label>Full name</label>
                  <input type="text" name="name" required autoComplete="name" />
                </div>
                <div className="field">
                  <label>Work email</label>
                  <input type="email" name="email" required autoComplete="email" />
                </div>
                <div className="field">
                  <label>Company</label>
                  <input type="text" name="company" autoComplete="organization" />
                </div>
                <div className="field">
                  <label>How can we help?</label>
                  <textarea name="message" rows={5} required />
                </div>
                <label className="checkbox">
                  <input type="checkbox" required />
                  <span>I have read and accept the <Link to="/legal/privacy">Privacy Policy</Link>.</span>
                </label>
                <button type="submit" className="btn btn-primary">Send message <span className="arrow">→</span></button>
                <p className="mono contact-note">Submitting this form sends your message by email to our team. We never share your details with third parties.</p>
              </>
            )}
          </form>
        </div>
      </section>
    </>
  );
};

/* ------------ QUOTE PAGE ------------ */
const QuotePage = () => {
  const [sent, setSent] = useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
  };
  return (
    <>
      <PageShell
        eyebrow="Request a quote"
        title={<>A proposal in <em>two business days.</em></>}
        lead="Tell us about your agency. We'll send a tailored proposal — no public pricing, no aggressive sales calls."
      />
      <section className="container section quote-section">
        <div className="quote-grid">
          <aside className="quote-aside">
            <h3 className="h-card">How it works</h3>
            <ol className="quote-steps">
              <li><strong>You submit the brief.</strong> Team size, client count, integrations.</li>
              <li><strong>We review.</strong> A real person reads it and gets in touch with questions if needed.</li>
              <li><strong>We send a proposal.</strong> Plain wording, fixed terms, no usage-based traps.</li>
              <li><strong>You sign or walk away.</strong> No pressure. We'll never auto-bill you.</li>
            </ol>

            <h3 className="h-card" style={{ marginTop: 32 }}>What we never do</h3>
            <ul className="prose-list">
              <li>No public list pricing — every quote is bespoke.</li>
              <li>No hidden usage fees or click-based billing.</li>
              <li>No reselling your data, ever.</li>
              <li>No auto-renewal without written confirmation.</li>
            </ul>

            <h3 className="h-card" style={{ marginTop: 32 }}>Prefer to talk?</h3>
            <p>Call <a href={`tel:${COMPANY.phoneHref}`}>{COMPANY.phone}</a> or email <a href={`mailto:sales@conyvex.com`}>sales@conyvex.com</a>.</p>
          </aside>

          <form className="contact-form quote-form" onSubmit={onSubmit} noValidate>
            {sent ? (
              <div className="contact-sent">
                <span className="eyebrow">Brief received</span>
                <h3 className="h-card" style={{ marginTop: 12 }}>Thanks — we're on it.</h3>
                <p className="lead">A tailored proposal is on its way. Expect a response within two business days.</p>
              </div>
            ) : (
              <>
                <div className="form-row">
                  <div className="field">
                    <label>Full name</label>
                    <input type="text" required autoComplete="name" />
                  </div>
                  <div className="field">
                    <label>Work email</label>
                    <input type="email" required autoComplete="email" />
                  </div>
                </div>
                <div className="form-row">
                  <div className="field">
                    <label>Agency name</label>
                    <input type="text" required autoComplete="organization" />
                  </div>
                  <div className="field">
                    <label>Website</label>
                    <input type="url" placeholder="https://" />
                  </div>
                </div>
                <div className="form-row">
                  <div className="field">
                    <label>Team size</label>
                    <select required defaultValue="">
                      <option value="" disabled>Select…</option>
                      <option>1 — 3</option>
                      <option>4 — 10</option>
                      <option>11 — 25</option>
                      <option>26 — 50</option>
                      <option>50+</option>
                    </select>
                  </div>
                  <div className="field">
                    <label>Active clients</label>
                    <select required defaultValue="">
                      <option value="" disabled>Select…</option>
                      <option>1 — 5</option>
                      <option>6 — 15</option>
                      <option>16 — 40</option>
                      <option>40+</option>
                    </select>
                  </div>
                </div>
                <div className="field">
                  <label>What problem are you trying to solve?</label>
                  <textarea rows={4} required />
                </div>
                <div className="field">
                  <label>Integrations / requirements (optional)</label>
                  <textarea rows={3} placeholder="SSO, SOC 2 review, white-label, custom roles…" />
                </div>
                <label className="checkbox">
                  <input type="checkbox" required />
                  <span>I have read and accept the <Link to="/legal/privacy">Privacy Policy</Link>.</span>
                </label>
                <button type="submit" className="btn btn-primary">Send brief <span className="arrow">→</span></button>
                <p className="mono contact-note">By submitting this form you agree that {COMPANY.legalName} may contact you regarding your request.</p>
              </>
            )}
          </form>
        </div>
      </section>
    </>
  );
};

/* =========================================================
   LEGAL PAGES — bank-compliant content
   ========================================================= */

const Toc = ({ items }) => (
  <nav className="legal-toc" aria-label="Table of contents">
    <h4 className="mono legal-toc-title">On this page</h4>
    <ol>
      {items.map((it, i) => (
        <li key={i}><a href={`#${it.id}`}>{it.label}</a></li>
      ))}
    </ol>
  </nav>
);

const LegalLayout = ({ eyebrow, title, updated, intro, children, toc }) => (
  <article className="legal-page">
    <header className="container legal-head">
      <span className="eyebrow">{eyebrow}</span>
      <h1 className="h-section legal-title">{title}</h1>
      {updated && <div className="mono legal-updated">Last updated · {updated}</div>}
      {intro && <p className="lead legal-intro">{intro}</p>}
    </header>
    <div className="container legal-layout">
      <aside className="legal-side">
        {toc && <Toc items={toc} />}
        <div className="legal-card">
          <div className="mono" style={{ marginBottom: 6 }}>Issuer</div>
          <strong>{COMPANY.legalName}</strong>
          <div className="mono" style={{ marginTop: 6 }}>{COMPANY.address1}</div>
          <div className="mono">{COMPANY.city}, {COMPANY.regionAbbr} {COMPANY.postal}</div>
          <div className="mono">{COMPANY.country}</div>
          <div className="mono" style={{ marginTop: 6 }}>
            <a href={`mailto:${COMPANY.email}`}>{COMPANY.email}</a>
          </div>
          <div className="mono">
            <a href={`tel:${COMPANY.phoneHref}`}>{COMPANY.phone}</a>
          </div>
        </div>
      </aside>
      <div className="legal-body prose">
        {children}
      </div>
    </div>
  </article>
);

const LegalSection = ({ id, title, children }) => (
  <section id={id} className="legal-section">
    <h2 className="legal-h2">{title}</h2>
    {children}
  </section>
);

/* ------------ LEGAL NOTICE (US Wyoming LLC) ------------ */
const LegalNoticePage = () => {
  const toc = [
    { id: "publisher", label: "Company information" },
    { id: "principal", label: "Principal place of business" },
    { id: "host", label: "Hosting provider" },
    { id: "ip", label: "Intellectual property" },
    { id: "liability", label: "Liability" },
    { id: "law", label: "Governing law" },
    { id: "eu-disclosures", label: "EU disclosures" },
  ];
  return (
    <LegalLayout
      eyebrow="Legal notice"
      title={<>Legal <em>notice</em></>}
      updated="2026-05-25"
      intro="This page identifies the operator of the website and provides the legal disclosures required under United States and applicable foreign law."
      toc={toc}
    >
      <LegalSection id="publisher" title="1. Company information">
        <p>The website accessible at conyvex.com (the "Website") is operated by:</p>
        <ul>
          <li><strong>Legal name:</strong> {COMPANY.legalName}</li>
          <li><strong>Legal form:</strong> Limited Liability Company (LLC)</li>
          <li><strong>State of formation:</strong> {COMPANY.incorporationState}, {COMPANY.incorporationCountry}</li>
          <li><strong>Year of formation:</strong> {COMPANY.foundedYear}</li>
          <li><strong>Registered & principal office:</strong> {COMPANY.address1}, {COMPANY.city}, {COMPANY.regionAbbr} {COMPANY.postal}, {COMPANY.country}</li>
          <li><strong>NAICS code:</strong> {COMPANY.naics} — {COMPANY.naicsLabel}</li>
          <li><strong>General contact:</strong> <a href={`mailto:${COMPANY.email}`}>{COMPANY.email}</a></li>
          <li><strong>Phone:</strong> <a href={`tel:${COMPANY.phoneHref}`}>{COMPANY.phone}</a> (Mon–Fri 09:00–18:00 MT)</li>
        </ul>
      </LegalSection>

      <LegalSection id="principal" title="2. Principal place of business">
        <p>{COMPANY.legalName} maintains its principal place of business at the address above, in Sheridan, Wyoming, United States. All formal notices to the company must be sent in writing to that address or to <a href={`mailto:legal@conyvex.com`}>legal@conyvex.com</a>.</p>
      </LegalSection>

      <LegalSection id="host" title="3. Hosting provider">
        <p>The Website is primarily hosted on Amazon Web Services, Inc. (AWS), with Cloudflare, Inc. as content delivery network and WAF provider. The full list of infrastructure sub-processors is published in our <Link to="/legal/dpa">Data Processing Agreement</Link>.</p>
      </LegalSection>

      <LegalSection id="ip" title="4. Intellectual property">
        <p>The Website, its content (including text, images, logos, code and design) and the Conyvex software are protected by intellectual property rights and remain the exclusive property of {COMPANY.legalName} or its licensors. Any reproduction, representation, modification or commercial exploitation without prior written authorisation is strictly prohibited.</p>
      </LegalSection>

      <LegalSection id="liability" title="5. Liability">
        <p>{COMPANY.legalName} makes reasonable efforts to ensure that the information published on the Website is accurate and up to date but provides no warranty as to completeness or fitness for a particular purpose. Use of the Website is at the user's sole risk, subject to the limitations set out in the <Link to="/legal/terms">Terms of Service</Link>.</p>
      </LegalSection>

      <LegalSection id="law" title="6. Governing law and jurisdiction">
        <p>The Website and these legal notices are governed by the laws of the State of {COMPANY.incorporationState}, United States, without regard to its conflict-of-laws rules. Any dispute that cannot be resolved amicably shall be submitted to the state or federal courts located in {COMPANY.incorporationState}, subject to any applicable consumer-protection rules.</p>
      </LegalSection>

      <LegalSection id="eu-disclosures" title="7. EU disclosures (information for European users)">
        <p>For users located in the European Economic Area or the United Kingdom, additional information is provided under our <Link to="/legal/privacy">Privacy Policy</Link> and <Link to="/legal/dpa">Data Processing Agreement</Link>. EU consumers may submit any dispute relating to the Website to the European Commission online dispute resolution platform at <a href="https://ec.europa.eu/consumers/odr" target="_blank" rel="noreferrer">ec.europa.eu/consumers/odr</a>. {COMPANY.legalName} is not established in the EU; the GDPR applies only insofar as the Service is offered to data subjects in the European Economic Area.</p>
      </LegalSection>
    </LegalLayout>
  );
};

/* ------------ TERMS OF SERVICE ------------ */
const TermsPage = () => {
  const toc = [
    { id: "definitions", label: "Definitions" },
    { id: "acceptance", label: "Acceptance" },
    { id: "service", label: "The service" },
    { id: "accounts", label: "Accounts & access" },
    { id: "fees", label: "Fees, invoicing & taxes" },
    { id: "payment", label: "Payment terms" },
    { id: "term", label: "Term & termination" },
    { id: "data", label: "Customer data & privacy" },
    { id: "ip-terms", label: "Intellectual property" },
    { id: "warranty", label: "Warranty disclaimer" },
    { id: "liability-terms", label: "Limitation of liability" },
    { id: "indemnity", label: "Indemnification" },
    { id: "force", label: "Force majeure" },
    { id: "general", label: "General provisions" },
  ];
  return (
    <LegalLayout
      eyebrow="Terms of service"
      title={<>Terms of <em>service</em></>}
      updated="2026-05-25"
      intro="These Terms govern access to and use of Conyvex provided by Conyvex LLC. By creating an account, signing an order form or using the service, you agree to these Terms."
      toc={toc}
    >
      <LegalSection id="definitions" title="1. Definitions">
        <p>"<strong>Service</strong>" means the Conyvex software-as-a-service platform and any related professional services. "<strong>Customer</strong>" or "<strong>you</strong>" means the legal entity or individual entering into these Terms. "<strong>Order Form</strong>" means a written, signed document referencing these Terms. "<strong>Customer Data</strong>" means data the Customer or its users submit to the Service.</p>
      </LegalSection>

      <LegalSection id="acceptance" title="2. Acceptance of the Terms">
        <p>These Terms form a binding agreement between Customer and {COMPANY.legalName}, a {COMPANY.incorporationState} limited liability company with its principal place of business at {COMPANY.address1}, {COMPANY.city}, {COMPANY.regionAbbr} {COMPANY.postal}, {COMPANY.country}. Where an Order Form has been signed, it controls in case of conflict with these Terms.</p>
      </LegalSection>

      <LegalSection id="service" title="3. The Service">
        <p>Subject to payment of the applicable fees and compliance with these Terms, {COMPANY.legalName} grants Customer a non-exclusive, non-transferable, revocable right to access and use the Service for its internal business purposes during the subscription term.</p>
      </LegalSection>

      <LegalSection id="accounts" title="4. Accounts and access">
        <ul>
          <li>Customer is responsible for maintaining the confidentiality of credentials and for all activity on its account.</li>
          <li>Customer warrants that all information provided is accurate and that authorised users will comply with these Terms.</li>
          <li>{COMPANY.legalName} may suspend access in the event of suspected security breach, non-payment or violation of these Terms, after reasonable notice where practicable.</li>
        </ul>
      </LegalSection>

      <LegalSection id="fees" title="5. Fees, invoicing and taxes">
        <p>All fees are set out in the applicable Order Form and are issued on a quote basis — there is no public pricing list. Fees are exclusive of value-added taxes, sales taxes and similar levies, which are payable by the Customer where applicable. Invoices are issued in <strong>U.S. dollars (USD)</strong> by default; alternative currencies (EUR, GBP) may be agreed in the Order Form.</p>
      </LegalSection>

      <LegalSection id="payment" title="6. Payment terms">
        <ul>
          <li>Invoices are payable within thirty (30) (Net 30) days of the invoice date unless otherwise stated in the Order Form.</li>
          <li>Late payments may bear interest at the lesser of 1.5% per month or the highest rate permitted under applicable law, plus reasonable collection costs and attorneys' fees.</li>
          <li>Payments are processed exclusively by reputable, PCI-DSS Level 1 certified payment processors and U.S. banks. {COMPANY.legalName} does not store full card numbers, CVV codes or full bank account numbers on its systems.</li>
        </ul>
      </LegalSection>

      <LegalSection id="term" title="7. Term and termination">
        <p>The subscription term is set out in the Order Form. Either party may terminate for material breach not cured within thirty (30) days of written notice. Upon termination, Customer may export its data for ninety (90) days, after which Customer Data will be deleted from production systems within thirty (30) days, subject to legal retention obligations.</p>
      </LegalSection>

      <LegalSection id="data" title="8. Customer Data and privacy">
        <p>As between the parties, Customer owns all Customer Data. {COMPANY.legalName} processes Customer Data solely to provide the Service in accordance with the <Link to="/legal/dpa">Data Processing Agreement</Link> and the <Link to="/legal/privacy">Privacy Policy</Link>.</p>
      </LegalSection>

      <LegalSection id="ip-terms" title="9. Intellectual property">
        <p>The Service, including all software, documentation, branding and improvements thereto, is and remains the exclusive property of {COMPANY.legalName}. Feedback voluntarily provided by Customer may be used by {COMPANY.legalName} without restriction.</p>
      </LegalSection>

      <LegalSection id="warranty" title="10. Warranty disclaimer">
        <p>To the maximum extent permitted by law, and except for the express warranties stated herein, the Service is provided "as is" without warranties of any kind, whether express, implied or statutory, including fitness for a particular purpose, merchantability and non-infringement.</p>
      </LegalSection>

      <LegalSection id="liability-terms" title="11. Limitation of liability">
        <p>To the maximum extent permitted by law, neither party shall be liable for indirect, consequential, special or punitive damages. Each party's aggregate liability under these Terms is limited to the fees paid by Customer to {COMPANY.legalName} in the twelve (12) months preceding the event giving rise to the claim. Nothing in these Terms limits liability for fraud, willful misconduct, death or personal injury, or any liability that cannot be excluded under applicable law.</p>
      </LegalSection>

      <LegalSection id="indemnity" title="12. Indemnification">
        <p>Each party shall defend, indemnify and hold harmless the other from third-party claims arising out of its breach of these Terms, gross negligence or willful misconduct, subject to prompt written notice and reasonable cooperation by the indemnified party.</p>
      </LegalSection>

      <LegalSection id="force" title="13. Force majeure">
        <p>Neither party is liable for any delay or failure to perform caused by events beyond its reasonable control, including acts of God, war, terrorism, pandemic, civil disturbance, strikes or failures of the public internet.</p>
      </LegalSection>

      <LegalSection id="general" title="14. General provisions">
        <ul>
          <li><strong>Governing law:</strong> these Terms are governed by the laws of the State of {COMPANY.incorporationState}, United States, without regard to its conflict-of-laws principles. The United Nations Convention on Contracts for the International Sale of Goods is expressly excluded.</li>
          <li><strong>Jurisdiction & venue:</strong> any dispute arising out of or relating to these Terms shall be submitted to the exclusive jurisdiction of the state or federal courts located in {COMPANY.incorporationState}, United States, subject to mandatory consumer-protection rules.</li>
          <li><strong>Dispute resolution:</strong> the parties shall first attempt to resolve disputes in good faith for thirty (30) days. Failing resolution, claims may be submitted to binding arbitration administered under commercially reasonable rules in {COMPANY.incorporationState}, except either party may seek injunctive relief in court.</li>
          <li><strong>Entire agreement:</strong> these Terms together with any Order Form constitute the entire agreement between the parties and supersede all prior agreements on the subject.</li>
          <li><strong>Severability:</strong> if any provision is held unenforceable, the remainder shall remain in full force and effect.</li>
          <li><strong>Assignment:</strong> neither party may assign these Terms without prior written consent, except to an affiliate or in connection with a merger, acquisition or sale of substantially all assets.</li>
          <li><strong>Notices:</strong> formal notices to {COMPANY.legalName} shall be sent to {COMPANY.address1}, {COMPANY.city}, {COMPANY.regionAbbr} {COMPANY.postal}, USA, with a copy to <a href={`mailto:legal@conyvex.com`}>legal@conyvex.com</a>.</li>
        </ul>
      </LegalSection>
    </LegalLayout>
  );
};

/* ------------ PRIVACY POLICY ------------ */
const PrivacyPage = () => {
  const toc = [
    { id: "p-controller", label: "Data controller" },
    { id: "p-data", label: "Data we collect" },
    { id: "p-purpose", label: "Purposes & lawful basis" },
    { id: "p-share", label: "Recipients & sub-processors" },
    { id: "p-transfer", label: "International transfers" },
    { id: "p-retention", label: "Retention" },
    { id: "p-rights", label: "Your rights (GDPR)" },
    { id: "p-ccpa", label: "California rights (CCPA/CPRA)" },
    { id: "p-us-states", label: "Other U.S. state rights" },
    { id: "p-security", label: "Security" },
    { id: "p-children", label: "Children" },
    { id: "p-contact", label: "Contact & complaints" },
  ];
  return (
    <LegalLayout
      eyebrow="Privacy policy"
      title={<>Privacy <em>policy</em></>}
      updated="2026-05-25"
      intro="This Privacy Policy explains how Conyvex LLC processes personal information. It is designed to meet the requirements of U.S. federal and state privacy laws (including the California CCPA/CPRA), the EU General Data Protection Regulation (GDPR) and the UK GDPR where applicable."
      toc={toc}
    >
      <LegalSection id="p-controller" title="1. Data controller / business operator">
        <p>The controller (under GDPR) and business (under CCPA) responsible for personal information processed via the Website and the Service is:</p>
        <ul>
          <li><strong>Entity:</strong> {COMPANY.legalName} ({COMPANY.incorporationState} LLC)</li>
          <li><strong>Address:</strong> {COMPANY.address1}, {COMPANY.city}, {COMPANY.regionAbbr} {COMPANY.postal}, {COMPANY.country}</li>
          <li><strong>Privacy contact:</strong> <a href={`mailto:privacy@conyvex.com`}>privacy@conyvex.com</a></li>
        </ul>
      </LegalSection>

      <LegalSection id="p-data" title="2. Categories of data we collect">
        <ul>
          <li><strong>Identity & contact data</strong> — name, professional email, company, role, phone (when provided).</li>
          <li><strong>Account data</strong> — credentials, preferences, audit logs.</li>
          <li><strong>Usage data</strong> — pages viewed, features used, device and browser metadata, IP address.</li>
          <li><strong>Communication data</strong> — messages exchanged with our team via email, forms or phone.</li>
          <li><strong>Customer data</strong> — content uploaded by Customer or its end users, processed under the <Link to="/legal/dpa">DPA</Link>.</li>
        </ul>
      </LegalSection>

      <LegalSection id="p-purpose" title="3. Purposes and lawful basis">
        <p>We process personal data for the following purposes, each based on a lawful basis under Article 6 GDPR:</p>
        <ul>
          <li><strong>Service provision</strong> — performance of contract (Art. 6(1)(b)).</li>
          <li><strong>Customer support & sales follow-up</strong> — legitimate interests in operating our business (Art. 6(1)(f)).</li>
          <li><strong>Compliance with legal obligations</strong> — tax, accounting, fraud prevention (Art. 6(1)(c)).</li>
          <li><strong>Marketing communications</strong> — your prior consent where required (Art. 6(1)(a)).</li>
          <li><strong>Security & abuse prevention</strong> — legitimate interest in protecting users and infrastructure.</li>
        </ul>
      </LegalSection>

      <LegalSection id="p-share" title="4. Recipients and sub-processors">
        <p>We share personal information with: (i) authorised employees on a need-to-know basis; (ii) vetted sub-processors providing hosting, email, analytics, payment processing and security services — the up-to-date list is published in our <Link to="/legal/dpa">Data Processing Agreement</Link>; and (iii) public authorities where legally required. We do not sell personal information and do not engage in advertising-based monetisation.</p>
      </LegalSection>

      <LegalSection id="p-transfer" title="5. International transfers">
        <p>Where personal data is transferred outside the European Economic Area, we rely on appropriate safeguards under Articles 44–49 GDPR, including the European Commission's Standard Contractual Clauses, supplemented by technical and organisational measures.</p>
      </LegalSection>

      <LegalSection id="p-retention" title="6. Retention">
        <p>We retain personal information only for as long as necessary to fulfil the purpose for which it was collected, subject to mandatory legal retention periods (notably seven years for U.S. federal tax records under IRS rules, and ten years for accounting records where EU law applies). Customer Data is retained for the duration of the subscription plus an export window of ninety days, after which it is deleted.</p>
      </LegalSection>

      <LegalSection id="p-rights" title="7. Your rights (GDPR)">
        <p>Subject to applicable law, EEA / UK residents have the right to: access, rectification, erasure, restriction, portability, and objection to processing, as well as the right to withdraw consent at any time and to lodge a complaint with a supervisory authority. To exercise your rights, contact <a href={`mailto:privacy@conyvex.com`}>privacy@conyvex.com</a>. We respond within one month.</p>
      </LegalSection>

      <LegalSection id="p-ccpa" title="8. California residents (CCPA / CPRA)">
        <p>If you are a California resident, the California Consumer Privacy Act (as amended by the CPRA) gives you specific rights regarding your personal information:</p>
        <ul>
          <li><strong>Right to know</strong> — request a copy of the personal information we have collected, used, disclosed, sold or shared about you in the prior 12 months.</li>
          <li><strong>Right to delete</strong> — request deletion of personal information we hold about you, subject to limited exceptions.</li>
          <li><strong>Right to correct</strong> — request correction of inaccurate personal information.</li>
          <li><strong>Right to opt out of sale / sharing</strong> — we <strong>do not sell or share personal information for cross-context behavioral advertising</strong>, but you can confirm this and exercise this right at any time.</li>
          <li><strong>Right to limit use of sensitive personal information</strong> — we only use such information for the purposes permitted by law.</li>
          <li><strong>Right to non-discrimination</strong> — we will not deny services, charge different prices or provide a different level of service in retaliation for exercising your rights.</li>
        </ul>
        <p>To exercise any of these rights, email <a href={`mailto:privacy@conyvex.com`}>privacy@conyvex.com</a> with the subject "California Privacy Request". We verify identity before processing and respond within 45 days as required by law. You may also designate an authorized agent.</p>
        <p><strong>Categories of personal information collected:</strong> identifiers, commercial information, internet activity, geolocation (general), professional information. We do not knowingly collect biometric, genetic or precise geolocation data.</p>
        <p><strong>Categories of recipients:</strong> our service providers and sub-processors (hosting, email, payments, analytics, security) as described above.</p>
        <p><strong>Retention:</strong> see section 6 (Retention).</p>
      </LegalSection>

      <LegalSection id="p-us-states" title="9. Residents of other U.S. states">
        <p>If you reside in Colorado, Connecticut, Virginia, Utah, Texas, Oregon, Montana or another U.S. state with a comprehensive consumer privacy law, you may have similar rights to access, delete, correct and port your personal information, and to opt out of targeted advertising or "sales" of personal information. To exercise any of these rights, contact <a href={`mailto:privacy@conyvex.com`}>privacy@conyvex.com</a>. Conyvex LLC is committed to honoring valid requests from residents of any U.S. state that grants such rights.</p>
      </LegalSection>

      <LegalSection id="p-security" title="10. Security">
        <p>We implement appropriate technical and organisational measures including encryption in transit and at rest, access controls, regular vulnerability testing, employee training, vendor due diligence and an incident response plan. See the <Link to="/legal/security">Security</Link> page for details.</p>
      </LegalSection>

      <LegalSection id="p-children" title="11. Children">
        <p>The Service is not directed to children under 16. We do not knowingly collect personal information from children. If you believe we have inadvertently collected such information, please contact us at <a href={`mailto:privacy@conyvex.com`}>privacy@conyvex.com</a> and we will delete it.</p>
      </LegalSection>

      <LegalSection id="p-contact" title="12. Contact and complaints">
        <p>For any question about this Privacy Policy, contact <a href={`mailto:privacy@conyvex.com`}>privacy@conyvex.com</a> or write to {COMPANY.legalName}, {COMPANY.address1}, {COMPANY.city}, {COMPANY.regionAbbr} {COMPANY.postal}, {COMPANY.country}. U.S. residents may also contact the Federal Trade Commission at <a href="https://www.ftc.gov" target="_blank" rel="noreferrer">ftc.gov</a> or their state Attorney General. EU/UK residents may lodge a complaint with their local data protection authority (e.g. the French CNIL at <a href="https://www.cnil.fr" target="_blank" rel="noreferrer">cnil.fr</a>).</p>
      </LegalSection>
    </LegalLayout>
  );
};

/* ------------ COOKIES ------------ */
const CookiesPage = () => {
  const toc = [
    { id: "c-what", label: "What cookies are" },
    { id: "c-types", label: "Types we use" },
    { id: "c-list", label: "Cookie list" },
    { id: "c-manage", label: "Managing preferences" },
  ];
  return (
    <LegalLayout
      eyebrow="Cookie policy"
      title={<>Cookie <em>policy</em></>}
      updated="2026-05-25"
      intro="We use a minimum of cookies — only essential ones are placed by default. This page explains what they do and how to disable them."
      toc={toc}
    >
      <LegalSection id="c-what" title="1. What are cookies?">
        <p>Cookies are small text files placed on your device by a website. They allow the site to recognise your browser between visits and to deliver core features such as authentication or preference storage.</p>
      </LegalSection>

      <LegalSection id="c-types" title="2. Types of cookies we use">
        <ul>
          <li><strong>Strictly necessary cookies</strong> — required to operate the Website (session management, security, load balancing). These do not require consent.</li>
          <li><strong>Functional cookies</strong> — remember your preferences (theme, accent colour). Stored locally.</li>
          <li><strong>Analytics cookies</strong> — placed only with your consent. We use privacy-respecting analytics with IP anonymisation and no cross-site tracking.</li>
          <li><strong>Marketing cookies</strong> — we do not currently use marketing cookies. If this changes, we will update this policy and request fresh consent.</li>
        </ul>
      </LegalSection>

      <LegalSection id="c-list" title="3. Cookie list">
        <div className="legal-table-wrap">
          <table className="legal-table">
            <thead>
              <tr><th>Name</th><th>Purpose</th><th>Type</th><th>Duration</th></tr>
            </thead>
            <tbody>
              <tr><td>conyvex_session</td><td>Authenticated session</td><td>Essential</td><td>Session</td></tr>
              <tr><td>conyvex_cookie_consent</td><td>Stores cookie preferences</td><td>Essential</td><td>12 months</td></tr>
              <tr><td>conyvex_tweaks</td><td>UI theme and accent preference</td><td>Functional</td><td>12 months</td></tr>
              <tr><td>_pa_*</td><td>Privacy-respecting analytics</td><td>Analytics (opt-in)</td><td>13 months</td></tr>
            </tbody>
          </table>
        </div>
      </LegalSection>

      <LegalSection id="c-manage" title="4. Managing your preferences">
        <p>You can withdraw or adjust your cookie preferences at any time by clearing your browser data for this site or by emailing <a href={`mailto:privacy@conyvex.com`}>privacy@conyvex.com</a>. Most browsers also let you block or delete cookies via their settings.</p>
      </LegalSection>
    </LegalLayout>
  );
};

/* ------------ DPA ------------ */
const DpaPage = () => {
  const toc = [
    { id: "dpa-purpose", label: "Purpose" },
    { id: "dpa-roles", label: "Roles" },
    { id: "dpa-instructions", label: "Processing instructions" },
    { id: "dpa-security", label: "Security measures" },
    { id: "dpa-sub", label: "Sub-processors" },
    { id: "dpa-transfers", label: "International transfers" },
    { id: "dpa-breach", label: "Breach notification" },
    { id: "dpa-end", label: "Return and deletion" },
  ];
  return (
    <LegalLayout
      eyebrow="Data processing"
      title={<>Data processing <em>agreement</em></>}
      updated="2026-05-25"
      intro="This DPA forms part of the agreement between the Customer (controller) and Conyvex LLC (processor) and reflects the requirements of Article 28 GDPR."
      toc={toc}
    >
      <LegalSection id="dpa-purpose" title="1. Purpose">
        <p>This DPA governs the processing of personal data carried out by Conyvex LLC on behalf of the Customer in connection with the provision of the Service.</p>
      </LegalSection>

      <LegalSection id="dpa-roles" title="2. Roles of the parties">
        <p>The Customer acts as data controller in respect of personal data processed within Customer Data. Conyvex LLC acts as processor and only processes personal data on documented instructions from the Customer.</p>
      </LegalSection>

      <LegalSection id="dpa-instructions" title="3. Processing instructions">
        <p>Conyvex LLC processes personal data: (i) to provide and support the Service; (ii) to comply with applicable law; and (iii) on any further documented instructions from the Customer compatible with the Service.</p>
      </LegalSection>

      <LegalSection id="dpa-security" title="4. Security measures">
        <p>Conyvex LLC implements appropriate technical and organisational measures including encryption in transit (TLS 1.2+) and at rest (AES-256), strict access controls, network segmentation, vulnerability management, regular backups, an information security policy and staff training. The full set of measures is described in the <Link to="/legal/security">Security</Link> page.</p>
      </LegalSection>

      <LegalSection id="dpa-sub" title="5. Sub-processors">
        <p>The Customer authorises Conyvex LLC to engage sub-processors, subject to (i) imposing equivalent data protection obligations on each sub-processor, and (ii) maintaining an up-to-date list available to the Customer. We notify Customers of any addition or replacement of sub-processors with at least thirty (30) days' prior notice, during which the Customer may object on reasonable grounds.</p>
        <p>Our current sub-processors are:</p>
        <div className="legal-table-wrap">
          <table className="legal-table">
            <thead>
              <tr><th>Provider</th><th>Purpose</th><th>Location of processing</th></tr>
            </thead>
            <tbody>
              <tr><td>Amazon Web Services, Inc.</td><td>Cloud hosting & storage</td><td>United States / EU (Frankfurt)</td></tr>
              <tr><td>Cloudflare, Inc.</td><td>CDN, DDoS protection, WAF</td><td>Global</td></tr>
              <tr><td>Stripe, Inc.</td><td>Payment processing (PCI-DSS L1)</td><td>United States</td></tr>
              <tr><td>Resend, Inc.</td><td>Transactional email delivery</td><td>United States</td></tr>
              <tr><td>Sentry (Functional Software, Inc.)</td><td>Error monitoring</td><td>United States</td></tr>
              <tr><td>Plausible Insights OÜ</td><td>Privacy-friendly analytics (opt-in)</td><td>European Union</td></tr>
            </tbody>
          </table>
        </div>
        <p className="mono" style={{ marginTop: 8 }}>List last updated · 2026-05-25 · Email <a href="mailto:privacy@conyvex.com">privacy@conyvex.com</a> to subscribe to change notifications.</p>
      </LegalSection>

      <LegalSection id="dpa-transfers" title="6. International transfers">
        <p>Where personal data is transferred outside the EEA, Conyvex LLC ensures appropriate safeguards under Articles 44–49 GDPR, including Standard Contractual Clauses where applicable.</p>
      </LegalSection>

      <LegalSection id="dpa-breach" title="7. Personal data breach notification">
        <p>Conyvex LLC will notify the Customer without undue delay, and in any event within seventy-two (72) hours of becoming aware, of any personal data breach affecting Customer Data, providing the information required by Article 33(3) GDPR to the extent available.</p>
      </LegalSection>

      <LegalSection id="dpa-end" title="8. Return and deletion of data">
        <p>On termination of the Service, Conyvex LLC will return or delete personal data at the Customer's choice within a reasonable period, save where retention is required by applicable law. A signed copy of this DPA is available on request to <a href={`mailto:privacy@conyvex.com`}>privacy@conyvex.com</a>.</p>
      </LegalSection>
    </LegalLayout>
  );
};

/* ------------ AUP ------------ */
const AupPage = () => {
  const toc = [
    { id: "aup-overview", label: "Overview" },
    { id: "aup-prohibited", label: "Prohibited conduct" },
    { id: "aup-content", label: "Prohibited content" },
    { id: "aup-security", label: "Security restrictions" },
    { id: "aup-enforcement", label: "Enforcement" },
    { id: "aup-reporting", label: "Reporting abuse" },
  ];
  return (
    <LegalLayout
      eyebrow="Acceptable use"
      title={<>Acceptable use <em>policy</em></>}
      updated="2026-05-25"
      intro="The following conduct is not permitted on Conyvex. This policy exists to keep the Service safe, lawful and useful for everyone."
      toc={toc}
    >
      <LegalSection id="aup-overview" title="1. Overview">
        <p>By using the Service you agree not to engage in the activities described below. We may suspend or terminate access in case of violation.</p>
      </LegalSection>

      <LegalSection id="aup-prohibited" title="2. Prohibited conduct">
        <ul>
          <li>Activity that violates any applicable law, regulation, or third-party right.</li>
          <li>Fraudulent activity, including misrepresentation of identity, phishing, or financial fraud.</li>
          <li>Harassment, threats, or content promoting discrimination or violence.</li>
          <li>Spam, bulk unsolicited messaging, or any form of abusive automation.</li>
          <li>Money laundering, terrorism financing, sanctions evasion or any activity prohibited by applicable financial regulation.</li>
        </ul>
      </LegalSection>

      <LegalSection id="aup-content" title="3. Prohibited content">
        <ul>
          <li>Child sexual abuse material (CSAM) — reported immediately to the competent authorities.</li>
          <li>Content infringing intellectual property rights.</li>
          <li>Malware, ransomware or any content designed to harm systems or users.</li>
          <li>Content that violates export control or sanctions law.</li>
        </ul>
      </LegalSection>

      <LegalSection id="aup-security" title="4. Security restrictions">
        <ul>
          <li>No unauthorised access attempts, scanning, fuzzing or denial-of-service activity.</li>
          <li>No bypassing rate limits, authentication or access controls.</li>
          <li>No reverse-engineering of the Service except to the extent permitted by mandatory law.</li>
        </ul>
      </LegalSection>

      <LegalSection id="aup-enforcement" title="5. Enforcement">
        <p>We may investigate suspected violations and take any action we deem appropriate, including suspending or terminating accounts, removing content and cooperating with law enforcement.</p>
      </LegalSection>

      <LegalSection id="aup-reporting" title="6. Reporting abuse">
        <p>Suspected violations can be reported to <a href={`mailto:abuse@conyvex.com`}>abuse@conyvex.com</a>. Security vulnerabilities should be reported to <a href={`mailto:security@conyvex.com`}>security@conyvex.com</a> — see the <Link to="/legal/security">Security</Link> page for details on responsible disclosure.</p>
      </LegalSection>
    </LegalLayout>
  );
};

/* ------------ SECURITY ------------ */
const SecurityPage = () => {
  const toc = [
    { id: "s-program", label: "Security program" },
    { id: "s-data", label: "Data protection" },
    { id: "s-access", label: "Access & identity" },
    { id: "s-infra", label: "Infrastructure" },
    { id: "s-app", label: "Application security" },
    { id: "s-ops", label: "Operations & monitoring" },
    { id: "s-bcdr", label: "Business continuity" },
    { id: "s-disclosure", label: "Responsible disclosure" },
  ];
  return (
    <LegalLayout
      eyebrow="Security"
      title={<>Security <em>at Conyvex</em></>}
      updated="2026-05-25"
      intro="A summary of how we protect Customer Data. Our sub-processor list is published in the DPA; the information security policy and penetration-test summaries are delivered to customers under NDA."
      toc={toc}
    >
      <LegalSection id="s-program" title="1. Information security program">
        <p>We operate a documented information security program aligned with the principles of ISO/IEC 27001 and the SOC 2 Trust Services Criteria. It is reviewed at least annually, owned by our leadership, and applies to all employees, contractors and sub-processors.</p>
      </LegalSection>

      <LegalSection id="s-data" title="2. Data protection">
        <ul>
          <li>Encryption in transit using TLS 1.2 or higher with modern cipher suites.</li>
          <li>Encryption at rest using AES-256 on managed storage.</li>
          <li>Key management via cloud-native key management services with role-based access.</li>
          <li>Backups are encrypted, restricted and tested periodically.</li>
        </ul>
      </LegalSection>

      <LegalSection id="s-access" title="3. Access and identity">
        <ul>
          <li>Single Sign-On (SSO) via SAML on the Scale plan.</li>
          <li>Multi-factor authentication for all administrative access.</li>
          <li>Least-privilege access model; access is reviewed quarterly.</li>
          <li>Hardware key requirement for production access.</li>
        </ul>
      </LegalSection>

      <LegalSection id="s-infra" title="4. Infrastructure">
        <p>Conyvex runs on hardened cloud infrastructure operated by reputable EU and US providers. Production environments are isolated from staging and development, with strict network segmentation, private networking and configuration as code.</p>
      </LegalSection>

      <LegalSection id="s-app" title="5. Application security">
        <ul>
          <li>Secure software development lifecycle with peer review on every change.</li>
          <li>Automated static analysis and dependency scanning in CI/CD.</li>
          <li>Annual third-party penetration testing; executive summary delivered to customers under NDA.</li>
          <li>Bug bounty program available to qualified researchers.</li>
        </ul>
      </LegalSection>

      <LegalSection id="s-ops" title="6. Operations and monitoring">
        <ul>
          <li>Centralised logging with tamper-evident storage.</li>
          <li>24/7 alerting on critical infrastructure and security events.</li>
          <li>Documented incident response plan tested annually.</li>
        </ul>
      </LegalSection>

      <LegalSection id="s-bcdr" title="7. Business continuity and disaster recovery">
        <p>We maintain a documented BC/DR plan with defined recovery objectives (RTO and RPO) and conduct annual recovery exercises. Backups are stored in geographically separate regions.</p>
      </LegalSection>

      <LegalSection id="s-disclosure" title="8. Responsible disclosure">
        <p>If you believe you have found a security issue, please contact <a href={`mailto:security@conyvex.com`}>security@conyvex.com</a>. We acknowledge reports within one business day and commit to keeping researchers informed of remediation progress. We do not pursue good-faith researchers who follow this policy.</p>
      </LegalSection>
    </LegalLayout>
  );
};

/* ------------ REFUND ------------ */
const RefundPage = () => (
  <LegalLayout
    eyebrow="Refund & cancellation"
    title={<>Refund & cancellation <em>policy</em></>}
    updated="2026-05-25"
    intro="How cancellations and refunds work at Conyvex. We aim for fair, clear and quick — no dark patterns."
    toc={[
      { id: "r-cancel", label: "Cancelling" },
      { id: "r-refund", label: "Refunds" },
      { id: "r-chargeback", label: "Chargebacks" },
      { id: "r-process", label: "Processing time" },
    ]}
  >
    <LegalSection id="r-cancel" title="1. Cancelling your subscription">
      <p>You may cancel your subscription at any time by writing to <a href={`mailto:support@conyvex.com`}>support@conyvex.com</a> or via your account settings (where available). Cancellation takes effect at the end of the current billing period unless otherwise agreed in writing.</p>
    </LegalSection>

    <LegalSection id="r-refund" title="2. Refunds">
      <ul>
        <li><strong>Annual prepaid subscriptions:</strong> a pro-rata refund is issued where {COMPANY.legalName} is the cause of termination (e.g. material breach not cured).</li>
        <li><strong>Monthly subscriptions:</strong> non-refundable for the current period; future periods are simply not billed.</li>
        <li><strong>One-off professional services:</strong> non-refundable once delivered, except where required by law.</li>
        <li><strong>Consumer right of withdrawal (EU/UK):</strong> consumers in the European Union or the United Kingdom benefit from a 14-day right of withdrawal under their local consumer law, unless they have requested the Service to start during this period.</li>
      </ul>
    </LegalSection>

    <LegalSection id="r-chargeback" title="3. Chargebacks">
      <p>If a payment dispute or chargeback arises, please contact us first at <a href={`mailto:support@conyvex.com`}>support@conyvex.com</a>. We aim to resolve issues directly. Fraudulent chargebacks may result in account suspension and recovery action.</p>
    </LegalSection>

    <LegalSection id="r-process" title="4. Processing time">
      <p>Approved refunds are processed via the original payment method within ten (10) business days. Your bank may apply additional settlement times.</p>
    </LegalSection>
  </LegalLayout>
);

/* ------------ SLA ------------ */
const SlaPage = () => (
  <LegalLayout
    eyebrow="Service level"
    title={<>Service level <em>agreement</em></>}
    updated="2026-05-25"
    intro="This SLA applies to the Conyvex production service for Customers on a paid Studio or Scale plan."
    toc={[
      { id: "sla-uptime", label: "Uptime commitment" },
      { id: "sla-credits", label: "Service credits" },
      { id: "sla-exclusions", label: "Exclusions" },
      { id: "sla-support", label: "Support response" },
    ]}
  >
    <LegalSection id="sla-uptime" title="1. Uptime commitment">
      <p>Conyvex LLC targets a monthly uptime of 99.9% for the production service, measured outside of scheduled maintenance windows communicated in advance.</p>
    </LegalSection>

    <LegalSection id="sla-credits" title="2. Service credits">
      <p>If monthly uptime falls below the committed target, Customer may request service credits proportional to the affected month's subscription fees:</p>
      <ul>
        <li>99.0% to &lt; 99.9% → 10% credit</li>
        <li>95.0% to &lt; 99.0% → 25% credit</li>
        <li>&lt; 95.0% → 50% credit</li>
      </ul>
      <p>Credits are the sole and exclusive remedy under this SLA.</p>
    </LegalSection>

    <LegalSection id="sla-exclusions" title="3. Exclusions">
      <ul>
        <li>Scheduled maintenance announced at least 48 hours in advance.</li>
        <li>Force majeure events.</li>
        <li>Issues caused by Customer or its third-party providers (DNS, networks, identity providers).</li>
        <li>Beta or preview features.</li>
      </ul>
    </LegalSection>

    <LegalSection id="sla-support" title="4. Support response targets">
      <ul>
        <li><strong>Critical (production down):</strong> first response within 1 business hour.</li>
        <li><strong>High:</strong> first response within 4 business hours.</li>
        <li><strong>Normal:</strong> first response within 1 business day.</li>
      </ul>
    </LegalSection>
  </LegalLayout>
);

/* ------------ COMPLIANCE / DISCLOSURES ------------ */
const CompliancePage = () => (
  <LegalLayout
    eyebrow="Compliance"
    title={<>Compliance & <em>disclosures</em></>}
    updated="2026-05-25"
    intro="A consolidated view of our compliance posture, regulatory commitments and required disclosures."
    toc={[
      { id: "comp-identity", label: "Company identity" },
      { id: "comp-frameworks", label: "Frameworks" },
      { id: "comp-aml", label: "AML / KYC" },
      { id: "comp-sanctions", label: "Sanctions" },
      { id: "comp-payments", label: "Payments" },
      { id: "comp-accessibility", label: "Accessibility" },
      { id: "comp-tax", label: "Tax & invoicing" },
      { id: "comp-contact", label: "Compliance contact" },
    ]}
  >
    <LegalSection id="comp-identity" title="1. Company identity">
      <ul>
        <li><strong>Legal name:</strong> {COMPANY.legalName}</li>
        <li><strong>Form:</strong> Limited Liability Company (LLC)</li>
        <li><strong>State of formation:</strong> {COMPANY.incorporationState}, {COMPANY.incorporationCountry}</li>
        <li><strong>Year of formation:</strong> {COMPANY.foundedYear}</li>
        <li><strong>Registered & principal office:</strong> {COMPANY.address1}, {COMPANY.city}, {COMPANY.regionAbbr} {COMPANY.postal}, {COMPANY.country}</li>
        <li><strong>NAICS code:</strong> {COMPANY.naics} — {COMPANY.naicsLabel}</li>
        <li><strong>Email:</strong> <a href={`mailto:${COMPANY.email}`}>{COMPANY.email}</a></li>
        <li><strong>Phone:</strong> <a href={`tel:${COMPANY.phoneHref}`}>{COMPANY.phone}</a> · {COMPANY.timezone}</li>
      </ul>
    </LegalSection>

    <LegalSection id="comp-frameworks" title="2. Frameworks & certifications">
      <ul>
        <li>Aligned with ISO/IEC 27001 principles.</li>
        <li>Operations aligned with SOC 2 (Security, Confidentiality, Availability) control criteria.</li>
        <li>GDPR — full compliance program; see <Link to="/legal/privacy">Privacy</Link> and <Link to="/legal/dpa">DPA</Link>.</li>
        <li>WCAG 2.1 AA — see accessibility section below.</li>
      </ul>
    </LegalSection>

    <LegalSection id="comp-aml" title="3. Anti-money laundering and KYC">
      <p>Conyvex LLC does not provide regulated financial services and is not a money services business (MSB). We apply commercially reasonable measures to detect and prevent fraudulent or illicit use of the Service, including identity verification of business customers where appropriate and screening of beneficial owners against the U.S. Treasury OFAC Specially Designated Nationals (SDN) list and equivalent EU/UN sanctions lists. We cooperate with competent authorities upon valid legal request.</p>
    </LegalSection>

    <LegalSection id="comp-sanctions" title="4. Sanctions & export control">
      <p>The Service is not made available to individuals or entities located in jurisdictions subject to comprehensive sanctions administered by the U.S. Office of Foreign Assets Control (OFAC), the European Union, the United Kingdom or the United Nations (currently including, without limitation, Cuba, Iran, North Korea, Syria, and the Crimea, Donetsk and Luhansk regions of Ukraine). Customers warrant that they are not subject to such sanctions and undertake not to use the Service in violation of applicable U.S. or international sanctions or export-control laws (including the U.S. Export Administration Regulations).</p>
    </LegalSection>

    <LegalSection id="comp-payments" title="5. Payments and card data">
      <p>All payments are processed exclusively by PCI-DSS Level 1 certified payment service providers. {COMPANY.legalName} does not store full card numbers, CVV codes or PIN data on its systems. Refunds are processed via the original payment method.</p>
    </LegalSection>

    <LegalSection id="comp-accessibility" title="6. Accessibility">
      <p>The Conyvex Website and product are designed to meet WCAG 2.1 AA. If you encounter an accessibility barrier, please contact <a href={`mailto:accessibility@conyvex.com`}>accessibility@conyvex.com</a> — we treat accessibility issues as defects.</p>
    </LegalSection>

    <LegalSection id="comp-tax" title="7. Tax and invoicing">
      <p>Invoices include all mandatory legal mentions (issuer identity, customer identity, dates, amounts and applicable taxes). Where applicable, VAT is invoiced in accordance with the rules of the customer's place of establishment.</p>
    </LegalSection>

    <LegalSection id="comp-contact" title="8. Compliance contact">
      <p>For any compliance-related question, write to <a href={`mailto:compliance@conyvex.com`}>compliance@conyvex.com</a> or by post to {COMPANY.legalName}, Compliance Office, {COMPANY.address1}, {COMPANY.city}, {COMPANY.regionAbbr} {COMPANY.postal}, {COMPANY.country}.</p>
    </LegalSection>
  </LegalLayout>
);

/* ------------ NOT FOUND ------------ */
const NotFoundPage = () => (
  <PageShell
    eyebrow="404"
    title={<>This page <em>doesn't exist.</em></>}
    lead="The link you followed may be broken, or the page may have moved."
  >
    <div className="hero-cta" style={{ marginTop: 0 }}>
      <Link to="/" className="btn btn-primary">Back to home <span className="arrow">→</span></Link>
      <Link to="/contact" className="btn btn-ghost">Contact support</Link>
    </div>
  </PageShell>
);

/* ------------ TWEAKS UI ------------ */
const Tweaks = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--accent-ink", "oklch(0.22 0.05 130)");
    root.setAttribute("data-mode", t.mode);
    if (t.displayFont === "helvetica") {
      root.style.setProperty("--font-sans", "Helvetica Neue, Helvetica, Arial, sans-serif");
    } else {
      root.style.setProperty("--font-sans", "Geist, Helvetica Neue, Helvetica, Arial, sans-serif");
    }
  }, [t.accent, t.mode, t.displayFont]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Accent">
        <TweakColor
          label="Color"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak("accent", v)}
        />
      </TweakSection>
      <TweakSection title="Mode">
        <TweakRadio
          label="Theme"
          value={t.mode}
          options={[{ value: "light", label: "Light" }, { value: "dark", label: "Dark" }]}
          onChange={(v) => setTweak("mode", v)}
        />
      </TweakSection>
      <TweakSection title="Type">
        <TweakRadio
          label="Display font"
          value={t.displayFont}
          options={[{ value: "geist", label: "Geist" }, { value: "helvetica", label: "Helvetica" }]}
          onChange={(v) => setTweak("displayFont", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
};

/* =========================================================
   APP / ROUTING
   ========================================================= */
const App = () => {
  const path = useRoute();

  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("in"); });
      },
      { threshold: 0.08 }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [path]);

  // Update document title
  useEffect(() => {
    const label = ROUTES[path] || "Page";
    document.title = path === "/" ? `${COMPANY.brand} — The workspace for marketing agencies` : `${label} · ${COMPANY.brand}`;
  }, [path]);

  let page;
  switch (path) {
    case "/": page = <HomePage />; break;
    case "/product": page = <ProductPage />; break;
    case "/features": page = <FeaturesPage />; break;
    case "/use-cases": page = <UseCasesPage />; break;
    case "/about": page = <AboutPage />; break;
    case "/contact": page = <ContactPage />; break;
    case "/quote": page = <QuotePage />; break;
    case "/legal/notice": page = <LegalNoticePage />; break;
    case "/legal/terms": page = <TermsPage />; break;
    case "/legal/privacy": page = <PrivacyPage />; break;
    case "/legal/cookies": page = <CookiesPage />; break;
    case "/legal/dpa": page = <DpaPage />; break;
    case "/legal/aup": page = <AupPage />; break;
    case "/legal/security": page = <SecurityPage />; break;
    case "/legal/refund": page = <RefundPage />; break;
    case "/legal/sla": page = <SlaPage />; break;
    case "/legal/compliance": page = <CompliancePage />; break;
    default: page = <NotFoundPage />;
  }

  return (
    <div className="page">
      <Nav currentPath={path} />
      <main>{page}</main>
      <Footer />
      <CookieConsent />
      <Tweaks />
    </div>
  );
};

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