"use client";

import { Diamond } from "lucide-react";

export default function IntegrationsPage() {
  return (
    <div
      style={{
        padding: "32px 48px",
        fontFamily: '"Outfit", "Inter", sans-serif',
        color: "#18181b",
        maxWidth: 900,
        position: "relative",
        height: "calc(100vh - 100px)",
        overflow: "hidden",
      }}
    >
      <div style={{ marginBottom: 24 }}>
        <h1
          style={{ fontSize: "1.5rem", fontWeight: 600, margin: "0 0 4px 0" }}
        >
          Integrations
        </h1>
      </div>

      <div style={{ filter: "blur(4px)", opacity: 0.5, pointerEvents: "none" }}>
        <div style={{ display: "flex", gap: 8, marginBottom: 24 }}>
          <button
            style={{
              background: "#fff",
              border: "1px solid #e4e4e7",
              borderRadius: 8,
              padding: "8px 24px",
              fontSize: "0.85rem",
              fontWeight: 500,
            }}
          >
            My Integrations
          </button>
          <button
            style={{
              background: "#f4f4f5",
              border: "none",
              color: "#71717a",
              borderRadius: 8,
              padding: "8px 24px",
              fontSize: "0.85rem",
              fontWeight: 500,
            }}
          >
            Browse
          </button>
        </div>

        <div
          style={{
            background: "#fff",
            border: "1px solid #e4e4e7",
            borderRadius: 12,
            padding: "24px",
            marginBottom: 32,
          }}
        >
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <div
              style={{
                width: 40,
                height: 40,
                background: "#f4f4f5",
                borderRadius: 8,
              }}
            ></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, marginBottom: 4 }}>Stripe</div>
              <div style={{ fontSize: "0.85rem", color: "#71717a" }}>
                Sell products or subscriptions and get paid online.
              </div>
            </div>
            <button
              style={{
                background: "#fff",
                border: "1px solid #e4e4e7",
                borderRadius: 6,
                padding: "6px 16px",
                fontSize: "0.85rem",
              }}
            >
              Manage
            </button>
          </div>
        </div>

        <h2
          style={{ fontSize: "1.1rem", fontWeight: 600, margin: "0 0 16px 0" }}
        >
          Connectors
        </h2>
        <p style={{ fontSize: "0.9rem", color: "#71717a", marginBottom: 24 }}>
          Connect your app to popular services.
        </p>

        <div
          style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}
        >
          {[1, 2, 3, 4].map((i) => (
            <div
              key={i}
              style={{
                background: "#fff",
                border: "1px solid #e4e4e7",
                borderRadius: 12,
                padding: "24px",
              }}
            >
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 16,
                  marginBottom: 16,
                }}
              >
                <div
                  style={{
                    width: 32,
                    height: 32,
                    background: "#f4f4f5",
                    borderRadius: 8,
                  }}
                ></div>
              </div>
              <div style={{ fontWeight: 600, marginBottom: 4 }}>
                Connector {i}
              </div>
              <div style={{ fontSize: "0.85rem", color: "#71717a" }}>
                Connect with external service for app data.
              </div>
            </div>
          ))}
        </div>
      </div>

      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          background: "rgba(255, 255, 255, 0.3)",
        }}
      >
        <div
          style={{
            background: "#fff",
            border: "1px solid #e4e4e7",
            borderRadius: 16,
            padding: "32px 48px",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            boxShadow: "0 10px 25px rgba(0,0,0,0.05)",
            maxWidth: 440,
          }}
        >
          <div
            style={{
              width: 40,
              height: 40,
              background: "#fff7ed",
              border: "1px solid #ffedd5",
              borderRadius: 10,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              marginBottom: 20,
            }}
          >
            <Diamond size={18} color="#f97316" />
          </div>
          <h2
            style={{
              fontSize: "1.1rem",
              fontWeight: 600,
              margin: "0 0 12px 0",
            }}
          >
            Unlock this feature
          </h2>
          <p
            style={{
              fontSize: "0.95rem",
              color: "#71717a",
              textAlign: "center",
              margin: "0 0 24px 0",
              lineHeight: 1.5,
            }}
          >
            This feature is only available on the Builder plan or higher.
            Upgrade to continue working without limits.
          </p>
          <button
            style={{
              background: "#f97316",
              color: "#fff",
              border: "none",
              borderRadius: 8,
              padding: "10px 24px",
              fontSize: "0.9rem",
              fontWeight: 600,
              cursor: "pointer",
            }}
          >
            Upgrade
          </button>
        </div>
      </div>
    </div>
  );
}