/* eslint-disable */
// Landing screen — hero + features grid + countdown + sign-in section

const FEATURE_TILES = [
  { emoji: "📋", title: "Task Board",      desc: "Track shared tasks like groceries, home maintenance, and packing lists." },
  { emoji: "🎁", title: "Gift Registry",   desc: "List gift ideas for birthdays and holidays to avoid duplicate purchases." },
  { emoji: "🍽️", title: "Meal Planner",   desc: "Plan weekly meals and auto-generate grocery lists." },
  { emoji: "📸", title: "Memory Wall",     desc: "Share family photos, quotes, and milestone memories." },
  { emoji: "💰", title: "Budget Tracker",  desc: "Monitor shared expenses and subscription renewal dates." },
  { emoji: "🔒", title: "Document Safe",   desc: "Store references to appliance manuals and important documents." },
];

const LandingScreen = ({ onSignIn, onSignInGoogle, onSignInMicrosoft, onSignInEmail, onRegister }) => {
  const [authTab, setAuthTab] = React.useState("signin");
  const handleGoogle = onSignInGoogle || onSignIn;
  const handleMicrosoft = onSignInMicrosoft || onSignIn;

  return (
    <div className="min-h-screen bg-white dark:bg-gray-900">
      {/* Hero */}
      <section className="relative h-96 bg-gradient-to-br from-blue-500 to-indigo-600 dark:from-blue-900 dark:to-indigo-900 overflow-hidden flex items-center justify-center">
        <div className="absolute inset-0 opacity-10 pointer-events-none">
          <div className="absolute top-0 left-0 w-96 h-96 bg-white rounded-full -translate-x-1/2 -translate-y-1/2"></div>
          <div className="absolute bottom-0 right-0 w-96 h-96 bg-white rounded-full translate-x-1/2 translate-y-1/2"></div>
        </div>
        <div className="relative text-center text-white px-6 animate-fade-in">
          <h1 className="text-5xl md:text-6xl font-bold mb-4 tracking-tight">The Jagdev Hub</h1>
          <p className="text-xl md:text-2xl font-light">A private dashboard for our family</p>
        </div>
      </section>

      {/* Features grid */}
      <section className="py-16 px-6 max-w-6xl mx-auto">
        <h2 className="text-3xl font-bold text-center mb-12 text-gray-900 dark:text-white">What You Can Do</h2>
        <div className="grid md:grid-cols-3 gap-6">
          {FEATURE_TILES.map((tile) => (
            <Card key={tile.title}>
              <div className="text-4xl mb-4">{tile.emoji}</div>
              <h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-white">{tile.title}</h3>
              <p className="text-gray-600 dark:text-gray-300">{tile.desc}</p>
            </Card>
          ))}
        </div>
      </section>

      {/* Countdown */}
      <section className="py-8 px-6 max-w-2xl mx-auto">
        {(() => { const s = Storage.get('familyhub_settings') || {}; const cl = s.countdownLabel || "Next Family Vacation"; const cd = s.countdownDate ? Math.max(0, Math.ceil((new Date(s.countdownDate) - new Date()) / 86400000)) : null; return <CountdownTimer label={cl} daysAway={cd} />; })()}
      </section>

      {/* Sign-in */}
      <section className="py-16 px-6 bg-gray-100 dark:bg-gray-800">
        <div className="max-w-md mx-auto">
          <h3 className="text-2xl font-bold mb-2 text-center text-gray-900 dark:text-white">Sign In</h3>
          <p className="text-sm text-gray-500 dark:text-gray-400 text-center mb-8">
            Sign in to access the family hub. New accounts require admin approval.
          </p>

          <div className="space-y-3 mb-6">
            <button
              onClick={handleGoogle}
              className="w-full flex items-center justify-center gap-3 px-6 py-3 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors font-medium text-gray-700 dark:text-gray-200"
            >
              <svg className="w-5 h-5" viewBox="0 0 24 24">
                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/>
                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
              </svg>
              Sign in with Google
            </button>
            <button
              onClick={handleMicrosoft}
              className="w-full flex items-center justify-center gap-3 px-6 py-3 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors font-medium text-gray-700 dark:text-gray-200"
            >
              <svg className="w-5 h-5" viewBox="0 0 21 21">
                <rect x="1" y="1" width="9" height="9" fill="#f25022"/>
                <rect x="11" y="1" width="9" height="9" fill="#7fba00"/>
                <rect x="1" y="11" width="9" height="9" fill="#00a4ef"/>
                <rect x="11" y="11" width="9" height="9" fill="#ffb900"/>
              </svg>
              Sign in with Microsoft
            </button>
          </div>

          <div className="flex items-center gap-4 mb-6">
            <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
            <span className="text-sm text-gray-500 dark:text-gray-400">or use email</span>
            <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
          </div>

          <div className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow-sm">
            <div className="flex rounded-lg bg-gray-100 dark:bg-gray-800 p-1 mb-6">
              <button
                onClick={() => setAuthTab("signin")}
                className={
                  "flex-1 py-2 text-sm font-medium rounded-md transition-colors " +
                  (authTab === "signin"
                    ? "bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm"
                    : "text-gray-500 dark:text-gray-400")
                }
              >
                Sign In
              </button>
              <button
                onClick={() => setAuthTab("register")}
                className={
                  "flex-1 py-2 text-sm font-medium rounded-md transition-colors " +
                  (authTab === "register"
                    ? "bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm"
                    : "text-gray-500 dark:text-gray-400")
                }
              >
                Create Account
              </button>
            </div>

            {authTab === "signin" ? (
              <form onSubmit={(e) => { e.preventDefault(); const f = e.target; const email = f.querySelector('[type=email]').value; const pass = f.querySelector('[type=password]').value; if (onSignInEmail) onSignInEmail(email, pass); else (onSignIn || handleGoogle)(); }} className="space-y-4">
                <div>
                  <Label>Email Address</Label>
                  <Input type="email" placeholder="your@email.com" defaultValue="parwin@example.com" />
                </div>
                <div>
                  <Label>Password</Label>
                  <Input type="password" placeholder="Enter password" defaultValue="" />
                </div>
                <BtnPrimary type="submit" className="w-full">Sign In</BtnPrimary>
              </form>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); const f = e.target; const inputs = f.querySelectorAll('input'); const name = inputs[0].value; const email = inputs[1].value; const pass = inputs[2].value; if (onRegister) onRegister(name, email, pass); else (onSignIn || handleGoogle)(); }} className="space-y-4">
                <div><Label required>Full Name</Label><Input placeholder="Your name" /></div>
                <div><Label required>Email Address</Label><Input type="email" placeholder="your@email.com" /></div>
                <div><Label required>Password</Label><Input type="password" placeholder="At least 6 characters" /></div>
                <BtnPrimary type="submit" className="w-full">Create Account</BtnPrimary>
                <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
                  New accounts require approval from a site admin before access is granted.
                </p>
              </form>
            )}
          </div>
        </div>
      </section>

      <footer className="border-t border-gray-200 dark:border-gray-700 py-8 px-6 bg-white dark:bg-gray-900">
        <div className="max-w-6xl mx-auto text-center text-gray-600 dark:text-gray-400">
          <p className="mb-2">This is a private dashboard. Access is granted to approved family members only.</p>
          <p className="text-sm">New accounts require admin approval before access is granted.</p>
        </div>
      </footer>
    </div>
  );
};

window.LandingScreen = LandingScreen;