// Shared building blocks used by all three variations.
// Exposes: Nav, Footer, CTAButton, FAQAccordion, Marquee, Logomark, SectionEyebrow

const { useState } = React;

function Logomark({ size = 28 }) {
  // Official emailfy.de favicon — black E on mint square
  return (
    <img
      src="/assets/emailfy-logo.png"
      width={size}
      height={size}
      alt="Emailfy"
      style={{ borderRadius: Math.round(size * 0.22), display: 'block' }}
    />
  );
}

function CTAButton({ children, variant = 'primary', size = 'md', as = 'button', ...rest }) {
  const Tag = as;
  const cls = [
    'cta',
    `cta--${variant}`,
    `cta--${size}`,
  ].join(' ');
  return <Tag className={cls} {...rest}>
    <span>{children}</span>
    {variant === 'primary' && <span className="cta__arrow" aria-hidden="true">→</span>}
  </Tag>;
}

function Nav({ variant = 'editorial' }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  return (
    <>
    <nav className={`nav ${scrolled ? 'nav--scrolled' : ''}`}>
      <div className="nav__inner">
        <a href="/" className="nav__brand">
          <Logomark />
          <span>Emailfy</span>
        </a>
        <div className="nav__links">
          {window.CONTENT.nav.map(l => {
            const isHome = window.location.pathname === '/' || window.location.pathname === '/index.html';
            const isSection = l.href && l.href.startsWith('#');
            const sectionId = isSection ? l.href.slice(1) : '';
            const href = isSection ? (isHome ? l.href : `/?scroll=${encodeURIComponent(sectionId)}`) : l.href;
            return <a key={l.href} href={href}>{l.label}</a>;
          })}
        </div>
        <CTAButton variant="primary" size="sm" as="a" href="/analyse/" className="nav__cta-desktop">Kostenlose Analyse</CTAButton>
        <button
          className="nav__burger"
          aria-label="Menü öffnen"
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
        >
          <span className={`nav__burger-line ${open ? 'nav__burger-line--a' : ''}`}/>
          <span className={`nav__burger-line ${open ? 'nav__burger-line--b' : ''}`}/>
        </button>
      </div>
    </nav>
    <div className={`nav-drawer ${open ? 'nav-drawer--open' : ''}`} onClick={() => setOpen(false)}>
      <div className="nav-drawer__panel" onClick={e => e.stopPropagation()}>
        <div className="nav-drawer__links">
          {window.CONTENT.nav.map((l, i) => {
            const isHome = window.location.pathname === '/' || window.location.pathname === '/index.html';
            const isSection = l.href && l.href.startsWith('#');
            const sectionId = isSection ? l.href.slice(1) : '';
            const href = isSection ? (isHome ? l.href : `/?scroll=${encodeURIComponent(sectionId)}`) : l.href;
            return (
            <a key={l.href} href={href} className="nav-drawer__link" onClick={() => setOpen(false)}>
              <span className="nav-drawer__num">0{i + 1}</span>
              <span>{l.label}</span>
              <span className="nav-drawer__arrow">→</span>
            </a>
          )})}
        </div>
        <div className="nav-drawer__foot">
          <CTAButton variant="primary" size="md" as="a" href="/analyse/" style={{width: '100%', justifyContent: 'center'}}>Kostenlose Analyse</CTAButton>
          <a href="mailto:szymon@emailfy.de" className="nav-drawer__email">szymon@emailfy.de</a>
        </div>
      </div>
    </div>
    </>
  );
}

function Marquee({ items, reverse = false, speed = 40 }) {
  const doubled = [...items, ...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div
        className="marquee__track"
        style={{
          animationDuration: `${speed}s`,
          animationDirection: reverse ? 'reverse' : 'normal',
        }}
      >
        {doubled.map((item, i) => (
          <span key={i} className="marquee__item">{item}</span>
        ))}
      </div>
    </div>
  );
}

function SectionEyebrow({ children, align = 'left' }) {
  return <div className={`eyebrow eyebrow--${align}`}>
    <span className="eyebrow__dot" />
    {children}
  </div>;
}

function FAQAccordion({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div className="faq">
      {items.map((item, i) => {
        const isOpen = open === i;
        return (
          <div key={i} className={`faq__row ${isOpen ? 'faq__row--open' : ''}`}>
            <button
              className="faq__q"
              onClick={() => setOpen(isOpen ? -1 : i)}
              aria-expanded={isOpen}
            >
              <span className="faq__num">{String(i + 1).padStart(2, '0')}</span>
              <span className="faq__qtext">{item.q}</span>
              <span className="faq__toggle">{isOpen ? '–' : '+'}</span>
            </button>
            <div className="faq__a" style={{ maxHeight: isOpen ? 400 : 0 }}>
              <p>{item.a}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function Footer() {
  const f = window.CONTENT.footer;
  return (
    <footer className="footer">
      <div className="footer__top">
        <div className="footer__brand">
          <a href="/" className="nav__brand" style={{ marginBottom: 18 }}>
            <Logomark size={32}/>
            <span style={{ fontSize: 22 }}>Emailfy</span>
          </a>
          <p className="footer__desc">{f.desc}</p>
          <a className="footer__email" href={`mailto:${f.email}`}>{f.email}</a>
        </div>
        <div className="footer__links">
          {f.links.map(l => <a key={l.label} href={l.href}>{l.label}</a>)}
        </div>
      </div>
      <div className="footer__bottom">
        <span>{f.legal}</span>
        <div>
          {f.legalLinks.map((l, i) => <span key={l.label}><a href={l.href}>{l.label}</a>{i < f.legalLinks.length - 1 && <span className="footer__sep"> | </span>}</span>)}
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Logomark, CTAButton, Nav, Marquee, SectionEyebrow, FAQAccordion, Footer });