"use client";

import { ListFilter } from "lucide-react";

export default function SeoPage() {
  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" }}
          >
            SEO & GEO
          </h1>
          <p style={{ fontSize: "0.9rem", color: "#71717a", margin: 0 }}>
            Improve how your app appears in search results and AI answers.
          </p>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span
            style={{ fontSize: "0.9rem", color: "#18181b", fontWeight: 500 }}
          >
            Enable SEO for this app
          </span>
          <div
            style={{
              width: 44,
              height: 24,
              background: "#18181b",
              borderRadius: 12,
              position: "relative",
              cursor: "pointer",
            }}
          >
            <div
              style={{
                width: 20,
                height: 20,
                background: "#fff",
                borderRadius: "50%",
                position: "absolute",
                right: 2,
                top: 2,
              }}
            ></div>
          </div>
        </div>
      </div>

      <div
        style={{
          display: "flex",
          gap: 24,
          marginBottom: 24,
          borderBottom: "1px solid #e4e4e7",
        }}
      >
        <button
          style={{
            background: "none",
            border: "none",
            borderBottom: "2px solid #18181b",
            padding: "8px 0",
            fontSize: "0.9rem",
            fontWeight: 500,
            color: "#18181b",
            cursor: "pointer",
          }}
        >
          Overview
        </button>
        <button
          style={{
            background: "none",
            border: "none",
            padding: "8px 0",
            fontSize: "0.9rem",
            fontWeight: 500,
            color: "#71717a",
            cursor: "pointer",
          }}
        >
          Meta tags
        </button>
        <button
          style={{
            background: "none",
            border: "none",
            padding: "8px 0",
            fontSize: "0.9rem",
            fontWeight: 500,
            color: "#71717a",
            cursor: "pointer",
          }}
        >
          Advanced Settings
        </button>
      </div>

      <div
        style={{
          background: "#fff",
          border: "1px solid #e4e4e7",
          borderRadius: 12,
          padding: "48px 32px",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          marginBottom: 32,
        }}
      >
        <div
          style={{
            width: 40,
            height: 40,
            background: "#fafafa",
            border: "1px solid #e4e4e7",
            borderRadius: 8,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            marginBottom: 16,
          }}
        >
          <ListFilter size={18} color="#18181b" />
        </div>
        <h2
          style={{ fontSize: "1.1rem", fontWeight: 600, margin: "0 0 8px 0" }}
        >
          Run an SEO & GEO scan
        </h2>
        <p
          style={{
            fontSize: "0.9rem",
            color: "#71717a",
            textAlign: "center",
            maxWidth: 400,
            margin: "0 0 24px 0",
          }}
        >
          Scan your app for SEO basics and GEO details. Get a prioritized
          checklist to fix issues in minutes.
        </p>
        <button
          style={{
            background: "#18181b",
            color: "#fff",
            border: "none",
            borderRadius: 8,
            padding: "10px 24px",
            fontSize: "0.9rem",
            fontWeight: 600,
            cursor: "pointer",
          }}
        >
          Run Scan
        </button>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        <div
          style={{
            background: "#fff",
            border: "1px solid #e4e4e7",
            borderRadius: 12,
            padding: "20px 24px",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <div>
            <div
              style={{ fontSize: "0.95rem", fontWeight: 600, marginBottom: 4 }}
            >
              AI Assistant Discovery
            </div>
            <div style={{ fontSize: "0.85rem", color: "#71717a" }}>
              Help AI search engines understand and recommend your app
            </div>
          </div>
          <div
            style={{
              width: 44,
              height: 24,
              background: "#e4e4e7",
              borderRadius: 12,
              position: "relative",
              cursor: "pointer",
            }}
          >
            <div
              style={{
                width: 20,
                height: 20,
                background: "#fff",
                borderRadius: "50%",
                position: "absolute",
                left: 2,
                top: 2,
                boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
              }}
            ></div>
          </div>
        </div>

        <div
          style={{
            background: "#fff",
            border: "1px solid #e4e4e7",
            borderRadius: 12,
            padding: "20px 24px",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <div>
            <div
              style={{ fontSize: "0.95rem", fontWeight: 600, marginBottom: 4 }}
            >
              Generate robots.txt
            </div>
            <div style={{ fontSize: "0.85rem", color: "#71717a" }}>
              Off: serve your deployed public/robots.txt if shipped, otherwise
              return 404.
            </div>
          </div>
          <div
            style={{
              width: 44,
              height: 24,
              background: "#18181b",
              borderRadius: 12,
              position: "relative",
              cursor: "pointer",
            }}
          >
            <div
              style={{
                width: 20,
                height: 20,
                background: "#fff",
                borderRadius: "50%",
                position: "absolute",
                right: 2,
                top: 2,
              }}
            ></div>
          </div>
        </div>

        <div
          style={{
            background: "#fff",
            border: "1px solid #e4e4e7",
            borderRadius: 12,
            padding: "20px 24px",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <div>
            <div
              style={{ fontSize: "0.95rem", fontWeight: 600, marginBottom: 4 }}
            >
              Generate sitemap.xml
            </div>
            <div style={{ fontSize: "0.85rem", color: "#71717a" }}>
              Off: serve your deployed public/sitemap.xml if shipped, otherwise
              return 404.
            </div>
          </div>
          <div
            style={{
              width: 44,
              height: 24,
              background: "#18181b",
              borderRadius: 12,
              position: "relative",
              cursor: "pointer",
            }}
          >
            <div
              style={{
                width: 20,
                height: 20,
                background: "#fff",
                borderRadius: "50%",
                position: "absolute",
                right: 2,
                top: 2,
              }}
            ></div>
          </div>
        </div>

        <div
          style={{
            background: "#fff",
            border: "1px solid #e4e4e7",
            borderRadius: 12,
            padding: "20px 24px",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-start",
          }}
        >
          <div style={{ maxWidth: 600 }}>
            <div
              style={{ fontSize: "0.95rem", fontWeight: 600, marginBottom: 4 }}
            >
              Auto-generate per-page breadcrumbs
            </div>
            <div
              style={{ fontSize: "0.85rem", color: "#71717a", lineHeight: 1.5 }}
            >
              Build a fresh BreadcrumbList for each route instead of using the
              same persisted list site-wide. Turn off if you hand crafted your
              breadcrumb schema and want it served verbatim.
            </div>
          </div>
          <div
            style={{
              width: 44,
              height: 24,
              background: "#18181b",
              borderRadius: 12,
              position: "relative",
              cursor: "pointer",
              flexShrink: 0,
            }}
          >
            <div
              style={{
                width: 20,
                height: 20,
                background: "#fff",
                borderRadius: "50%",
                position: "absolute",
                right: 2,
                top: 2,
              }}
            ></div>
          </div>
        </div>
      </div>
    </div>
  );
}
