import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

export default function HomePage() {
  const [sections, setSections] = useState([
    { title: "Welcome", content: "This is keepingkidssafe.info" },
    { title: "Mission", content: "Our mission is to provide clear resources and guidance for child safety." },
  ]);

  const [newTitle, setNewTitle] = useState("");
  const [newContent, setNewContent] = useState("");

  const addSection = () => {
    if (!newTitle || !newContent) return;
    setSections([...sections, { title: newTitle, content: newContent }]);
    setNewTitle("");
    setNewContent("");
  };

  return (
    <div className="min-h-screen bg-gray-100 p-6">
      <h1 className="text-3xl font-bold text-center mb-6">Keeping Kids Safe</h1>
      <div className="grid md:grid-cols-2 gap-6">
        {sections.map((section, idx) => (
          <Card key={idx} className="shadow-lg rounded-2xl">
            <CardContent>
              <h2 className="text-xl font-semibold mb-2">{section.title}</h2>
              <p className="text-gray-700">{section.content}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="mt-10 p-4 bg-white rounded-2xl shadow-md">
        <h2 className="text-lg font-bold mb-3">Add New Section</h2>
        <Input
          placeholder="Section Title"
          value={newTitle}
          onChange={(e) => setNewTitle(e.target.value)}
          className="mb-2"
        />
        <Input
          placeholder="Section Content"
          value={newContent}
          onChange={(e) => setNewContent(e.target.value)}
          className="mb-2"
        />
        <Button onClick={addSection}>Add Section</Button>
      </div>

      <div className="mt-10 p-4 bg-white rounded-2xl shadow-md max-w-md mx-auto">
        <h2 className="text-lg font-bold mb-3">Subscribe to our Newsletter</h2>
        <div id="mc_embed_signup">
          <form
            action="https://YOUR-USERNAME.usX.list-manage.com/subscribe/post?u=XXXX&id=XXXX"
            method="post"
            target="_blank"
            noValidate
            className="flex flex-col"
          >
            <Input
              type="email"
              name="EMAIL"
              placeholder="Enter your email"
              required
              className="mb-2"
            />
            <Button type="submit">Subscribe</Button>
          </form>
        </div>
      </div>
    </div>
  );
}