---
import Base from "../layouts/Base.astro";
import CtaBand from "../components/CtaBand.astro";

const activePlatforms = [
  {
    name: "Instagram",
    status: "Active",
    postTypes: "Reels, Carousels, Single Photos, Stories",
    features: "Direct publishing, client tagging, custom caption per network, comment and DM triage inbox.",
    notes: "Requires an Instagram Business or Creator account connected through a Meta Page.",
  },
  {
    name: "Facebook",
    status: "Active",
    postTypes: "Page posts, Video Reels, Photo albums, Links",
    features: "Scheduled Page updates, targeted audience filtering, inbox message responses with human approval.",
    notes: "Direct connection via Meta Graph API. Admin permission on the client's Facebook Page is required.",
  },
  {
    name: "TikTok",
    status: "Active",
    postTypes: "Vertical Video (Direct Post), Photo Carousel posts",
    features: "Direct posting via TikTok Content Posting API, privacy levels (Public, Friends, Self-only), Duet, Stitch, and comment toggles.",
    notes: "Quorla displays TikTok's commercial music usage confirmations and branded content disclosure toggles prior to approval.",
  },
  {
    name: "YouTube",
    status: "Active",
    postTypes: "YouTube Shorts, Standard Videos",
    features: "Title formatting, detailed description, tag keywords, privacy status (Public, Unlisted, Private).",
    notes: "Connected via Google OAuth 2.0. Complies fully with Google API Services User Data Policy.",
  },
  {
    name: "Google Business Profile",
    status: "Active",
    postTypes: "Business updates, Offer posts, Event announcements",
    features: "Local store visibility, Call-to-action buttons (Call Now, Learn More, Order Online), photo uploads.",
    notes: "Connects to verified local Google Business locations to boost local SEO and client search prominence.",
  },
];

const upcomingPlatforms = [
  {
    name: "LinkedIn",
    stage: "Awaiting Platform Approval",
    types: "Company Page posts, Personal Profile articles, PDF carousels",
    status: "Built in Quorla engine. Currently in official platform partner verification.",
  },
  {
    name: "Pinterest",
    stage: "Awaiting Platform Approval",
    types: "Standard Pins, Video Pins, Board destination routing",
    status: "Built in Quorla engine. Undergoing partner developer review.",
  },
  {
    name: "Threads",
    stage: "Awaiting Platform Approval",
    types: "Text threads, Single image, Video, Link sharing",
    status: "Integrated with Meta Threads API; scheduled for rollout upon final app approval.",
  },
  {
    name: "Reddit",
    stage: "Awaiting Platform Approval",
    types: "Subreddit community posts, Link shares, Image submissions",
    status: "Built in Quorla engine with subreddit flair management; awaiting public API rollout.",
  },
];
---

<Base
  title="Supported Platforms · Quorla Social Media Management"
  description="See what platforms Quorla supports: Instagram, Facebook, TikTok, YouTube, Google Business Profile, and upcoming networks with complete capability breakdown."
>
  <section class="page-hero">
    <div class="wrap">
      <div class="page-hero-inner">
        <span class="eyebrow">Direct Network Integrations</span>
        <h1>Connect the platforms your clients actually rely on</h1>
        <p class="lead">
          Every social network operates under its own guidelines, media aspect ratios, and rate limits. Quorla manages platform peculiarities so your agency posts safely without API warnings or policy strikes.
        </p>
      </div>
    </div>
  </section>

  <!-- Connected Platforms Table -->
  <section class="block">
    <div class="wrap">
      <div class="head">
        <span class="eyebrow">Available Today</span>
        <h2>Connected platforms & capabilities</h2>
        <p>Every account is connected once via official OAuth authentication. Your team never manages or handles client passwords.</p>
      </div>

      <div class="table-wrap">
        <table class="data-table">
          <thead>
            <tr>
              <th style="width: 22%">Platform</th>
              <th style="width: 28%">Supported Post Formats</th>
              <th style="width: 28%">Agency Features</th>
              <th style="width: 22%">Technical & Policy Notes</th>
            </tr>
          </thead>
          <tbody>
            {activePlatforms.map((p) => (
              <tr>
                <td>
                  <strong>{p.name}</strong>
                  <div style="margin-top: 4px;">
                    <span class="badge badge-success">{p.status}</span>
                  </div>
                </td>
                <td>{p.postTypes}</td>
                <td>{p.features}</td>
                <td><small style="color: var(--muted); line-height: 1.4; display: block;">{p.notes}</small></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  </section>

  <!-- Deep Dive: TikTok Compliance and Direct Post -->
  <section class="block alt" id="tiktok-compliance">
    <div class="wrap">
      <div class="tiktok-compliance-card">
        <div class="compliance-badge">Specialized Integration</div>
        <h2>TikTok Content Posting & Creator Privacy Controls</h2>
        <p class="lead-note">
          Quorla integrates with the official TikTok Content Posting API. We give marketing agencies granular control while maintaining strict adherence to TikTok's community guidelines and developer terms.
        </p>

        <div class="grid3" style="margin-top: 24px;">
          <div class="card">
            <h3>Audience & Privacy Settings</h3>
            <p>Select who can view the video: Public, Friends-only, or Self-only (private draft verification). No surprise public releases.</p>
          </div>
          <div class="card">
            <h3>Interactivity Flags</h3>
            <p>Explicitly enable or disable Comments, Duets, and Stitches on a per-video basis during the pre-approval review.</p>
          </div>
          <div class="card">
            <h3>Music & Branded Content Terms</h3>
            <p>Mandatory confirmation of TikTok's Commercial Music Usage Confirmation and Branded Content declaration prior to queuing.</p>
          </div>
        </div>

        <div class="notice-bar">
          <strong>Direct Post Guarantee:</strong> Quorla never adds promotional watermarks, vendor overlays, or unauthorized metadata to client videos. Content appears exactly as created by your team.
        </div>
      </div>
    </div>
  </section>

  <!-- Platforms Coming Soon -->
  <section class="block" id="coming-soon">
    <div class="wrap">
      <div class="head">
        <span class="eyebrow">In Verification Pipeline</span>
        <h2>Coming soon: New platform expansions</h2>
        <p>
          These networks are fully built within the Quorla publishing engine and are undergoing platform approval with developer review teams before general release.
        </p>
      </div>

      <div class="grid2">
        {upcomingPlatforms.map((up) => (
          <div class="card">
            <div class="up-header">
              <h3 style="margin: 0;">{up.name}</h3>
              <span class="badge badge-coral">{up.stage}</span>
            </div>
            <p style="margin: 12px 0 6px;"><strong>Target formats:</strong> {up.types}</p>
            <p style="color: var(--muted); font-size: 14px;">{up.status}</p>
          </div>
        ))}
      </div>
    </div>
  </section>

  <CtaBand
    title="Need a custom platform setup for your agency accounts?"
    lead="Talk with our technical team about supported client account limits, self-hosted deployment, or specific network requirements."
  />
</Base>

<style>
  .tiktok-compliance-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 36px 40px;
    box-shadow: var(--shadow-sm);
  }

  .compliance-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--coral-deep);
    margin-bottom: 8px;
  }

  .tiktok-compliance-card h2 {
    font-size: clamp(24px, 3vw, 32px);
    color: var(--navy);
    margin-bottom: 12px;
  }

  .lead-note {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.6;
    max-width: 780px;
    margin: 0;
  }

  .notice-bar {
    margin-top: 28px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-left: 4px solid var(--navy);
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--ink);
  }

  .up-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
  }
</style>