// High Culture · shared UI components
// Used across the highculture, boost, and mood kits.
// Exports onto window so other Babel scripts can grab them.

const { useState, useEffect, useRef } = React;

// Inline the wordmark SVG so fill="currentColor" inherits the parent color.
function Wordmark({ width = 160, color, style, ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    let cancelled = false;
    fetch(rest["data-src"] || Wordmark.src).then(r => r.text()).then(svg => {
      if (cancelled || !ref.current) return;
      ref.current.innerHTML = svg;
      const s = ref.current.querySelector("svg");
      if (s) { s.removeAttribute("width"); s.style.width = "100%"; s.style.height = "auto"; s.style.display = "block"; }
    });
    return () => { cancelled = true; };
  }, []);
  return <span ref={ref} aria-label="highculture" role="img" style={{ display: "inline-block", width, color, lineHeight: 0, ...style }} {...rest} />;
}
Wordmark.src = "../../assets/logos/wordmark.svg";

function Topbar() {
  return (
    <div className="topbar">
      <div className="container">
        <span>Wysyłka w Polsce w ciągu 2 dni roboczych</span>
        <span>Koszt dostawy od 14 zł</span>
      </div>
    </div>
  );
}

function Header({ ctaLabel = "Powiadom mnie o dostępności", onBrandClick }) {
  const [open, setOpen] = useState(false);
  return (
    <header className="site-header">
      <nav className={"container nav" + (open ? " is-open" : "")}>
        <button className="mobile-toggle" onClick={() => setOpen(o => !o)}>☰</button>
        <div className="nav-links">
          <a>Produkty</a>
          <a>O nas</a>
          <a>Nauka</a>
          <a>Składniki</a>
        </div>
        <a className="brand" onClick={onBrandClick}><Wordmark width={150} /></a>
        <div className="nav-links nav-right">
          <a>Magazyn</a>
          <a>FAQ</a>
          <a className="button button--primary">{ctaLabel}</a>
          <span className="icons">⌕ ♙ ◌</span>
        </div>
      </nav>
    </header>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <a className="brand"><Wordmark width={170} /></a>
        <div className="footer-links">
          <a>Regulamin</a>
          <a>Polityka prywatności</a>
          <a>Polityka cookies</a>
          <a>Zwroty i reklamacje</a>
          <a>Kontakt</a>
        </div>
        <div style={{ color: "var(--hc-muted)", letterSpacing: ".18em" }}>◎ f ▶ ♫</div>
        <p className="disclaimer">*Oświadczenia dotyczą składników aktywnych. Suplement diety nie może być stosowany jako substytut zróżnicowanej diety.</p>
      </div>
    </footer>
  );
}

function FaqItem({ q, a }) {
  const [open, setOpen] = useState(false);
  return (
    <article className={"card faq-item" + (open ? " is-open" : "")}>
      <button className="faq-q" onClick={() => setOpen(o => !o)}>
        {q}<span>{open ? "−" : "+"}</span>
      </button>
      <div className="faq-a">{a}</div>
    </article>
  );
}

function BenefitCard({ icon, title, body }) {
  return (
    <article className="card benefit-card">
      <div className="icon">{icon}</div>
      <h3>{title}</h3>
      <p>{body}</p>
    </article>
  );
}

function IngredientCard({ image, name, body }) {
  return (
    <article className="card ingredient-card asset-bg" style={{ backgroundImage: `url('${image}')` }}>
      <h3>{name}</h3>
      <p>{body}</p>
    </article>
  );
}

function Step({ icon, title, body }) {
  return (
    <article className="step">
      <div className="circle">{icon}</div>
      <h3>{title}</h3>
      <p>{body}</p>
    </article>
  );
}

function TrustCard({ image, title, body }) {
  return (
    <article className="card trust-card">
      <img src={image} alt="" />
      <h3>{title}</h3>
      <p>{body}</p>
    </article>
  );
}

function FinalCta({ image, heading, kicker, ctaLabel = "Powiadom mnie o dostępności" }) {
  return (
    <section className="final-cta" id="waitlist">
      <div className="container final-grid">
        <img src={image} alt="" />
        <div>
          <h2>{heading}</h2>
          <p className="kicker">{kicker}</p>
          <form className="signup" onSubmit={e => e.preventDefault()}>
            <input type="email" placeholder="Twój adres e-mail" />
            <button className="button button--primary" type="submit">{ctaLabel}</button>
          </form>
        </div>
        <div className="perks">
          <span>Premiery nowych produktów</span>
          <span>Ekskluzywne treści i porady</span>
          <span>Oferty specjalne tylko dla subskrybentów</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Topbar, Header, Footer, FaqItem, BenefitCard, IngredientCard, Step, TrustCard, FinalCta, Wordmark });