import React, { useRef, useState } from "react";
import { BrowserRouter as Router, Routes, Route, useNavigate } from "react-router-dom";

// --- Assets (replace with your actual image paths) ---
const logo = "/logo.png"; // George logo
const discordIcon = "/discord.png";
const youtubeIcon = "/youtube.png";

// --- Home Page ---
function Home() {
  const offerRef = useRef(null);
  const navigate = useNavigate();

  const scrollToOffer = () => {
    offerRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <div className="bg">
      {/* Header */}
      <div className="header">
        <img src={logo} alt="George" className="logo" />
        <button className="join-btn" onClick={() => navigate("/join")}>
          Join George
        </button>
      </div>
      {/* Main Title */}
      <div className="main-title">
        <h1>
          The Best Multi-Channel<br />
          Network For Creators
        </h1>
        <div className="offer-box">
          <p>
            We specialize in helping creators go viral. We offer exclusive support in distributing your content on social media and bringing organic traffic to your page.
          </p>
          <button className="offer-btn" onClick={scrollToOffer}>
            What we offer
          </button>
        </div>
      </div>
      {/* Growth Image */}
      <div className="growth-img">
        {/* Replace with your actual image */}
        <img src="/growth.png" alt="Exponential Growth" />
      </div>
      {/* Why Join Us */}
      <div ref={offerRef} className="why-join">
        <img src={logo} alt="George" className="why-logo" />
        <h2>
          Why <span className="red">Join</span> Us?
        </h2>
        <p className="desc">
          We are a social media network operated by a special team of creators.
        </p>
        <div className="offer-section">
          <div className="offer-card">
            <h3>
              <span className="red">Strategies</span> &<br />
              <span className="red">Benefits</span>
            </h3>
            <p>
              Our agency provides comprehensive management services, innovative growth strategies, and professional support, enabling them to focus on what they do best—improving their content.
            </p>
          </div>
          <div className="offer-card">
            <h3>
              Content <span className="red">Promotion</span>
            </h3>
            <p>
              We specialize in promoting creators just like you—whether you're on YouTube, TikTok, Instagram, or any other platform. We’ll help you get real views, build an engaged audience, and grow your brand. From targeted campaigns to viral strategies.
            </p>
          </div>
          <div className="offer-card">
            <h3>
              Tools <span className="amp">&</span> <span className="red">Services</span>
            </h3>
            <p>
              Our goal is to power your growth. Our agency offers a full suite of tools and services to assist creators like you to rise faster, and earn more. We provide instant payments and exclusive access to support tools.
            </p>
          </div>
          <div className="offer-card">
            <h3>
              Useful <span className="red">Advice</span>
            </h3>
            <p>
              We offer more than just promotion—we give you the tools, strategies, and opportunities to turn your content into a career. We provide personalized growth tips and tools to boost your channel in search.
            </p>
          </div>
        </div>
      </div>
      {/* Social Media Section */}
      <div className="social-section">
        <h3>Social Media Companies We Operate On.</h3>
        <div className="social-icons">
          <span>Instagram</span>
          <span>TikTok</span>
          <span>
            <a href="https://www.youtube.com/@georgeaffiliate" target="_blank" rel="noopener noreferrer">
              <img src={youtubeIcon} alt="YouTube" className="icon" />
            </a>
          </span>
          <span>facebook.</span>
        </div>
      </div>
      {/* Footer */}
      <footer>
        <div className="footer-icons">
          <a href="https://discord.gg/gPNPS8GpgZ" target="_blank" rel="noopener noreferrer">
            <img src={discordIcon} alt="Discord" className="icon" />
          </a>
          <a href="https://www.youtube.com/@georgeaffiliate" target="_blank" rel="noopener noreferrer">
            <img src={youtubeIcon} alt="YouTube" className="icon" />
          </a>
        </div>
        <div className="copyright">
          2025 All right reserved
        </div>
      </footer>
    </div>
  );
}

// --- Join Page ---
function Join() {
  const [form, setForm] = useState({
    first: "",
    last: "",
    email: "",
    question: "",
  });
  const [touched, setTouched] = useState({});
  const navigate = useNavigate();

  const isValid =
    form.first.trim() &&
    form.last.trim() &&
    /\S+@\S+\.\S+/.test(form.email) &&
    form.question.trim() &&
    form.question.length <= 1000;

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm((f) => ({ ...f, [name]: value }));
  };

  const handleBlur = (e) => {
    setTouched((t) => ({ ...t, [e.target.name]: true }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (isValid) {
      // Here you would send the form data to your backend
      navigate("/thankyou");
    }
  };

  return (
    <div className="bg">
      <div className="header">
        <img src={logo} alt="George" className="logo" />
        <button className="home-btn" onClick={() => navigate("/")}>
          Home Page
        </button>
      </div>
      <div className="join-form-container">
        <form className="join-form" onSubmit={handleSubmit}>
          <img src={logo} alt="George" className="form-logo" />
          <h2>Contact Us</h2>
          <div className="form-row">
            <label>Name</label>
            <div className="name-fields">
              <input
                type="text"
                name="first"
                placeholder="First Name"
                value={form.first}
                onChange={handleChange}
                onBlur={handleBlur}
                maxLength={50}
                required
              />
              <input
                type="text"
                name="last"
                placeholder="Last Name"
                value={form.last}
                onChange={handleChange}
                onBlur={handleBlur}
                maxLength={50}
                required
              />
            </div>
          </div>
          <div className="form-row">
            <label>Email</label>
            <input
              type="email"
              name="email"
              placeholder="example@email.com"
              value={form.email}
              onChange={handleChange}
              onBlur={handleBlur}
              maxLength={100}
              required
            />
          </div>
          <div className="form-row">
            <label>Type a question</label>
            <textarea
              name="question"
              placeholder="I would love to join George for benefits and exclusive perks!"
              value={form.question}
              onChange={handleChange}
              onBlur={handleBlur}
              maxLength={1000}
              required
            />
            <div className="char-count">{form.question.length}/1000</div>
          </div>
          <button className="submit-btn" type="submit" disabled={!isValid}>
            Submit
          </button>
        </form>
      </div>
    </div>
  );
}

// --- Thank You Page ---
function ThankYou() {
  const navigate = useNavigate();
  return (
    <div className="bg">
      <div className="header">
        <img src={logo} alt="George" className="logo" />
        <button className="home-btn" onClick={() => navigate("/")}>
          Home Page
        </button>
      </div>
      <div className="thankyou-container">
        <div className="thankyou-card">
          <div className="checkmark">
            {/* Replace with your checkmark image or SVG */}
            <svg width="80" height="80" viewBox="0 0 80 80">
              <rect width="80" height="80" rx="10" fill="#00FF6A" />
              <polyline
                points="20,45 35,60 60,30"
                fill="none"
                stroke="#fff"
                strokeWidth="8"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </div>
          <h2>Thank You!</h2>
          <p>We received your submission.</p>
        </div>
        <div className="thankyou-note">
          You should receive a response from us in 24 - 48 hours. Please keep an eye out on your email including your spam folder.
        </div>
      </div>
    </div>
  );
}

// --- Main App ---
export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/join" element={<Join />} />
        <Route path="/thankyou" element={<ThankYou />} />
      </Routes>
    </Router>
  );
}
body, html, #root {
  margin: 0;
  padding: 0;
  font-family: 'Arial Rounded MT Bold', Arial, sans-serif;
  background: #fff;
  min-height: 100vh;
}
.bg {
  background: url('/bg-george.png'); /* Your repeating George logo background */
  background-size: 300px;
  min-height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px 0 18px;
}
.logo {
  height: 60px;
}
.join-btn, .home-btn, .offer-btn {
  background: #ff0000;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  padding: 14px 28px;
  font-weight: bold;
  cursor: pointer;
  margin-left: 16px;
  transition: background 0.2s;
}
.join-btn:hover, .home-btn:hover, .offer-btn:hover {
  background: #d90000;
}
.main-title {
  text-align: center;
  margin-top: 24px;
}
.main-title h1 {
  color: #ff0000;
  font-size: 2.2rem;
  margin-bottom: 0.5em;
  font-weight: bold;
  letter-spacing: 1px;
}
.offer-box {
  display: inline-block;
  background: #fff;
  border-radius: 16px;
  padding: 18px 32px;
  margin-top: 12px;
  box-shadow: 0 2px 12px #0001;
}
.growth-img {
  display: flex;
  justify-content: center;
  margin: 32px 0;
}
.growth-img img {
  max-width: 90vw;
  max-height: 260px;
  border-radius: 18px;
  box-shadow: 0 2px 16px #0002;
}
.why-join {
  text-align: center;
  margin: 48px 0 0 0;
}
.why-logo {
  height: 70px;
  margin-bottom: 10px;
}
.why-join h2 {
  font-size: 2.1rem;
  margin: 0.5em 0;
}
.red {
  color: #ff0000;
  font-weight: bold;
}
.amp {
  color: #222;
}
.desc {
  font-size: 1.1rem;
  margin-bottom: 32px;
}
.offer-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  margin: 32px 0;
}
.offer-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px #0001;
  padding: 24px 28px;
  max-width: 340px;
  min-width: 260px;
  text-align: left;
}
.offer-card h3 {
  margin: 0 0 10px 0;
  font-size: 1.3rem;
}
.social-section {
  text-align: center;
  margin: 48px 0 0 0;
}
.social-section h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  font-size: 1.3rem;
  margin-top: 10px;
}
.icon {
  width: 36px;
  height: 36px;
  vertical-align: middle;
  margin: 0 6px;
  cursor: pointer;
  transition: transform 0.2s;
}
.icon:hover {
  transform: scale(1.12);
}
footer {
  margin-top: 48px;
  padding: 24px 0 12px 0;
  background: none;
  text-align: center;
}
.footer-icons {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 8px;
}
.copyright {
  color: #222;
  font-size: 0.95rem;
  opacity: 0.7;
}

/* Join Form */
.join-form-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 80vh;
}
.join-form {
  background: #fff;
  border: 4px solid #ff0000;
  border-radius: 18px;
  padding: 36px 32px 28px 32px;
  margin-top: 32px;
  min-width: 340px;
  max-width: 400px;
  box-shadow: 0 2px 16px #0002;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-logo {
  height: 60px;
  margin-bottom: 10px;
}
.join-form h2 {
  margin: 0 0 18px 0;
  font-size: 1.5rem;
}
.form-row {
  width: 100%;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.form-row label {
  font-weight: bold;
  margin-bottom: 6px;
}
.name-fields {
  display: flex;
  gap: 10px;
  width: 100%;
}
.name-fields input {
  flex: 1;
}
input, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #ff0000;
  border-radius: 8px;
  font-size: 1rem;
  margin-bottom: 2px;
  outline: none;
  transition: border 0.2s;
}
input:focus, textarea:focus {
  border: 2px solid #d90000;
}
textarea {
  min-height: 80px;
  max-height: 160px;
  resize: vertical;
}
.char-count {
  font-size: 0.9rem;
  color: #888;
  align-self: flex-end;
  margin-top: -8px;
  margin-bottom: 2px;
}
.submit-btn {
  background: #ff0000;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1.1rem;
  padding: 12px 0;
  width: 100%;
  font-weight: bold;
  margin-top: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.submit-btn:disabled {
  background: #ffcccc;
  cursor: not-allowed;
}
.submit-btn:not(:disabled):hover {
  background: #d90000;
}

/* Thank You */
.thankyou-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 64px;
}
.thankyou-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px #0001;
  padding: 36px 48px;
  text-align: center;
}
.checkmark {
  margin-bottom: 18px;
}
.thankyou-card h2 {
  font-size: 2rem;
  margin: 0 0 8px 0;
}
.thankyou-card p {
  font-size: 1.1rem;
  margin: 0;
}
.thankyou-note {
  margin-top: 24px;
  font-size: 1rem;
  color: #222;
  background: #fff;
  border-radius: 10px;
  padding: 16px 24px;
  box-shadow: 0 2px 8px #0001;
  max-width: 420px;
  text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
  .offer-section {
    flex-direction: column;
    align-items: center;
  }
  .offer-card {
    max-width: 95vw;
  }
}
@media (max-width: 600px) {
  .main-title h1 {
    font-size: 1.2rem;
  }
  .offer-box {
    padding: 12px 10px;
  }
  .growth-img img {
    max-width: 98vw;
    max-height: 120px;
  }
  .join-form {
    min-width: 90vw;
    padding: 18px 6vw;
  }
  .thankyou-card {
    padding: 18px 6vw;
  }
}