"use client";

export default function AutomationsPage() {
  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" }}
        >
          Automations
        </h1>
        <p style={{ fontSize: "0.9rem", color: "#71717a", margin: 0 }}>
          Build and manage automations in your app.
        </p>
      </div>

      <div
        style={{
          background: "#fff",
          border: "1px solid #e4e4e7",
          borderRadius: 12,
          overflow: "hidden",
        }}
      >
        <div
          style={{
            padding: "16px 24px",
            borderBottom: "1px solid #e4e4e7",
            display: "flex",
            gap: 16,
          }}
        >
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ fontSize: "0.95rem", fontWeight: 600 }}>
              Automations
            </span>
            <span
              style={{
                fontSize: "0.75rem",
                fontWeight: 600,
                color: "#f97316",
                border: "1px solid #ffedd5",
                background: "#fff7ed",
                padding: "2px 6px",
                borderRadius: 4,
              }}
            >
              Builder+
            </span>
          </div>
        </div>

        <div
          style={{
            padding: "80px 32px",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <h2
            style={{
              fontSize: "1.1rem",
              fontWeight: 600,
              margin: "0 0 12px 0",
            }}
          >
            Unlock automations
          </h2>
          <p
            style={{
              fontSize: "0.95rem",
              color: "#71717a",
              textAlign: "center",
              maxWidth: 460,
              margin: "0 0 24px 0",
              lineHeight: 1.5,
            }}
          >
            To run automations in your app, you need backend functions enabled.
            Upgrade to enable backend functions and start using automations.
          </p>
          <button
            style={{
              background: "#f97316",
              color: "#fff",
              border: "none",
              borderRadius: 8,
              padding: "10px 24px",
              fontSize: "0.9rem",
              fontWeight: 600,
              cursor: "pointer",
            }}
          >
            View plans
          </button>
        </div>
      </div>
    </div>
  );
}