// Platform page — waitlist mode. Sub-features mirror the detail on the live feature pages.
const FEATURES = [
  { id: "datastores", name: "Datastores", icon: "▦", docs: "datastores",
    desc: "Like databases, only smarter. They provide the backbone for your software or website.",
    sub: [
      ["Seamless management", "Automate the laborious tasks normally associated with databases — writing queries, schema/column management and data indexing — plus front-end and back-end validation of every value moving between client, web server and database."],
      ["40+ field types", "Text, code editor, WYSIWYG, date/time, colour, tickboxes, linked dropdowns, file upload, conditional field, pills, user search, AJAX search, slider, icon, password, toggle, icon-select, geolocation, signature, number, web video, phone, postal address and radios."],
      ["CRUD, generated", "No manual coding for regular interactions — all datastore CRUD forms are generated on both the client and admin sides automatically."],
      ["Importing data", "The Data Import System pulls data from files such as Excel with field mapping, data translation and 5 import methods: Import All, Import New Only, Delete, Delete Missing and Update Existing."],
      ["Query builder", "Web-based visual drag-and-drop query builder across multiple datastores, with join preview, column filtering and sorting."],
      ["Easy-create mode", "Drop a spreadsheet in and smart field-type detection converts it to a datastore — with permissions, full row-level audit and every other datastore benefit."],
      ["Row validation", "Add custom validation rules spanning multiple fields for next-level data quality."],
      ["Custom actions", "Datastore-level buttons for whole-table tasks, and row-level buttons that act on one or more fields of an individual record."],
    ] },
  { id: "forms", name: "Forms", icon: "▤", docs: "forms",
    desc: "Capture data from users by building forms ranging from basic contact forms to complex forms with multiple stages.",
    sub: [
      ["Create forms", "Generate a form from any datastore in a few clicks. Define who can complete it, what shows after submission, and advanced options such as custom callback functions."],
      ["Conditional form builder", "Drag-and-drop visual builder for conditional forms — specify options and the different field sets shown when each option is selected."],
      ["Dynamic add fields", "Handle a variable number of entries: group fields together and let users add further instances of the group with a button."],
      ["reCAPTCHA integration", "Stop spam with Google reCAPTCHA — all versions supported: v2 Checkbox, v2 Invisible and v3."],
      ["Electronic authorisation", "Each workflow stage can e-mail an authorisation request; recipients approve or decline by link, letting a submission proceed to the next stage."],
      ["Workflows", "Build workflows with unlimited stages, assigning different fields to different people at each stage and controlling which earlier fields are viewable or editable later."],
    ] },
  { id: "design", name: "Website / Page Builder", icon: "◫", docs: "page-builder",
    desc: "Build stunning websites that don't limit your creativity by using our exclusive front-end design tools.",
    sub: [
      ["Components available", "Add text, images, videos, forms, custom HTML and dynamically generated content — no manual programming."],
      ["Responsive design", "A responsive grid system ensures pages display correctly across PCs, laptops and smartphones."],
      ["Drag and drop", "Arrange the elements on a page simply by dragging and dropping them."],
      ["SEO", "Manage the title and meta description of each page individually so your site appears on search engines exactly as you want."],
    ] },
  { id: "development", name: "Development & General", icon: "</>", docs: "ide",
    desc: "Advanced users may wish to develop unique bespoke features — ActiveManage provides unique tools to enable fast, secure development.",
    sub: [
      ["Custom PHP code support", "Certain platform versions let you use your own PHP alongside every platform feature, building virtually any software in far less time than traditional development."],
      ["IDE", "A fully functional in-browser IDE for adding bespoke code to create practically anything."],
      ["Dependency manager", "Add 3rd-party open-source components through the web interface, with CDNJS integration to reduce traffic on your site."],
      ["Friendly URLs", "Create short, user-friendly URLs for better navigation and search rankings."],
      ["Deployment engine", "Integrates with AWS Elastic Beanstalk to manage versions and deploy to unlimited servers/instances/environments — one server or a thousand, in a click — with an infrastructure health view."],
    ] },
  { id: "files", name: "Files and Media", icon: "❒", docs: "file-stores",
    desc: "Store as many files as your storage allows and manage them with ease with the web-based file manager.",
    sub: [
      ["Resize / convert images", "Automatically resize and re-encode uploaded images for enhanced download performance."],
      ["Resize / convert videos", "Automatically resize and re-encode uploaded videos for efficient download and streaming."],
      ["Unlimited folders", "Create an unlimited number of folders and directories to organise files effectively."],
      ["Amazon S3 integration", "Enable the optional S3 integration to manage a virtually unlimited number of files with all the benefits S3 brings."],
      ["ZIP capabilities", "Zip and unzip archives directly from the web interface."],
    ] },
  { id: "documents", name: "Document Management", icon: "▭", docs: "document-indexing",
    desc: "Create a library of documents that you can organise, search and audit.",
    sub: [
      ["Upload and store", "Authors drag and drop a virtually unlimited number of documents from computer or mobile into a library."],
      ["Full-contents indexing", "Uploaded documents, spreadsheets and presentations are scanned so search covers every word in every file — not just filenames."],
      ["Auditing", "Every upload and change records who made it, when, and from which IP address."],
      ["Version control", "Every revision is kept, so you can see changes over time and revert if needed."],
      ["Recycle bin & restore", "Deleted documents go to a recycle bin for quick restoration; previous versions can be reverted too."],
      ["Custom fields", "Add custom fields to the library so authors capture related information — searchable and filterable by users."],
    ] },
  { id: "audit", name: "Auditing", icon: "◊", docs: "activity-log",
    desc: "Data protection and governance are available for all your datastores.",
    sub: [
      ["Full change history", "Every add, edit and delete records what changed, when, and who changed it."],
      ["Data rollback", "Because every change is recorded, you can view all historic data and roll back to a previous version in one click."],
      ["Deleted items", "Deleted data is stored in a designated area and can be restored at any time."],
      ["Activity log", "A chronological, site-wide timeline of all data changes and actions completed by all users."],
    ] },
  { id: "search", name: "Searching", icon: "○", docs: "searching",
    desc: "Build your own searches, targeting all the datastore fields you specify — with auto-suggest, prediction and analytic recording.",
    sub: [
      ["Search scopes", "Define scopes that determine which datastore fields are searched; combine multiple scopes into a single search."],
      ["Auto-correction / fuzzy", "If a visitor misspells a word, the platform detects it from indexed content and returns results for the correct spelling."],
      ["Word completion", "The engine suggests and auto-completes query words as users type."],
      ["Synonyms", "Add synonyms so the engine also matches similar words in results."],
    ] },
  { id: "auth", name: "Authentication", icon: "◉", docs: "authentication",
    desc: "ActiveManage offers its own user account facility but also integrates seamlessly with 3rd-party providers such as Active Directory, Azure AD and Google.",
    sub: [
      ["In-built user accounts", "A full user account system out of the box, controlling access and ensuring accountability for every action."],
      ["Custom user fields", "Add your own fields to user records; choose whether users can edit them or restrict them to administrators."],
      ["AD / Azure AD / LDAP", "Link to multiple existing domains and tenants so users log in without a separate account — working with the rest of the user system including security groups."],
      ["Security groups", "Unlimited groups; users can belong to several, and you can appoint group managers who control membership."],
      ["Custom permissions", "Create custom permissions for bespoke purposes and assign them to security groups."],
      ["2FA — SMS & TOTP", "Add a verification step after username/password: an automated SMS code, or a code from Google/Microsoft Authenticator (TOTP)."],
      ["Self-service resets", "Optionally let users reset their own passwords via emailed reset links."],
      ["Account end dates", "Configure accounts to expire automatically once a certain date is reached."],
    ] },
  { id: "ecommerce", name: "eCommerce / Shopping", icon: "$", docs: "carts-ecommerce",
    desc: "Build carts for shopping with searching, filters, categories, payments and order tracking — or configure carts for other purposes with custom checkout actions.",
    sub: [
      ["Product categories", "Build a store category tree with an unlimited number of levels."],
      ["Products", "Add unlimited products, including variation and combination options to select."],
      ["Multi-vendor marketplace", "Host a store where vendors you approve list their own products."],
      ["Search & filters", "Comprehensive, tailorable search plus easy-to-use filter types help customers find the right product fast — variations included."],
      ["Stock control", "Set stock levels; the platform keeps them current as customers buy, prevents over-selling or allows pre-orders, and handles resupplies and write-offs."],
      ["Multiple product types", "Define product types with different fields — e.g. colour, material and shoe size for trainers — for stress-free filtering."],
      ["Reviews & ratings", "Enable reviews, ratings and testimonials to build trust and encourage purchases."],
      ["Cart, checkout & returns", "A full cart and checkout flow, plus an integrated returns system with request tracking and an accepted/declined dashboard."],
    ] },
  { id: "subs", name: "Subscriptions", icon: "≋", docs: "subscription-engine",
    desc: "Configure your application to be accessed on a subscription basis, including different tiers of membership providing access to different features.",
    sub: [
      ["Subscription engine", "Offer subscriptions with onboarding, integrated billing and management built in — including free trials and minimum contract periods."],
      ["Recurring payments", "Via the Stripe integration, payments are taken automatically per plan, with the option to pause access if payments stop."],
      ["Trial mode", "Offer a trial before billing to increase sign-up rates and retention."],
      ["Tiered feature access", "Different membership tiers unlock different features across your application."],
    ] },
  { id: "multi", name: "Multitenancy", icon: "⊞", docs: "multitenancy",
    desc: "Create tenant organisations who can each use an isolated version of the application.",
    sub: [
      ["Instance configuration", "Create custom fields available when creating/managing tenants — used to control functionality and settings per tenant, and optionally managed by tenant owners."],
      ["Users", "Let tenants create and manage their own users, ensuring only they can access the information within their tenant."],
    ] },
  { id: "reports", name: "Reports", icon: "▥", docs: "reports",
    desc: "Advanced report builder that is easy to use yet powerful enough to automatically join and filter related tables.",
    sub: [
      ["Standard reports", "Available for every datastore; add filters and criteria across multiple columns and specify date/time ranges."],
      ["Summary reports", "Quickly count distinct values in one or more columns for at-a-glance analysis."],
      ["Graphs", "Output report results to a variety of graph types."],
    ] },
  { id: "comms", name: "Communication", icon: "@", docs: "email",
    desc: "A comprehensive suite of e-mail/SMS tools which not only send modern responsive HTML e-mails but also receive and process e-mails.",
    sub: [
      ["Send e-mails", "Add an e-mail account to send informative and transactional e-mails to users and clients."],
      ["Templates & designer", "Compose templates with field placeholders for dynamic data, and build striking responsive HTML with the visual e-mail designer."],
      ["E-mail tracking", "Enable one option to see which e-mails were opened, when, and on which device/browser/IP."],
      ["Modern OAUTH auth", "Authenticate via the provider's native login; the platform obtains and auto-renews OAUTH tokens and warns before refresh tokens expire."],
      ["Multiple protocols", "Send and receive over IMAP, SMTP, Microsoft Graph or Amazon SES. SendGrid works with just a key; the HTTPS relay sends/receives when mail ports are blocked."],
      ["SMS", "Send informative or transactional SMS; the built-in 2FA facility uses the same channel for one-time passcodes."],
      ["Inbox processing", "Automatically fetch inbound e-mail and add inbox actions — pass matching messages (and attachments) to data extraction or a custom function."],
    ] },
  { id: "integrate", name: "Integrations", icon: "↔", docs: "api",
    desc: "A wide range of integrations you can use — whilst also allowing you to build your own.",
    sub: [
      ["API", "An API engine with ready-to-use create/read/update/delete functions for any data in your application — plus custom functions you build."],
      ["Datastore sync", "Link multiple ActiveManage instances to automatically synchronise selected data between them."],
      ["External databases", "Link a database used by an external application to your ActiveManage platform."],
    ] },
  { id: "support", name: "Management & Support", icon: "?", docs: "help-support",
    desc: "Add help articles and videos into your application which end-users can refer to — minimising support calls and empowering your users.",
    sub: [
      ["Help & support builder", "Build a help and support library for your application, accessible by end-users and admins."],
      ["Automated tasks", "Configure automated/scheduled tasks that run at any interval — built-in platform features or custom PHP functions you develop."],
    ] },
  { id: "status", name: "Status Panel", icon: "◐", docs: "status-panel",
    desc: "Instantly view all the vital information regarding your software in an easy-to-understand dashboard.",
    sub: [
      ["Version monitoring", "Monitors web server, PHP and database server versions and advises when upgrades are needed."],
      ["Benchmarking", "An in-built benchmarking tool measures the performance of your infrastructure."],
      ["Performance optimisation", "Informs you when additional performance is available by adjusting your server configuration."],
    ] },
  { id: "security", name: "Security", icon: "⌬", docs: "security-settings",
    desc: "View a report regarding the security of your software and see recommendations you can make to improve.",
    sub: [
      ["Encryption", "Add an extra layer of security by encrypting data per column — even if the database is compromised, the data stays unreadable."],
      ["Password hashing", "One-way encryption protects user passwords so no-one can read them."],
      ["Automatic IP blocking", "Brute-force attempts trigger automatic blocking of the offending IP address."],
      ["CSRF / XFF protection", "Cross-site request forgery protection stops attackers inducing users to perform unintended actions."],
      ["PHP security advisor", "Checks your PHP configuration to ensure a secure environment."],
      ["Account locking", "Repeated incorrect password attempts automatically lock the account."],
    ] },
  { id: "updates", name: "Installation & Updates", icon: "↻", docs: "platform-updates",
    desc: "The update system allows you to receive all the latest features and performance tweaks regularly released by ActiveManage.",
    sub: [
      ["Update engine", "Even when you aren't developing, the platform team keeps adding features, performance and security — all inherited through the one-click update facility."],
    ] },
  { id: "admin", name: "Admin Panel", icon: "◎", docs: "admin-panel",
    desc: "A separate area for the administrators of your software — and you can build the admin panel to tailor it around the features within your software.",
    sub: [
      ["Admin panel builder", "Build a bespoke admin panel fully tailored to the features you add, with different permissions on each item."],
      ["Dashboards", "Add dashboard elements — graphs and other statistic-based items — to give administrators an overview of your data."],
    ] },
  { id: "calendars", name: "Booking Calendars", icon: "▢", docs: "booking-calendars",
    desc: "Provide unlimited booking calendars with configurable availability, slot/range booking, multiple locations, attendance recording and e-mail/SMS confirmations.",
    sub: [
      ["Multiple calendars", "Create unlimited calendars, each with its own bookings, events and permissions."],
      ["Multiple event types", "Set up event types, each with its own booking length, data-collection fields and colour on the visual itinerary."],
      ["Variable booking lengths", "Offer fixed time slots, or let users enter their own date/time range — e.g. for booking annual leave."],
      ["Dual availability mode", "Choose whether a calendar is bookable only during specified periods, or always bookable except for specified periods."],
      ["Recurring availability", "Offer the same weekly schedule with recurring availability periods, plus overrides to remove dates such as bank holidays."],
      ["Advanced booking notice", "Define how far in advance users can view and book events."],
      ["Automated confirmations", "Send confirmation e-mails using your own template, or let the platform auto-generate one with all the booking details."],
      ["Attendance recording", "Track who attended their bookings with your own custom attendance options."],
      ["Multiple locations", "Add sites so users can browse booking slots per location."],
      ["Phone / manual bookings", "Administrators can make manual bookings on behalf of users without internet access."],
      ["Custom event fields", "Define unlimited custom fields per event to collect data at booking time."],
    ] },
];
const INTEGRATIONS = ["AWS", "Azure", "Google Cloud", "Stripe", "SendGrid", "Microsoft 365", "Active Directory", "Google Maps", "Google Analytics", "MySQL", "Redis", "Memcached", "S3", "Aurora", "OneDrive", "Google Drive", "Excel", "reCAPTCHA", "LinkedIn", "Facebook", "Instagram", "Composer"];

function PlatformPage({ onNavigate }) {
  return (
    <div className="page">
      {/* Hero with waitlist */}
      <section className="hero" style={{ paddingTop: 80, paddingBottom: 60 }}>
        <div className="aurora"><div className="blob"></div></div>
        <div className="aurora-grid"></div>
        <div className="container">
          <div className="rise" data-d="1" style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "8px 14px", borderRadius: 999, border: "1px solid var(--accent)", background: "var(--accent-soft)", marginBottom: 24 }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--accent)", boxShadow: "0 0 0 4px var(--accent-soft)", animation: "pulse 2s infinite" }} />
            <span className="mono" style={{ color: "var(--fg)", fontWeight: 500 }}>WAITLIST OPEN · LIMITED ONBOARDING SLOTS</span>
          </div>
          <h1 className="h-display rise" data-d="2" style={{ marginTop: 8, maxWidth: 1100 }}>
            A hundred tools.<br/><em style={{ fontFamily: "Instrument Serif, serif", fontWeight: 400 }}>One canvas.</em>
          </h1>
          <p className="lead rise" data-d="3" style={{ marginTop: 28, maxWidth: 640 }}>
            Datastores, forms, reports, auth, payments, multi-tenancy — all stitched together by a visual builder where the code, schema and infra are produced in the background.
          </p>
          <p className="rise" data-d="4" style={{ marginTop: 20, maxWidth: 640, color: "var(--fg)", fontSize: 17, fontWeight: 500 }}>
            We can't onboard everyone right now. Demand is well ahead of our capacity, so we run an invite-only waitlist to keep quality high for the teams already on the platform.
          </p>
        </div>
      </section>

      {/* Authentication showcase */}
      <AuthSection onNavigate={onNavigate} />

      {/* Features — full detail, always visible */}
      <section>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 32 }}>
            <div>
              <span className="eyebrow">21 areas · 100+ capabilities</span>
              <h2 className="h-large" style={{ marginTop: 16 }}>What's in the box.</h2>
            </div>
            <a href="#/docs" className="btn-link">Full documentation <span className="arrow">→</span></a>
          </div>
          <FeatureGrid features={FEATURES} />
        </div>
      </section>

      {/* Security */}
      <section className="section-dark">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64, alignItems: "center" }}>
            <div>
              <span className="eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>Security</span>
              <h2 className="h-large" style={{ marginTop: 16, marginBottom: 24 }}>NHS-grade security,<br/>without the meetings.</h2>
              <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 17, lineHeight: 1.55, maxWidth: 460 }}>
                We process credit cards, host patient data, and serve government departments. Security isn't a feature — it's the substrate. We exceed OWASP and have CREST-certified penetration tests on file.
              </p>
              <div style={{ marginTop: 24 }}>
                <button className="btn-link" style={{ color: "white", borderColor: "rgba(255,255,255,0.3)" }} onClick={() => onNavigate("security")}>
                  Read the full security posture <span className="arrow">→</span>
                </button>
              </div>
            </div>
            <div>
              <div className="spec-list" style={{ borderColor: "rgba(255,255,255,0.15)" }}>
                {[["2FA out the box", "TOTP & SMS"],["3rd-party SSO", "AD, Azure, Google +"],["IP blocking", "Brute-force protection"],["Account lock", "Password guessing"],["CSRF + XSS", "Built into every form"],["Hashed passwords", "Bank-grade, one-way"]].map(([k, v], i) => (
                  <div key={k} className="row" style={{ borderColor: "rgba(255,255,255,0.15)" }}>
                    <span className="num" style={{ color: "rgba(255,255,255,0.4)" }}>{String(i + 1).padStart(2, "0")}</span>
                    <span style={{ color: "white", fontWeight: 500 }}>{k}</span>
                    <span style={{ color: "rgba(255,255,255,0.6)", fontSize: 13 }}>{v}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Integrations */}
      <section style={{ paddingBlock: 100 }}>
        <div className="container" style={{ marginBottom: 48 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24 }}>
            <div>
              <span className="eyebrow">Integrations</span>
              <h2 className="h-large" style={{ marginTop: 16, maxWidth: 700 }}>Plays nicely with your stack.</h2>
            </div>
            <p className="body" style={{ maxWidth: 360 }}>Wire up the services you already pay for, or build your own integration with our SDK.</p>
          </div>
        </div>
        <div className="marquee">
          <div className="marquee-track">{INTEGRATIONS.map(i => <IntegrationChip key={i} name={i} />)}</div>
          <div className="marquee-track" aria-hidden="true">{INTEGRATIONS.map(i => <IntegrationChip key={i + "2"} name={i} />)}</div>
        </div>
      </section>

      {/* Bottom waitlist CTA */}
      <section style={{ background: "var(--bg-sunken)", borderTop: "1px solid var(--line)" }}>
        <div className="container" style={{ textAlign: "center" }}>
          <h2 className="h-large" style={{ maxWidth: 800, margin: "0 auto 16px" }}>Want a seat?</h2>
          <p className="lead" style={{ margin: "0 auto 36px" }}>Join the waitlist and we'll be in touch as soon as a slot opens up.</p>
          <button className="btn btn-primary" onClick={() => onNavigate("contact")}>
            Join the waitlist →
          </button>
        </div>
      </section>
    </div>
  );
}

function FeatureGrid({ features }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20 }} className="feature-cards">
      {features.map((f, i) => (
        <div key={f.id} className="card feat-card" style={{ display: "flex", flexDirection: "column", gap: 14, padding: 30 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <span style={{
              fontSize: 18,
              fontFamily: "var(--font-mono)",
              color: "var(--accent-ink)",
              background: "var(--accent)",
              width: 40, height: 40,
              borderRadius: 10,
              display: "grid", placeItems: "center",
              fontWeight: 500, flexShrink: 0,
            }}>{f.icon}</span>
            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 500, letterSpacing: "-0.02em", flex: 1 }}>{f.name}</h3>
            <span className="mono" style={{ color: "var(--fg-faint)", fontSize: 10 }}>{String(i + 1).padStart(2, "0")}</span>
          </div>
          <p style={{ color: "var(--fg)", fontSize: 15.5, lineHeight: 1.55, fontWeight: 450 }}>{f.desc}</p>
          <div style={{ height: 1, background: "var(--line)", margin: "2px 0" }}></div>
          <dl className="feat-sub">
            {f.sub?.map(([h, p]) => (
              <div key={h} className="feat-sub-item">
                <dt>
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" style={{ color: "var(--accent)", flexShrink: 0, marginTop: 3 }}><path d="M5 13l4 4L19 7"/></svg>
                  <span>{h}</span>
                </dt>
                <dd>{p}</dd>
              </div>
            ))}
          </dl>
          {f.docs && (
            <a href={`#/docs/${f.docs}`} className="btn-link" style={{ marginTop: "auto", alignSelf: "flex-start", fontSize: 13, paddingTop: 6 }}>
              Learn about {f.name} <span className="arrow">→</span>
            </a>
          )}
        </div>
      ))}
    </div>
  );
}

function IntegrationChip({ name }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 12, padding: "12px 20px", border: "1px solid var(--line)", borderRadius: 12, background: "var(--bg-elev)", flexShrink: 0 }}>
      <div style={{ width: 28, height: 28, borderRadius: 6, background: "var(--bg-sunken)", display: "grid", placeItems: "center", fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, color: "var(--fg-muted)" }}>{name.charAt(0)}</div>
      <span style={{ fontWeight: 500, fontSize: 14 }}>{name}</span>
    </div>
  );
}

const _pulseStyle = document.createElement("style");
_pulseStyle.innerHTML = `@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px var(--accent-soft); } 50% { box-shadow: 0 0 0 8px transparent; } }`;
document.head.appendChild(_pulseStyle);

Object.assign(window, { PlatformPage });
