// ============ OP-EDS =================
const OPEDS = [
  {
    cat: 'POLITICS',
    title: 'Alabama didn\'t ask D.C. for permission.',
    dek: 'Why state sovereignty isn\'t a slogan — it\'s a plan.',
    author: 'Amie Beth Shaver',
    date: 'APR 16, 2026',
    read: '6 MIN',
  },
  {
    cat: 'CULTURE',
    title: 'The polite lie is still a lie.',
    dek: 'On saying the quiet part out loud, and why the kids are watching.',
    author: 'Allison Sinclair',
    date: 'APR 14, 2026',
    read: '4 MIN',
  },
  {
    cat: 'WORLDVIEW',
    title: 'Grace is not weakness.',
    dek: 'A conservative case for showing up with open hands, anyway.',
    author: 'Amie Beth Shaver',
    date: 'APR 10, 2026',
    read: '7 MIN',
  },
  {
    cat: 'LOCAL',
    title: 'Your school board is the most important election you\'re not voting in.',
    dek: 'Four takeaways from a year on the road with LOCAL Alabama.',
    author: 'Allison Sinclair',
    date: 'APR 7, 2026',
    read: '5 MIN',
  },
];

const OpEds = () => (
  <section className="opeds" id="opeds">
    <div className="section-head">
      <div className="section-head-l">
        <span className="section-num">03</span>
        <span className="section-kicker">THE WRITTEN WORD</span>
      </div>
      <h2 className="section-title">Op-Eds &amp; Columns <span className="title-arrow" /></h2>
      <div className="section-head-r">Opinions, receipts included.</div>
    </div>

    <div className="opeds-grid">
      <article className="oped oped-lead">
        <div className="oped-cat">{OPEDS[0].cat}</div>
        <h3 className="oped-title">{OPEDS[0].title}</h3>
        <p className="oped-dek">{OPEDS[0].dek}</p>
        <div className="oped-meta">
          <span>{OPEDS[0].author}</span>
          <span className="oped-dot">·</span>
          <span>{OPEDS[0].date}</span>
          <span className="oped-dot">·</span>
          <span>{OPEDS[0].read}</span>
        </div>
        <div className="oped-img" data-label="LEAD PHOTO" />
      </article>

      <div className="oped-list">
        {OPEDS.slice(1).map((o) => (
          <article className="oped oped-row" key={o.title}>
            <div className="oped-row-meta">
              <span className="oped-cat">{o.cat}</span>
              <span>{o.date}</span>
            </div>
            <h3 className="oped-title oped-title-sm">{o.title}</h3>
            <p className="oped-dek">{o.dek}</p>
            <div className="oped-meta oped-meta-sm">
              <span>{o.author}</span>
              <span className="oped-dot">·</span>
              <span>{o.read}</span>
              <span className="oped-arrow"><Icon.Arrow size={12} /></span>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

// ============ NEWSLETTER =================
const Newsletter = () => {
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);
  return (
    <section className="news" id="newsletter">
      <div className="news-inner">
        <div className="news-left">
          <div className="news-kicker">
            <Icon.Dot size={6} /> THE RIGHTSIDE DISPATCH
          </div>
          <h2 className="news-title">
            The best part of<br />
            <em>your Tuesday.</em>
          </h2>
          <p className="news-dek">
            Subscribe to The Rightside weekly email where Allison &amp; Amie Beth bring you
            the story that mattered, the one everyone missed, and the one we just couldn't let go.
          </p>
        </div>
        <form
          className="news-form"
          onSubmit={(e) => {
            e.preventDefault();
            if (email) setDone(true);
          }}
        >
          {done ? (
            <div className="news-done">
              <div className="news-done-mark">✓</div>
              <div>
                <strong>You're in.</strong>
                <div>First issue hits your inbox Tuesday morning.</div>
              </div>
            </div>
          ) : (
            <>
              <label className="news-label">YOUR EMAIL</label>
              <div className="news-row">
                <input
                  type="email"
                  placeholder="first.last@example.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                />
                <button type="submit">
                  SUBSCRIBE <Icon.Arrow size={14} />
                </button>
              </div>
              <div className="news-fine">
                By subscribing you agree to receive weekly emails. We keep your address to ourselves.
              </div>
            </>
          )}
        </form>
      </div>
    </section>
  );
};

// ============ ADVERTISE =================
const Advertise = () => (
  <section className="advertise-section" id="advertise">
    <div className="advertise-cta">
      <div>
        <div className="advertise-kicker">FOR BRANDS</div>
        <h3 className="advertise-title">
          360,000+ downloads. Four channels. Alabama's most loyal audiences.
        </h3>
      </div>
      <a className="btn btn-primary">
        BECOME A SPONSOR <Icon.Arrow size={14} />
      </a>
    </div>
  </section>
);

const Socials = () => {
  const items = [
    { icon: <Icon.YouTube size={22} />, name: 'YOUTUBE', handle: '@therightsidemedia', stat: 'Watch live', href: 'https://www.youtube.com/@therightsidemedia' },
    { icon: <Icon.Rumble size={22} />, name: 'RUMBLE', handle: '@RightsideRadio', stat: 'Replays', href: 'https://rumble.com/user/RightsideRadio' },
    { icon: <Icon.X size={20} />, name: 'X / TWITTER', handle: '@Rightside_Media', stat: 'Daily clips', href: 'https://x.com/Rightside_Media' },
    { icon: <Icon.Facebook size={22} />, name: 'FACEBOOK', handle: 'Rightside.Media.AL', stat: 'Live simulcast', href: 'https://www.facebook.com/Rightside.Media.AL/' },
    { icon: <Icon.Instagram size={22} />, name: 'INSTAGRAM', handle: '@rightside_media', stat: 'BTS + reels', href: 'https://www.instagram.com/rightside_media/' },
    { icon: <Icon.Apple size={22} />, name: 'GET THE APP', handle: 'The Rightside', stat: 'iOS', href: 'https://apps.apple.com/us/app/rightside-media/id6762462391' },
  ];
  return (
    <section className="socials" id="contact">
      <div className="section-head">
        <div className="section-head-l">
          <span className="section-num">04</span>
          <span className="section-kicker">FOLLOW ALONG</span>
        </div>
        <h2 className="section-title">Find us everywhere. <span className="title-arrow" /></h2>
        <div className="section-head-r">Clips, highlights, and the occasional shenanigan.</div>
      </div>

      <div className="socials-grid">
        {items.map((s) => (
          <a className="social" key={s.name} href={s.href || '#'} target={s.href ? '_blank' : undefined} rel="noopener">
            <div className="social-icon">{s.icon}</div>
            <div className="social-body">
              <div className="social-name">{s.name}</div>
              <div className="social-handle">{s.handle}</div>
              <div className="social-stat">{s.stat}</div>
            </div>
            <Icon.ArrowUpRight size={14} />
          </a>
        ))}
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="footer-inner">
      <div className="footer-logo">
        <RightsideLogo size={0.6} showTagline />
      </div>
      <div className="footer-cols">
        <div>
          <div className="footer-col-t">THE SHOW</div>
          <a href="https://www.youtube.com/@therightsidemedia" target="_blank" rel="noopener">Watch Live</a>
          <a href="#hosts">Hosts</a>
          <a>Get the App</a>
        </div>
        <div>
          <div className="footer-col-t">WRITTEN</div>
          <a href="#opeds">Op-Eds</a><a href="#newsletter">Newsletter</a>
        </div>
        <div>
          <div className="footer-col-t">COMPANY</div>
          <a>About</a><a href="#advertise">Advertise</a><a>Press</a>
        </div>
        <div>
          <div className="footer-col-t">CONTACT</div>
          <a>booking@rightside.media</a><a>press@rightside.media</a><a>833.687.4448</a>
        </div>
      </div>
    </div>
    <div className="footer-bar">
      <div>© {new Date().getFullYear()} RIGHTSIDE MEDIA · BIRMINGHAM, ALABAMA</div>
      <div className="footer-tag">&ldquo;The right place. The right time. The Rightside.&rdquo;</div>
      <div>PRESENTED BY YELLOWHAMMER NEWS</div>
    </div>
    <div className="footer-big" aria-hidden>RIGHTSIDE</div>
  </footer>
);

window.OpEds = OpEds;
window.Newsletter = Newsletter;
window.Advertise = Advertise;
window.Socials = Socials;
window.Footer = Footer;