// Nav, footer, decorative atoms for Sabrana
const { useState, useEffect, useRef } = React;

function Monogram({ size = 28 }) {
  // Sabrana mark: an elegant S inside a hairline circle — neutral, classy.
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" style={{ display: "block" }}>
      <circle cx="20" cy="20" r="19" fill="none" stroke="currentColor" strokeWidth="0.8" />
      <text
        x="20"
        y="27"
        textAnchor="middle"
        fontFamily="'Cormorant Garamond', serif"
        fontStyle="italic"
        fontSize="22"
        fill="currentColor"
      >
        S
      </text>
    </svg>
  );
}

function Wordmark() {
  return (
    <a href="#home" className="sbr-wordmark">
      <Monogram size={26} />
      <span className="sbr-wordmark-text">Sabrana</span>
    </a>
  );
}

function Nav({ active }) {
  const [open, setOpen] = useState(false);
  const items = [
    { id: "work", label: "Work" },
    { id: "services", label: "Services" },
    { id: "about", label: "About" },
    { id: "journal", label: "Journal" },
    { id: "contact", label: "Contact" },
  ];
  return (
    <header className="sbr-nav">
      <div className="sbr-nav-inner">
        <Wordmark />
        <nav className="sbr-nav-links">
          {items.map((it) => (
            <a
              key={it.id}
              href={`#${it.id}`}
              className={"sbr-nav-link" + (active === it.id ? " is-active" : "")}
            >
              {it.label}
            </a>
          ))}
        </nav>
        <a href="#contact" className="sbr-nav-cta">
          <span>Start a project</span>
          <Arrow />
        </a>
        <button
          className="sbr-nav-burger"
          aria-label="Menu"
          onClick={() => setOpen((o) => !o)}
        >
          <span />
          <span />
        </button>
      </div>
      {open && (
        <div className="sbr-nav-mobile">
          {items.map((it) => (
            <a
              key={it.id}
              href={`#${it.id}`}
              onClick={() => setOpen(false)}
              className="sbr-nav-mobile-link"
            >
              {it.label}
            </a>
          ))}
        </div>
      )}
    </header>
  );
}

function Arrow({ size = 14 }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 16 16"
      fill="none"
      style={{ display: "inline-block", verticalAlign: "middle" }}
    >
      <path
        d="M3 8h10M9 4l4 4-4 4"
        stroke="currentColor"
        strokeWidth="1.2"
        strokeLinecap="square"
      />
    </svg>
  );
}

function SectionLabel({ children, num }) {
  return (
    <div className="sbr-section-label">
      {num && <span className="sbr-section-num">{num}</span>}
      <span className="sbr-section-rule" />
      <span className="sbr-section-text">{children}</span>
    </div>
  );
}

function Footer() {
  const c = window.SABRANA.contact;
  return (
    <footer className="sbr-footer" id="footer">
      <div className="sbr-footer-top">
        <div className="sbr-footer-mark">
          <Monogram size={52} />
          <div>
            <div className="sbr-footer-title">Sabrana</div>
            <div className="sbr-footer-sub">Communications &amp; brand partner</div>
          </div>
        </div>
        <div className="sbr-footer-cta">
          <div className="sbr-eyebrow">Next opening</div>
          <div className="sbr-footer-line">Q3 · 2026</div>
          <a href="#contact" className="sbr-btn sbr-btn-ghost">
            Enquire <Arrow />
          </a>
        </div>
      </div>
      <div className="sbr-footer-cols">
        <div>
          <div className="sbr-eyebrow">Studio</div>
          <p>{c.city}</p>
          <p>{c.hours}</p>
        </div>
        <div>
          <div className="sbr-eyebrow">Contact</div>
          <p><a href={`mailto:${c.email}`}>{c.email}</a></p>
          <p><a href={`tel:${c.phone.replace(/\s/g, "")}`}>{c.phone}</a></p>
        </div>
        <div>
          <div className="sbr-eyebrow">Elsewhere</div>
          <p><a href="#">Instagram · {c.ig}</a></p>
          <p><a href="#">LinkedIn · {c.li}</a></p>
        </div>
        <div>
          <div className="sbr-eyebrow">Sitemap</div>
          <p><a href="#work">Work</a></p>
          <p><a href="#services">Services</a></p>
          <p><a href="#about">About</a></p>
          <p><a href="#journal">Journal</a></p>
        </div>
      </div>
      <div className="sbr-footer-base">
        <span>© 2026 Sabrana · sabrana.co</span>
        <span>Handcrafted in Belgrade</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Monogram, Wordmark, Nav, Arrow, SectionLabel, Footer });