"use client";

import { Share2 } from "lucide-react";

export default function SocialPage() {
  return (
    <div
      style={{
        padding: "32px 48px",
        fontFamily: '"Outfit", "Inter", sans-serif',
        color: "#18181b",
        maxWidth: 900,
      }}
    >
      <div style={{ marginBottom: 24 }}>
        <h1
          style={{ fontSize: "1.5rem", fontWeight: 600, margin: "0 0 4px 0" }}
        >
          Social Content
        </h1>
        <p style={{ fontSize: "0.9rem", color: "#71717a", margin: 0 }}>
          Manage social sharing campaigns and meta tags.
        </p>
      </div>

      <div
        style={{
          background: "#fff",
          border: "1px dashed #e4e4e7",
          borderRadius: 12,
          padding: "80px 32px",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          marginTop: 32,
        }}
      >
        <div
          style={{
            width: 48,
            height: 48,
            background: "#fafafa",
            border: "1px solid #e4e4e7",
            borderRadius: 12,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            marginBottom: 24,
          }}
        >
          <Share2 size={24} color="#18181b" />
        </div>
        <h2
          style={{ fontSize: "1.25rem", fontWeight: 600, margin: "0 0 12px 0" }}
        >
          Social Campaign Manager
        </h2>
        <p
          style={{
            fontSize: "0.95rem",
            color: "#71717a",
            textAlign: "center",
            maxWidth: 460,
            margin: "0 0 24px 0",
            lineHeight: 1.5,
          }}
        >
          Automatically generate and schedule social media content across
          platforms based on your app's pages.
        </p>
        <button
          style={{
            background: "#18181b",
            color: "#fff",
            border: "none",
            borderRadius: 8,
            padding: "10px 24px",
            fontSize: "0.9rem",
            fontWeight: 600,
            cursor: "pointer",
          }}
        >
          Connect Social Accounts
        </button>
      </div>
    </div>
  );
}
