import { Card } from '../components/ui/Card';

export function AboutPage() {
  return (
    <div className="max-w-3xl mx-auto px-4 sm:px-6 py-12">
      <Card padding="lg">
        <h1 className="text-2xl font-bold text-gray-900 mb-4">About Us</h1>
        <div className="prose text-sm text-gray-600 space-y-4">
          <p>Marketplace is a peer-to-peer platform connecting buyers and sellers of second-hand goods. Our mission is to make buying and selling pre-loved items simple, safe, and enjoyable.</p>
          <p>Founded in 2024, we believe in giving items a second life. Whether you're decluttering your home or hunting for a great deal, Marketplace is the place to be.</p>
          <h2 className="text-lg font-semibold text-gray-900 mt-6">Our Values</h2>
          <ul className="list-disc pl-5 space-y-2">
            <li><strong>Trust & Safety</strong> — We verify users and provide secure messaging and payment options.</li>
            <li><strong>Sustainability</strong> — Every item resold is one less in a landfill.</li>
            <li><strong>Community</strong> — We foster a friendly community of buyers and sellers.</li>
          </ul>
        </div>
      </Card>
    </div>
  );
}

export function PrivacyPage() {
  return (
    <div className="max-w-3xl mx-auto px-4 sm:px-6 py-12">
      <Card padding="lg">
        <h1 className="text-2xl font-bold text-gray-900 mb-4">Privacy Policy</h1>
        <div className="prose text-sm text-gray-600 space-y-4">
          <p><em>Last updated: February 2026</em></p>
          <h2 className="text-lg font-semibold text-gray-900 mt-6">1. Information We Collect</h2>
          <p>We collect information you provide directly: name, email, phone number, location, and profile information. We also collect usage data, device information, and cookies.</p>
          <h2 className="text-lg font-semibold text-gray-900 mt-6">2. How We Use Your Information</h2>
          <p>We use your information to provide and improve our services, process transactions, communicate with you, and ensure platform safety.</p>
          <h2 className="text-lg font-semibold text-gray-900 mt-6">3. Information Sharing</h2>
          <p>We do not sell your personal information. We share data only with service providers who help us operate the platform, or when required by law.</p>
          <h2 className="text-lg font-semibold text-gray-900 mt-6">4. Data Security</h2>
          <p>We implement industry-standard security measures to protect your data, including encryption, secure servers, and regular security audits.</p>
          <h2 className="text-lg font-semibold text-gray-900 mt-6">5. Your Rights</h2>
          <p>You can access, update, or delete your personal information at any time through your account settings. You may also contact us to exercise your data rights.</p>
          <h2 className="text-lg font-semibold text-gray-900 mt-6">6. Contact Us</h2>
          <p>For privacy-related inquiries, email us at privacy@marketplace.com.</p>
        </div>
      </Card>
    </div>
  );
}

export function TermsPage() {
  return (
    <div className="max-w-3xl mx-auto px-4 sm:px-6 py-12">
      <Card padding="lg">
        <h1 className="text-2xl font-bold text-gray-900 mb-4">Terms of Service</h1>
        <div className="prose text-sm text-gray-600 space-y-4">
          <p><em>Last updated: February 2026</em></p>
          <h2 className="text-lg font-semibold text-gray-900 mt-6">1. Acceptance of Terms</h2>
          <p>By using Marketplace, you agree to these Terms of Service. If you do not agree, please do not use our platform.</p>
          <h2 className="text-lg font-semibold text-gray-900 mt-6">2. User Accounts</h2>
          <p>You must provide accurate information when creating an account. You are responsible for maintaining the security of your account and password.</p>
          <h2 className="text-lg font-semibold text-gray-900 mt-6">3. Listings & Transactions</h2>
          <p>Sellers are responsible for the accuracy of their listings. All transactions are between buyers and sellers directly. Marketplace facilitates but does not guarantee transactions.</p>
          <h2 className="text-lg font-semibold text-gray-900 mt-6">4. Prohibited Items</h2>
          <p>You may not list illegal items, weapons, drugs, stolen property, or any items that violate local laws or our community guidelines.</p>
          <h2 className="text-lg font-semibold text-gray-900 mt-6">5. User Conduct</h2>
          <p>Users must treat each other with respect. Harassment, fraud, and spam are strictly prohibited and may result in account termination.</p>
          <h2 className="text-lg font-semibold text-gray-900 mt-6">6. Limitation of Liability</h2>
          <p>Marketplace is provided "as is" without warranties. We are not liable for losses arising from transactions between users.</p>
        </div>
      </Card>
    </div>
  );
}

export function HelpPage() {
  return (
    <div className="max-w-3xl mx-auto px-4 sm:px-6 py-12">
      <Card padding="lg">
        <h1 className="text-2xl font-bold text-gray-900 mb-4">Help & Support</h1>
        <div className="prose text-sm text-gray-600 space-y-4">
          <h2 className="text-lg font-semibold text-gray-900 mt-4">Frequently Asked Questions</h2>
          <div className="space-y-4">
            <div>
              <h3 className="font-medium text-gray-900">How do I create a listing?</h3>
              <p>Click "Sell" in the navigation bar, fill in your item details, upload photos, and submit. Your listing will be visible to all users.</p>
            </div>
            <div>
              <h3 className="font-medium text-gray-900">How do I make an offer?</h3>
              <p>Visit a listing page and click "Make Offer". Enter your offer amount and an optional message to the seller.</p>
            </div>
            <div>
              <h3 className="font-medium text-gray-900">How do I message a seller?</h3>
              <p>Click the "Message" button on any listing page to start a conversation with the seller.</p>
            </div>
            <div>
              <h3 className="font-medium text-gray-900">How do I delete my account?</h3>
              <p>Go to Dashboard &gt; Settings &gt; Delete Account. You'll need to confirm with your password.</p>
            </div>
            <div>
              <h3 className="font-medium text-gray-900">How do I report a listing?</h3>
              <p>Click the "Report" button on any listing page. Our team will review the report promptly.</p>
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
}

export function ContactPage() {
  return (
    <div className="max-w-3xl mx-auto px-4 sm:px-6 py-12">
      <Card padding="lg">
        <h1 className="text-2xl font-bold text-gray-900 mb-4">Contact Us</h1>
        <div className="prose text-sm text-gray-600 space-y-4">
          <p>We'd love to hear from you. Whether you have a question, feedback, or need assistance, our team is here to help.</p>
          <div className="bg-gray-50 rounded-xl p-4 space-y-2">
            <p><strong>Email:</strong> support@marketplace.com</p>
            <p><strong>Response Time:</strong> We aim to respond within 24 hours.</p>
          </div>
          <p>For urgent matters related to account security, please include "URGENT" in your email subject line.</p>
        </div>
      </Card>
    </div>
  );
}

export function ReturnsPage() {
  return (
    <div className="max-w-3xl mx-auto px-4 sm:px-6 py-12">
      <Card padding="lg">
        <h1 className="text-2xl font-bold text-gray-900 mb-4">Returns & Conditions</h1>
        <div className="prose text-sm text-gray-600 space-y-4">
          <p>As a peer-to-peer marketplace, return policies are set by individual sellers. However, we have general guidelines to ensure fair transactions.</p>
          <h2 className="text-lg font-semibold text-gray-900 mt-6">Item Conditions</h2>
          <ul className="list-disc pl-5 space-y-2">
            <li><strong>New</strong> — Unused, in original packaging</li>
            <li><strong>Like New</strong> — Barely used, no visible wear</li>
            <li><strong>Gently Used</strong> — Minor signs of use, fully functional</li>
            <li><strong>Used</strong> — Normal wear and tear, fully functional</li>
            <li><strong>Fair</strong> — Visible wear, may have cosmetic issues</li>
          </ul>
          <h2 className="text-lg font-semibold text-gray-900 mt-6">Disputes</h2>
          <p>If an item significantly differs from its description, contact the seller first. If you cannot resolve the issue, reach out to our support team.</p>
        </div>
      </Card>
    </div>
  );
}
