// Services + Work + Process sections
function Services() {
  const list = window.SABRANA.services;
  return (
    <section className="sbr-services" id="services">
      <div className="sbr-services-head">
        <SectionLabel num="N° 02">Services</SectionLabel>
        <h2 className="sbr-h2">
          Four disciplines, treated as one <em>spine</em>.
        </h2>
        <p className="sbr-lede">
          A brand sounds like a brand when press, social, partners, and events
          all answer to the same brief. Sabrana writes that brief and runs
          every line of it.
        </p>
      </div>

      <ol className="sbr-services-list">
        {list.map((s) => (
          <li key={s.num} className="sbr-service">
            <div className="sbr-service-num">{s.num}</div>
            <div className="sbr-service-title-wrap">
              <h3 className="sbr-service-title">{s.title}</h3>
            </div>
            <p className="sbr-service-body">{s.body}</p>
            <ul className="sbr-service-deliverables">
              {s.deliverables.map((d) => (
                <li key={d}>
                  <span className="sbr-service-bullet" />
                  {d}
                </li>
              ))}
            </ul>
          </li>
        ))}
      </ol>
    </section>
  );
}

function Work() {
  const cases = window.SABRANA.cases;
  return (
    <section className="sbr-work" id="work">
      <div className="sbr-work-head">
        <SectionLabel num="N° 03">Selected work</SectionLabel>
        <h2 className="sbr-h2">
          Direct engagements, and the <em>agency years</em> behind them.
        </h2>
        <p className="sbr-lede">
          The first two cases are current Sabrana clients. The rest are pieces
          of work delivered as an account executive inside Represent
          Communications and Smart Vision — included so you can read the full
          arc of the practice.
        </p>
      </div>

      <div className="sbr-cases">
        {cases.map((c, i) => {
          const isDirect = c.engagement && c.engagement.startsWith("Direct");
          return (
            <article
              key={i}
              className={"sbr-case " + (isDirect ? "is-direct" : "is-agency")}
            >
              <div className="sbr-case-visual" aria-hidden>
                <CaseArtwork index={i} />
                <div className="sbr-case-visual-tag">{c.tag}</div>
              </div>
              <div className="sbr-case-body">
                <div className="sbr-case-engagement">
                  <span
                    className={
                      "sbr-case-engagement-dot " +
                      (isDirect ? "is-direct" : "is-agency")
                    }
                  />
                  {c.engagement}
                </div>
                <div className="sbr-case-client">{c.client}</div>
                <h3 className="sbr-case-title">{c.title}</h3>
                <p className="sbr-case-copy">{c.copy}</p>
                <dl className="sbr-case-kpis">
                  {c.kpis.map((k) => (
                    <div key={k.k} className="sbr-case-kpi">
                      <dt>{k.k}</dt>
                      <dd>{k.v}</dd>
                    </div>
                  ))}
                </dl>
              </div>
            </article>
          );
        })}
      </div>

      <div className="sbr-work-foot">
        <p className="sbr-lede">
          A fuller case-by-case portfolio — including agency-era work for
          Philips, Philip Morris, Miele, Velux, Geberit and the Turkish Tourism
          Office — is available on request.
        </p>
        <a href="#contact" className="sbr-btn sbr-btn-link">
          Request a portfolio deck <Arrow />
        </a>
      </div>
    </section>
  );
}

// Abstract, tasteful SVG placeholders instead of hand-drawn illustrations.
function CaseArtwork({ index }) {
  const common = { width: "100%", height: "100%", preserveAspectRatio: "xMidYMid slice" };
  // 0 — Vilotijević Wine: bottle silhouette + vineyard hatch
  if (index === 0) {
    return (
      <svg viewBox="0 0 600 700" {...common}>
        <rect width="600" height="700" fill="var(--sbr-cream-3)" />
        <g stroke="var(--sbr-ink)" strokeWidth="0.5" opacity="0.25">
          {Array.from({ length: 40 }).map((_, i) => (
            <line key={i} x1={i * 16} y1="0" x2={i * 16 - 200} y2="700" />
          ))}
        </g>
        <g transform="translate(300 140)">
          <path
            d="M -28 0 L -28 60 C -28 80 -48 90 -48 150 L -48 460 C -48 490 -28 500 0 500 C 28 500 48 490 48 460 L 48 150 C 48 90 28 80 28 60 L 28 0 Z"
            fill="var(--sbr-accent)"
            stroke="var(--sbr-ink)"
            strokeWidth="0.6"
          />
          <rect x="-40" y="220" width="80" height="120" fill="var(--sbr-cream-1)" stroke="var(--sbr-ink)" strokeWidth="0.4" />
          <text x="0" y="258" textAnchor="middle" fontFamily="'Cormorant Garamond', serif" fontStyle="italic" fontSize="14" fill="var(--sbr-ink)">Vilotijević</text>
          <text x="0" y="282" textAnchor="middle" fontFamily="'Inter', sans-serif" fontSize="7" letterSpacing="2" fill="var(--sbr-ink)">RESERVE · 2024</text>
          <line x1="-30" y1="296" x2="30" y2="296" stroke="var(--sbr-ink)" strokeWidth="0.4" />
          <text x="0" y="315" textAnchor="middle" fontFamily="'Inter', sans-serif" fontSize="6" letterSpacing="1.5" fill="var(--sbr-ink)">VINOGRAD · SRBIJA</text>
        </g>
      </svg>
    );
  }
  // 1 — Sanmilend Farm: horizon, sun, fields
  if (index === 1) {
    return (
      <svg viewBox="0 0 600 700" {...common}>
        <rect width="600" height="700" fill="var(--sbr-cream-2)" />
        {/* sun */}
        <circle cx="430" cy="220" r="80" fill="var(--sbr-accent)" opacity="0.85" />
        <circle cx="430" cy="220" r="80" fill="none" stroke="var(--sbr-ink)" strokeWidth="0.5" />
        {/* horizon */}
        <line x1="0" y1="360" x2="600" y2="360" stroke="var(--sbr-ink)" strokeWidth="0.6" opacity="0.5" />
        {/* fields — angled rows */}
        <g stroke="var(--sbr-ink)" strokeWidth="0.5" opacity="0.4">
          {Array.from({ length: 14 }).map((_, i) => (
            <line key={i}
              x1={-100 + i * 70}
              y1="360"
              x2={-300 + i * 50}
              y2="700"
            />
          ))}
        </g>
        <g stroke="var(--sbr-ink)" strokeWidth="0.4" opacity="0.5">
          {Array.from({ length: 8 }).map((_, i) => (
            <line key={i}
              x1="0"
              y1={400 + i * 38}
              x2="600"
              y2={400 + i * 38}
            />
          ))}
        </g>
        {/* small barn */}
        <g transform="translate(120 320)">
          <polygon points="0,0 50,-30 100,0 100,40 0,40" fill="var(--sbr-cream-1)" stroke="var(--sbr-ink)" strokeWidth="0.6" />
          <line x1="0" y1="0" x2="100" y2="0" stroke="var(--sbr-ink)" strokeWidth="0.6" />
          <rect x="35" y="15" width="30" height="25" fill="var(--sbr-ink)" opacity="0.6" />
        </g>
      </svg>
    );
  }
  // 2 — Beauty / retail: concentric arcs
  if (index === 2) {
    return (
      <svg viewBox="0 0 600 700" {...common}>
        <rect width="600" height="700" fill="var(--sbr-cream-2)" />
        <g stroke="var(--sbr-accent)" fill="none" strokeWidth="0.7" opacity="0.55">
          {Array.from({ length: 18 }).map((_, i) => (
            <circle key={i} cx="300" cy="700" r={80 + i * 40} />
          ))}
        </g>
        <circle cx="300" cy="320" r="70" fill="var(--sbr-accent)" opacity="0.9" />
        <circle cx="300" cy="320" r="70" fill="none" stroke="var(--sbr-ink)" strokeWidth="0.6" />
      </svg>
    );
  }
  // 3 — Corporate / media — newspaper column grid
  return (
    <svg viewBox="0 0 600 700" {...common}>
      <rect width="600" height="700" fill="var(--sbr-cream-2)" />
      <g fill="var(--sbr-ink)" opacity="0.85">
        <text x="40" y="80" fontFamily="'Cormorant Garamond', serif" fontStyle="italic" fontSize="38">The Daily</text>
        <line x1="40" y1="100" x2="560" y2="100" stroke="var(--sbr-ink)" strokeWidth="0.6" />
        <text x="40" y="118" fontFamily="'Inter', sans-serif" fontSize="8" letterSpacing="2">VOL. XII · BELGRADE · TUESDAY</text>
      </g>
      <g fill="var(--sbr-ink)" opacity="0.55">
        {[0,1,2].map((col) =>
          Array.from({ length: 22 }).map((_, i) => (
            <rect
              key={col + "-" + i}
              x={40 + col * 180}
              y={150 + i * 22}
              width={160 - (i % 5 === 0 ? 60 : 0)}
              height="6"
            />
          ))
        )}
      </g>
      <rect x="40" y="380" width="340" height="140" fill="var(--sbr-accent)" opacity="0.9" />
      <rect x="40" y="380" width="340" height="140" fill="none" stroke="var(--sbr-ink)" strokeWidth="0.4" />
    </svg>
  );
}

function Process() {
  const list = window.SABRANA.process;
  return (
    <section className="sbr-process" id="process">
      <div className="sbr-process-head">
        <SectionLabel num="N° 04">Process</SectionLabel>
        <h2 className="sbr-h2">A small studio runs on <em>rhythm</em>.</h2>
      </div>
      <div className="sbr-process-grid">
        {list.map((p) => (
          <div key={p.num} className="sbr-process-step">
            <div className="sbr-process-num">{p.num}</div>
            <h3 className="sbr-process-title">{p.title}</h3>
            <p className="sbr-process-body">{p.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Services, Work, Process, CaseArtwork });
