/* global React */

const HOWTO_EDITIONS = [
  { label: "HowTo: Home Edition", href: "https://howtohomeedition.com" },
  { label: "HowTo: Food Edition", href: "https://howtofoodedition.com" },
  { label: "HowTo: Beauty Edition", href: "https://howtobeautyedition.com" },
  { label: "HowTo: Travel Edition", href: "https://howtotraveledition.com" },
  { label: "HowTo: Tech Edition", href: "https://howtotechedition.com" },
  { label: "HowTo: Family Edition", href: "https://howtofamilyedition.com" },
  { label: "HowTo: Finance Edition", href: "https://howtofinanceedition.com" },
  { label: "HowTo: Fashion Edition", href: "https://howtofashionedition.com" },
  { label: "HowTo: Health & Fitness Edition", href: "/en/" },
];

function HowToFooter({ screenLabel = "Footer" }) {
  const assetBase = window.HOWTO_ASSET_BASE || "";
  const [email, setEmail] = React.useState("");
  const [status, setStatus] = React.useState("idle");

  async function handleSubscribe(event) {
    event.preventDefault();
    if (!email || status === "loading") return;

    setStatus("loading");
    try {
      const response = await fetch("/api/subscribe", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });

      if (!response.ok) throw new Error("Subscribe failed");
      setStatus("success");
    } catch {
      setStatus("error");
    }
  }

  return (
    <footer className="footer footer-network" data-screen-label={screenLabel}>
      <div className="footer-inner">
        <div className="footer-network-top">
          <div className="footer-brand">
            <div className="footer-brand-lockup">
              <img src={`${assetBase}assets/brand/favicon.png`} alt="HowTo Health Edition logo" />
              <div>
                <span>How To:</span>
                <strong>Health &amp; Fitness Edition</strong>
              </div>
            </div>
            <p>A plain-spoken health and fitness magazine for training, food, recovery, care, and everyday wellness.</p>
          </div>

          <div className="footer-col footer-editions">
            <h4>Other Editions</h4>
            <ul>
              {HOWTO_EDITIONS.map((edition) => (
                <li key={edition.label}>
                  <a href={edition.href}>{edition.label}</a>
                </li>
              ))}
            </ul>
          </div>

          <div className="footer-col footer-sub">
            <h4>Newsletter</h4>
            <p>The Health &amp; Fitness Letter is where the week gets edited down.</p>
            {status === "success" ? (
              <p className="footer-sub-success" role="status">You're in.</p>
            ) : (
              <form className="footer-sub-form" onSubmit={handleSubscribe}>
                <div className="footer-sub-input">
                  <input
                    type="email"
                    value={email}
                    onChange={(event) => setEmail(event.target.value)}
                    placeholder="you@somewhere.com"
                    aria-label="Email address"
                    aria-describedby={status === "error" ? "newsletter-error" : undefined}
                    required
                  />
                  <button type="submit" disabled={status === "loading"}>
                    {status === "loading" ? "Signing up" : "Sign up"}
                  </button>
                </div>
                {status === "error" && (
                  <p className="footer-sub-error" id="newsletter-error" role="alert">Something went wrong. Try again.</p>
                )}
              </form>
            )}
          </div>

          <div className="footer-col">
            <h4>Social</h4>
            <ul>
              <li><a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer">Instagram</a></li>
              <li><a href="/en/#contributors">Contributors</a></li>
              <li><a href="/en/#letter">Editor's Letter</a></li>
              <li><a href="mailto:hello@thehowtonetwork.com">Contact</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-disclaimer">
          <h4>Disclaimer</h4>
          <div className="footer-disclaimer-grid">
            <p>
              Content on this site is for general information only. It may not reflect current codes, regulations, professional standards, or the needs of your body.
            </p>
            <p>
              HowTo: Health &amp; Fitness provides general wellness and movement guidance only. Not medical advice. Consult a qualified professional before changing anything that affects your health.
            </p>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© 2026 HowTo: Health &amp; Fitness Edition. All rights reserved.</span>
          <span>Part of the HowTo Network - thehowtonetwork.com</span>
        </div>
      </div>
    </footer>
  );
}

window.HowToFooter = HowToFooter;
window.Footer = HowToFooter;