"use client";

import { Shield, Settings } from "lucide-react";

export default function SecurityPage() {
  return (
    <div
      style={{
        padding: "32px 48px",
        fontFamily: '"Outfit", "Inter", sans-serif',
        color: "#18181b",
        maxWidth: 900,
      }}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-start",
          marginBottom: 24,
        }}
      >
        <div>
          <h1
            style={{ fontSize: "1.5rem", fontWeight: 600, margin: "0 0 4px 0" }}
          >
            Security
          </h1>
          <p style={{ fontSize: "0.9rem", color: "#71717a", margin: 0 }}>
            Manage your permissions and security rules.{" "}
            <a
              href="#"
              style={{ color: "#18181b", textDecoration: "underline" }}
            >
              Learn more
            </a>
          </p>
        </div>
        <button
          style={{
            width: 36,
            height: 36,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            background: "#fff",
            border: "1px solid #e4e4e7",
            borderRadius: 8,
            cursor: "pointer",
          }}
        >
          <Settings size={16} color="#18181b" />
        </button>
      </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,
          }}
        >
          <Shield size={24} color="#18181b" />
        </div>
        <h2
          style={{ fontSize: "1.25rem", fontWeight: 600, margin: "0 0 12px 0" }}
        >
          Check the security of your app
        </h2>
        <p
          style={{
            fontSize: "0.95rem",
            color: "#71717a",
            textAlign: "center",
            maxWidth: 460,
            margin: "0 0 24px 0",
            lineHeight: 1.5,
          }}
        >
          Review your configuration, identify potential risks, and learn how to
          strengthen your app's protection
        </p>
        <button
          style={{
            background: "#18181b",
            color: "#fff",
            border: "none",
            borderRadius: 8,
            padding: "10px 24px",
            fontSize: "0.9rem",
            fontWeight: 600,
            cursor: "pointer",
          }}
        >
          Check Security
        </button>
      </div>
    </div>
  );
}