// 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>Darmowa dostawa dla 2+ produktów</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" : "")}>
        <a className="brand" onClick={onBrandClick}><Wordmark width={150} /></a>
        <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>
          <a>Magazyn</a>
          <a>FAQ</a>
        </div>
        <div className="nav-right">
          <a className="button button--primary">{ctaLabel}</a>
          <span className="icons">
            <a title="Konto" aria-label="Konto">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <circle cx="12" cy="8" r="3.5" />
                <path d="M5 20c.6-3.6 3.5-6 7-6s6.4 2.4 7 6" />
              </svg>
            </a>
            <a title="Szukaj" aria-label="Szukaj">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <circle cx="11" cy="11" r="6" />
                <path d="M20 20l-4.3-4.3" />
              </svg>
            </a>
            <a title="Koszyk" aria-label="Koszyk">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M5.5 8h13l-1 12.5h-11z" />
                <path d="M9 8V6.5a3 3 0 0 1 6 0V8" />
              </svg>
            </a>
          </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 className="social" aria-label="Social media">
          <a title="Instagram" aria-label="Instagram">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <rect x="3" y="3" width="18" height="18" rx="5" />
              <circle cx="12" cy="12" r="4" />
              <circle cx="17.2" cy="6.8" r="0.6" fill="currentColor" stroke="none" />
            </svg>
          </a>
          <a title="Facebook" aria-label="Facebook">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <text x="12" y="19" textAnchor="middle" fontFamily="'Cormorant Garamond', Georgia, serif" fontSize="22" fontStyle="italic" fontWeight="500" fill="currentColor" stroke="none">f</text>
            </svg>
          </a>
          <a title="YouTube" aria-label="YouTube">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <rect x="2" y="6" width="20" height="12" rx="3" />
              <path d="M10.5 9.5v5l4-2.5z" fill="currentColor" stroke="none" />
            </svg>
          </a>
          <a title="Spotify" aria-label="Spotify">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <circle cx="12" cy="12" r="9" />
              <path d="M7.5 14.2c2.6-1.1 6.4-1 9.2.5" />
              <path d="M7 11c3.2-1.2 8.4-.7 11 1.5" />
              <path d="M8 7.8c3.2-1 8 0 10 1.6" />
            </svg>
          </a>
        </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 });