// Outside the metro — ship film + travel for out-of-area jobs

function Outside() {
  const { t } = useLang();
  const o = t.outside;
  return (
    <section className="section outside" id="outside">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">{o.eyebrow}</span>
            <h2 style={{ marginTop: 16 }}>
              {o.title} <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)', fontWeight: 500 }}>{o.titleEm}</em>
            </h2>
          </div>
          <p>{o.sub}</p>
        </div>

        <div className="ot-grid">
          {o.cards.map((c, i) => (
            <div key={i} className="ot-card">
              <div className="ot-kicker mono">{c.kicker}</div>
              <h3 className="ot-h">{c.title}</h3>
              <p className="ot-b">{c.body}</p>
            </div>
          ))}
        </div>

        <div className="ot-foot">
          <div className="ot-foot-l">
            <div className="ot-foot-label mono">{o.areasLabel}</div>
            <div className="ot-areas">
              {o.areas.map((a, i) => <span key={i} className="ot-pin">{a}</span>)}
            </div>
          </div>
          <div className="ot-foot-r">
            <MapDots />
            <p className="ot-foot-cta">{o.ctaLabel}</p>
          </div>
        </div>
      </div>

      <style>{`
        .outside { background: var(--bg-2); }
        .ot-grid {
          display: grid; grid-template-columns: 1fr; gap: 16px;
          margin-bottom: 56px;
        }
        @media (min-width: 880px) { .ot-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
        .ot-card {
          padding: 20px 18px 22px;
          background: var(--card);
          border: 1px solid var(--hairline);
          border-radius: var(--r-lg);
          display: flex; flex-direction: column; gap: 10px;
        }
        @media (min-width: 700px) {
          .ot-card { padding: 28px 24px 32px; gap: 12px; }
        }
        .ot-kicker {
          font-size: 11px; letter-spacing: 0.18em;
          color: var(--sun-deep);
          margin-bottom: 8px;
        }
        .ot-h { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.15; }
        .ot-b { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

        .ot-foot {
          display: grid; grid-template-columns: 1fr; gap: 24px;
          padding: 22px 20px;
          background: var(--card);
          border: 1px solid var(--hairline-strong);
          border-radius: var(--r-xl);
          align-items: center;
        }
        @media (min-width: 700px) {
          .ot-foot { gap: 32px; padding: 32px; }
        }
        @media (min-width: 880px) {
          .ot-foot { grid-template-columns: 1.2fr 1fr; gap: 48px; padding: 40px 48px; }
        }
        .ot-foot-label {
          font-size: 11px; letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--ink-soft);
          margin-bottom: 16px;
        }
        .ot-areas { display: flex; flex-wrap: wrap; gap: 8px; }
        .ot-pin {
          padding: 8px 14px;
          font-size: 13px;
          background: var(--bg-2);
          border: 1px solid var(--hairline);
          border-radius: 999px;
          font-weight: 500;
        }
        .ot-foot-r {
          display: flex; flex-direction: column; gap: 16px;
          align-items: flex-start;
        }
        .ot-foot-cta {
          margin: 0; font-size: 15px;
          color: var(--ink); line-height: 1.5;
          font-weight: 500;
        }
      `}</style>
    </section>
  );
}

// A simple decorative scatter map: NYC dot, ring of out-of-area dots
function MapDots() {
  return (
    <svg width="100%" height="120" viewBox="0 0 320 120" style={{ maxWidth: 320 }} aria-hidden="true">
      {/* dotted radius rings */}
      <circle cx="160" cy="80" r="28"  fill="none" stroke="var(--hairline-strong)" strokeWidth="1" strokeDasharray="2 4" />
      <circle cx="160" cy="80" r="56"  fill="none" stroke="var(--hairline-strong)" strokeWidth="1" strokeDasharray="2 4" />
      <circle cx="160" cy="80" r="86" fill="none" stroke="var(--hairline-strong)" strokeWidth="1" strokeDasharray="2 4" />

      {/* travel destination dots */}
      <circle cx="220" cy="62" r="3"  fill="var(--ink-soft)" opacity="0.5" />
      <circle cx="245" cy="92" r="3"  fill="var(--ink-soft)" opacity="0.5" />
      <circle cx="105" cy="50" r="3"  fill="var(--ink-soft)" opacity="0.5" />
      <circle cx="80"  cy="98" r="3"  fill="var(--ink-soft)" opacity="0.5" />
      <circle cx="195" cy="30" r="3"  fill="var(--ink-soft)" opacity="0.5" />

      {/* NYC HQ */}
      <circle cx="160" cy="80" r="7" fill="var(--sun)" />
      <circle cx="160" cy="80" r="14" fill="none" stroke="var(--sun)" strokeWidth="1" opacity="0.4" />
      <text x="160" y="105" textAnchor="middle"
            fontFamily="IBM Plex Mono, monospace" fontSize="9"
            fill="var(--ink)" letterSpacing="0.1em">NYC HQ</text>
    </svg>
  );
}

Object.assign(window, { Outside });
