// Hero + marquee + intro for Sabrana
const { useEffect: useEffectHero } = React;

function Hero() {
  return (
    <section className="sbr-hero" id="home">
      <div className="sbr-hero-meta">
        <div className="sbr-hero-meta-left">
          <span className="sbr-eyebrow">Est. Belgrade · Remote worldwide</span>
        </div>
        <div className="sbr-hero-meta-right">
          <span className="sbr-eyebrow">N° 001 — sabrana.co</span>
        </div>
      </div>

      <div className="sbr-hero-body">
        <h1 className="sbr-hero-title">
          <span className="sbr-hero-line">A one-woman</span>
          <span className="sbr-hero-line"><em>communications</em> studio</span>
          <span className="sbr-hero-line">for brands that prefer</span>
          <span className="sbr-hero-line">a <em>quiet</em> kind of craft.</span>
        </h1>

        <div className="sbr-hero-aside">
          <div className="sbr-hero-aside-text">
            Sabrana is the practice of Jelena Marinković — PR, social, and
            event communications, built around the belief that a brand's voice
            should sound the same in a press release, on a panel, and on a
            Tuesday morning on TikTok.
          </div>
          <div className="sbr-hero-aside-cta">
            <a href="#work" className="sbr-btn sbr-btn-solid">
              See the work <Arrow />
            </a>
            <a href="#services" className="sbr-btn sbr-btn-link">
              Services <Arrow />
            </a>
          </div>
        </div>
      </div>

      <div className="sbr-hero-foot">
        <div className="sbr-hero-stat">
          <div className="sbr-stat-num">4.5<span>yrs</span></div>
          <div className="sbr-stat-label">In PR &amp; brand comms</div>
        </div>
        <div className="sbr-hero-stat">
          <div className="sbr-stat-num">30<span>+</span></div>
          <div className="sbr-stat-label">Brands represented</div>
        </div>
        <div className="sbr-hero-stat">
          <div className="sbr-stat-num">3<span>lang.</span></div>
          <div className="sbr-stat-label">SR · EN · TR</div>
        </div>
        <div className="sbr-hero-stat sbr-hero-stat-last">
          <div className="sbr-stat-num" style={{ fontStyle: "italic" }}>Now</div>
          <div className="sbr-stat-label">Taking Q3 · 2026 briefs</div>
        </div>
      </div>
    </section>
  );
}

function ClientsMarquee() {
  const direct = window.SABRANA.directClients;
  const agency = window.SABRANA.agencyClients;
  return (
    <section className="sbr-clients" aria-label="Clients" id="clients">
      <div className="sbr-clients-inner">
        <div className="sbr-clients-head">
          <SectionLabel num="N° 00">Clients</SectionLabel>
          <p className="sbr-clients-head-note">
            A short ledger, kept honest: who Sabrana works with directly today,
            and who Jelena has represented during prior in-house and agency
            engagements.
          </p>
        </div>

        <ClientsRow
          label="Direct clients"
          sublabel="Engaged with Sabrana"
          items={direct}
          tone="primary"
        />
        <ClientsRow
          label="Represented in prior roles"
          sublabel="At Smart Vision · Represent Communications · Temet Winery"
          items={agency}
          tone="muted"
          reverse
        />
      </div>
    </section>
  );
}

function ClientsRow({ label, sublabel, items, tone, reverse }) {
  const doubled = [...items, ...items, ...items];
  return (
    <div className={"sbr-clients-row sbr-clients-row-" + tone}>
      <div className="sbr-clients-row-label">
        <div className="sbr-eyebrow">{label}</div>
        <div className="sbr-clients-row-sub">{sublabel}</div>
      </div>
      <div className="sbr-clients-row-track-wrap">
        <div className={"sbr-clients-row-track" + (reverse ? " is-reverse" : "")}>
          {doubled.map((c, i) => (
            <span key={i} className="sbr-clients-row-item">
              <span className="sbr-clients-row-name">{c.name}</span>
              <span className="sbr-clients-row-note">{c.note}</span>
              <span className="sbr-clients-row-dot">·</span>
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

function Manifesto() {
  return (
    <section className="sbr-manifesto" id="studio">
      <SectionLabel num="N° 01">The studio</SectionLabel>
      <div className="sbr-manifesto-grid">
        <h2 className="sbr-manifesto-title">
          Fewer clients. <em>Closer</em> attention. The person you brief is the
          person who writes, pitches, and picks up the phone on Friday night.
        </h2>
        <div className="sbr-manifesto-body">
          <p>
            Sabrana is deliberately small. One practitioner, a tight roster,
            and long relationships. The work sits where PR meets brand — press,
            social, influencer, events — treated as one voice rather than
            separate channels.
          </p>
          <p>
            The clients range from family wineries to global manufacturers.
            What they share is a preference for considered, honest
            communications over loud, disposable ones.
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, ClientsMarquee, Manifesto });