// Graffiti Guard — monthly sacrificial-film plan for storefronts (dark landmark section)

function GraffitiGuard({ onBookClick }) {
  const { t } = useLang();
  const g = t.graffiti;
  return (
    <section className="section gg" id="graffiti">
      <div className="gg-marquee-strip" aria-hidden="true">
        <div className="gg-marquee-track" data-marquee>
          <span className="mono">{g.marquee.repeat(6)}</span>
          <span className="mono">{g.marquee.repeat(6)}</span>
        </div>
      </div>
      <div className="gg-wipe" aria-hidden="true" />
      <div className="wrap">
        <div className="gg-head">
          <span className="eyebrow gg-eyebrow">{g.eyebrow}</span>
          <div className="gg-h-wrap">
            <h2 className="gg-h">
              {g.title} <em className="gg-h-em">{g.titleEm}</em>
            </h2>
            <svg
              className="gg-scribble"
              viewBox="0 0 400 120"
              fill="none"
              preserveAspectRatio="none"
              aria-hidden="true"
            >
              <path
                className="gg-scribble-path"
                d="M18 78 C 60 22, 96 110, 138 52 S 210 18, 248 74 C 276 112, 310 30, 352 60 S 388 92, 396 44"
                stroke="var(--sun)"
                strokeWidth="7"
                strokeLinecap="round"
              />
            </svg>
          </div>
          <p className="gg-sub">{g.sub}</p>
        </div>

        <div className="gg-steps" data-stagger>
          {g.steps.map((s, i) => (
            <div key={i} className="gg-step">
              <div className="gg-step-kicker mono">{s.kicker}</div>
              <div className="gg-step-t">{s.t}</div>
              <div className="gg-step-b">{s.b}</div>
            </div>
          ))}
        </div>

        <div className="gg-plan">
          <div className="gg-plan-left">
            <div className="gg-plan-label mono">{g.planLabel}</div>
            <div className="gg-price">
              <span className="gg-price-from mono">{g.from}</span>
              <span className="gg-price-n" data-counter>{g.price}</span>
              <span className="gg-price-unit mono">{g.unit}</span>
            </div>
            <div className="gg-note">{g.note}</div>
          </div>
          <div className="gg-plan-right">
            <ul className="gg-bullets">
              {g.bullets.map((b, i) => (
                <li key={i}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--sun)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  {b}
                </li>
              ))}
            </ul>
            <button className="btn btn-sun gg-cta" onClick={onBookClick}>
              {g.cta} <Arrow />
            </button>
          </div>
        </div>
      </div>
      <style>{`
        .gg {
          background: var(--glass);
          color: #fff;
          position: relative;
          overflow: hidden;
        }
        .gg-marquee-strip {
          position: absolute; top: 18px; left: 0; right: 0;
          overflow: hidden;
          opacity: 0.22;
          pointer-events: none;
        }
        .gg-marquee-track {
          display: flex; white-space: nowrap; width: max-content;
        }
        .gg-marquee-track .mono {
          font-size: 12px; letter-spacing: 0.22em;
          color: var(--sun);
          padding-right: 2em;
        }
        .gg-wipe {
          position: absolute; top: 0; bottom: 0;
          left: 0; width: 34%;
          background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sun) 26%, transparent) 45%, rgba(255,255,255,0.18) 52%, transparent);
          transform: translateX(-120%) skewX(-8deg);
          opacity: 0;
          pointer-events: none;
          z-index: 1;
        }
        .gg .wrap { position: relative; z-index: 2; }
        .gg-head { position: relative; max-width: 780px; margin-bottom: 48px; }
        .gg-eyebrow { color: var(--sun); }
        .gg-eyebrow::before { background: var(--sun); }
        .gg-h-wrap { position: relative; display: block; }
        .gg-h {
          font-size: clamp(34px, 4.6vw, 64px);
          font-weight: 600; letter-spacing: -0.03em;
          line-height: 1.05;
          margin: 18px 0 20px;
        }
        .gg-h-em {
          font-style: normal; color: rgba(255,255,255,0.55); font-weight: 500;
          display: block;
        }
        .gg-scribble {
          position: absolute; inset: -8% -2%;
          width: 104%; height: 116%;
          opacity: 0;
          pointer-events: none;
        }
        .gg-sub {
          font-size: 16.5px; line-height: 1.55;
          color: rgba(255,255,255,0.72);
          max-width: 62ch; margin: 0;
        }
        .gg-steps {
          display: grid; grid-template-columns: 1fr; gap: 14px;
          margin-bottom: 40px;
        }
        @media (min-width: 880px) { .gg-steps { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
        .gg-step {
          padding: 22px 20px;
          background: rgba(255,255,255,0.05);
          border: 1px solid rgba(255,255,255,0.12);
          border-radius: var(--r-lg);
        }
        .gg-step-kicker {
          font-size: 11px; letter-spacing: 0.18em;
          color: var(--sun);
          margin-bottom: 14px;
        }
        .gg-step-t {
          font-family: var(--display);
          font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
          margin-bottom: 8px;
        }
        .gg-step-b { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.65); }
        .gg-plan {
          display: grid; grid-template-columns: 1fr;
          gap: 28px;
          padding: 26px 24px;
          background: rgba(255,255,255,0.06);
          border: 1px solid rgba(255,255,255,0.14);
          border-radius: var(--r-xl);
        }
        @media (min-width: 880px) {
          .gg-plan { grid-template-columns: 1fr 1fr; gap: 48px; padding: 36px 40px; align-items: center; }
        }
        .gg-plan-label {
          font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
          color: rgba(255,255,255,0.5);
          margin-bottom: 10px;
        }
        .gg-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
        .gg-price-from { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
        .gg-price-n {
          font-family: var(--display);
          font-size: 64px; font-weight: 600; letter-spacing: -0.04em; line-height: 1;
          color: var(--sun);
        }
        .gg-price-unit { font-size: 13px; color: rgba(255,255,255,0.65); }
        .gg-note { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.55); max-width: 40ch; }
        .gg-bullets {
          list-style: none; padding: 0; margin: 0 0 24px;
          display: flex; flex-direction: column; gap: 12px;
          font-size: 14.5px;
        }
        .gg-bullets li { display: flex; gap: 10px; align-items: center; }
        .gg-cta { width: fit-content; }
      `}</style>
    </section>
  );
}

Object.assign(window, { GraffitiGuard });