// Variation A: "Roadie Setlist"
// Hand-scrawled gaffer-tape, bold pink, set-list energy

const VarA = () => {
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');
  const [form, setForm] = React.useState({
    name: '', email: '', phone: '',
    event_date: '', event_type: '', budget: '',
    venue: '', message: ''
  });

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const onSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setError('');
    setSubmitting(true);
    try {
      await window.submitInquiry?.(form);
      setSubmitted(true);
    } catch (err) {
      setError(err?.message || "Something went wrong. DM us on Instagram and we'll catch it.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div style={varAStyles.page} data-piu-page>
      {/* Tape strips top */}
      <div data-piu-tape style={{ ...varAStyles.tape, top: 22, left: 56, transform: 'rotate(-4deg)' }}>BACKSTAGE</div>
      <div data-piu-tape style={{ ...varAStyles.tape, top: 32, right: 56, transform: 'rotate(3deg)', background: '#000', color: '#FF6A1A' }}>CREW ONLY</div>

      <header style={varAStyles.header} data-piu-header>
        <img src="assets/logo.png" alt="Pipe It Up" style={varAStyles.logo} data-piu-logo />
        <a href="https://www.instagram.com/pipe_it_up_events" target="_blank" rel="noopener" style={varAStyles.igLink} data-piu-iglink>
          <span style={varAStyles.igDot} />
          @pipe_it_up_events
        </a>
      </header>

      {/* HERO */}
      <section style={varAStyles.hero} data-piu-hero>
        <div style={varAStyles.heroLeft} data-piu-heroleft>
          <div style={varAStyles.kicker} data-piu-kicker>// PIPE &amp; DRAPE · OKC · ON TOUR SINCE WHENEVER</div>
          <h1 style={varAStyles.h1} data-piu-h1>
            Pipe it<br />
            <span style={varAStyles.h1Pink}>all</span> the<br />
            way up.
          </h1>
          <p style={varAStyles.lede} data-piu-lede>
            Backdrops, scene sets, photobooth drapes, custom anything.<br />
            Built loud, hung tight, struck clean. By a crew that lives for it.
          </p>
          <div style={varAStyles.ctaRow} data-piu-cta-row>
            <a href="#inquire" style={varAStyles.ctaPrimary} data-piu-cta-primary>Start an inquiry →</a>
            <a href="https://www.instagram.com/pipe_it_up_events" target="_blank" rel="noopener" style={varAStyles.ctaGhost} data-piu-cta-ghost>See the gigs</a>
          </div>
        </div>
        <div style={varAStyles.heroRight} data-piu-heroright>
          <LaunchPoster />
        </div>
      </section>

      {/* MARQUEE */}
      <div style={varAStyles.marquee}>
        <div style={varAStyles.marqueeTrack}>
          {Array.from({ length: 2 }).map((_, i) => (
            <span key={i} style={varAStyles.marqueeInner} data-piu-marquee-inner>
              PIPE • DRAPE • PHOTOBOOTH • SCENE SETS • CUSTOM RIGS • PIPE • DRAPE • PHOTOBOOTH • SCENE SETS • CUSTOM RIGS •&nbsp;
            </span>
          ))}
        </div>
      </div>

      {/* WHAT WE DO */}
      <section style={varAStyles.services} data-piu-services>
        <h2 style={varAStyles.h2} data-piu-h2>The set list.</h2>
        <div style={varAStyles.serviceGrid} data-piu-service-grid>
          {[
            { n: '01', t: 'Backdrops', d: 'Pleated walls, color blocks, statement pieces. Sized to your venue, not ours.' },
            { n: '02', t: 'Scene Sets', d: 'Built scenery for activations, lounges, stages and any weird brief you throw at us.' },
            { n: '03', t: 'Photobooth Drapes', d: 'The thing everyone actually posts. Make it look like you.' },
            { n: '04', t: 'Custom Anything', d: 'If you can sketch it on a napkin, we can probably hang it.' }
          ].map((s) => (
            <div key={s.n} style={varAStyles.serviceCard} data-piu-service-card>
              <div style={varAStyles.serviceNum}>{s.n}</div>
              <div style={varAStyles.serviceTitle} data-piu-service-title>{s.t}</div>
              <div style={varAStyles.serviceDesc} data-piu-service-desc>{s.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* INQUIRY FORM */}
      <section id="inquire" style={varAStyles.formSection} data-piu-form-section>
        <div style={varAStyles.formCard} data-piu-form-card>
          <div style={varAStyles.formHeader} data-piu-form-header>
            <div>
              <div style={varAStyles.formKicker}>// INQUIRY FORM</div>
              <h2 style={varAStyles.formH2} data-piu-form-h2>Tell us about the gig.</h2>
            </div>
            <div style={varAStyles.formBadge}>WE READ EVERY ONE</div>
          </div>

          {!submitted ? (
            <form onSubmit={onSubmit} style={varAStyles.form} data-piu-form>
              <Field label="Your name" required>
                <input style={varAStyles.input} value={form.name} onChange={update('name')} required />
              </Field>
              <Field label="Email" required>
                <input style={varAStyles.input} type="email" value={form.email} onChange={update('email')} required />
              </Field>
              <Field label="Phone" required>
                <input style={varAStyles.input} type="tel" value={form.phone} onChange={update('phone')} required />
              </Field>
              <Field label="Event date">
                <input style={varAStyles.input} type="date" value={form.event_date} onChange={update('event_date')} />
              </Field>
              <Field label="Event type">
                <select style={varAStyles.input} value={form.event_type} onChange={update('event_type')}>
                  <option value="">Pick one…</option>
                  <option>Wedding</option>
                  <option>Brand activation</option>
                  <option>Corporate / conference</option>
                  <option>Private party</option>
                  <option>Concert / festival</option>
                  <option>Photo / film set</option>
                  <option>Something else</option>
                </select>
              </Field>
              <Field label="Budget range">
                <select style={varAStyles.input} value={form.budget} onChange={update('budget')}>
                  <option value="">Pick one…</option>
                  <option>Under $2k</option>
                  <option>$2k – $5k</option>
                  <option>$5k – $10k</option>
                  <option>$10k – $25k</option>
                  <option>$25k+</option>
                  <option>Not sure yet</option>
                </select>
              </Field>
              <Field label="Location / venue" full>
                <input style={varAStyles.input} value={form.venue} onChange={update('venue')} placeholder="Venue name, city, or just an address" />
              </Field>
              <Field label="What are we building?" full>
                <textarea
                  style={{ ...varAStyles.input, minHeight: 120, resize: 'vertical', fontFamily: 'Montserrat, sans-serif' }}
                  value={form.message}
                  onChange={update('message')}
                  placeholder="Tell us the vibe, dimensions, references, weird ideas. Whatever you've got."
                />
              </Field>
              {error && (
                <div style={varAStyles.errorBox}>{error}</div>
              )}
              <button
                type="submit"
                style={{ ...varAStyles.submit, opacity: submitting ? 0.6 : 1, cursor: submitting ? 'wait' : 'pointer' }}
                disabled={submitting}
                data-piu-submit
              >
                {submitting ? 'Sending…' : 'Send it →'}
              </button>
            </form>
          ) : (
            <div style={varAStyles.success}>
              <div style={varAStyles.successMark}>✓</div>
              <h3 style={varAStyles.successH}>Got it. We'll be in touch.</h3>
              <p style={varAStyles.successP}>
                Usually within a day. If it's urgent, hit us on <a href="https://www.instagram.com/pipe_it_up_events" target="_blank" rel="noopener" style={{ color: '#E00180', fontWeight: 700 }}>Instagram</a>.
              </p>
            </div>
          )}
        </div>
      </section>

      {/* FOOTER */}
      <footer style={varAStyles.footer} data-piu-footer>
        <div style={varAStyles.footerLeft}>
          <img src="assets/logo.png" alt="" style={{ width: 56, height: 56, objectFit: 'contain' }} />
          <div>
            <div style={varAStyles.footerTitle}>PIPE IT UP</div>
            <div style={varAStyles.footerSub}>Pipe &amp; drape design, by a crew that gives a damn.</div>
          </div>
        </div>
        <div style={varAStyles.footerRight}>
          <a href="https://www.instagram.com/pipe_it_up_events" target="_blank" rel="noopener" style={varAStyles.footerIg}>
            INSTAGRAM →
          </a>
          <div style={varAStyles.footerYear}>© 2026</div>
        </div>
      </footer>
    </div>
  );
};

const Field = ({ label, children, required, full }) => (
  <label style={{ ...varAStyles.field, gridColumn: full ? '1 / -1' : 'auto' }}>
    <span style={varAStyles.fieldLabel}>
      {label}{required && <span style={{ color: '#E00180' }}> *</span>}
    </span>
    {React.cloneElement(children, { 'data-piu-input': true })}
  </label>
);

const PleatedPanel = ({ color, accent, width = 400, height = 540 }) => (
  <svg width="100%" height="100%" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, display: 'block' }}>
    <defs>
      <pattern id={`pleats-${color.replace('#','')}`} width="22" height={height} patternUnits="userSpaceOnUse">
        <rect width="22" height={height} fill={color} />
        <rect x="0" width="2" height={height} fill="#000" opacity="0.20" />
        <rect x="20" width="2" height={height} fill={accent || '#fff'} opacity="0.14" />
      </pattern>
    </defs>
    <rect width={width} height={height} fill={`url(#pleats-${color.replace('#','')})`} />
  </svg>
);

const LaunchPoster = () => (
  <div style={varAStyles.posterFrame} data-piu-poster>
    {/* Back panel: orange pleats, peeks out behind */}
    <div style={varAStyles.posterBack} data-piu-poster-back>
      <PleatedPanel color="#FF6A1A" />
    </div>

    {/* Foreground: pink pleated drape with "ALL ACCESS PASS" laminate overlay */}
    <div style={varAStyles.posterFront} data-piu-poster-front>
      <PleatedPanel color="#E00180" />

      {/* Top tab: "BACKSTAGE" */}
      <div style={varAStyles.posterTab}>
        <span style={varAStyles.posterTabText}>BACKSTAGE</span>
        <span style={varAStyles.posterTabHole} />
      </div>

      {/* Laminate card */}
      <div style={varAStyles.laminate} data-piu-laminate>
        <div style={varAStyles.laminateTopBar}>
          <span style={varAStyles.laminateBarText}>// ALL ACCESS PASS</span>
          <span style={varAStyles.laminateNumber}>NO. 001</span>
        </div>
        <div style={varAStyles.laminateBig}>PIPE<br />IT UP</div>
        <div style={varAStyles.laminateMeta}>
          <div>
            <div style={varAStyles.laminateMetaLabel}>CREW</div>
            <div style={varAStyles.laminateMetaVal}>OKLAHOMA CITY</div>
          </div>
          <div>
            <div style={varAStyles.laminateMetaLabel}>CALL TIME</div>
            <div style={varAStyles.laminateMetaVal}>ON DEMAND</div>
          </div>
        </div>
        <div style={varAStyles.laminateBarcode}>
          {Array.from({ length: 38 }).map((_, i) => (
            <span key={i} style={{
              display: 'inline-block',
              width: i % 5 === 0 ? 3 : i % 3 === 0 ? 2 : 1,
              height: 28,
              background: '#000',
              marginRight: i % 4 === 0 ? 3 : 1,
              verticalAlign: 'top',
            }} />
          ))}
          <div style={varAStyles.laminateBarcodeText}>PIU-OKC-001</div>
        </div>
      </div>

      {/* Tilted "LAUNCH WEEK" stamp */}
      <div style={varAStyles.launchStamp} data-piu-launch-stamp>
        <div style={varAStyles.launchStampLine1}>LAUNCH</div>
        <div style={varAStyles.launchStampLine2}>WEEK</div>
        <div style={varAStyles.launchStampDate}>04 / 26 / 26</div>
      </div>
    </div>
  </div>
);

const varAStyles = {
  page: {
    width: '100%',
    maxWidth: 1280,
    background: '#F8EDDD',
    fontFamily: 'Montserrat, sans-serif',
    color: '#000',
    position: 'relative',
    overflow: 'hidden',
  },
  tape: {
    position: 'absolute',
    background: '#FF6A1A',
    color: '#000',
    fontFamily: 'Barriecito, cursive',
    fontSize: 18,
    letterSpacing: '0.08em',
    padding: '6px 18px',
    boxShadow: '0 4px 0 rgba(0,0,0,0.15)',
    zIndex: 5,
  },
  header: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '40px 56px 0',
    position: 'relative',
    zIndex: 2,
  },
  logo: { width: 90, height: 90, objectFit: 'contain' },
  igLink: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 10,
    padding: '12px 20px',
    border: '2px solid #000',
    borderRadius: 999,
    color: '#000',
    textDecoration: 'none',
    fontWeight: 700,
    fontSize: 14,
    background: '#fff',
    boxShadow: '4px 4px 0 #000',
  },
  igDot: {
    width: 10, height: 10, borderRadius: '50%',
    background: 'linear-gradient(135deg, #E00180, #FF6A1A)',
  },
  hero: {
    display: 'grid',
    gridTemplateColumns: '1.15fr 1fr',
    gap: 40,
    padding: '56px 56px 80px',
    alignItems: 'end',
  },
  heroLeft: { paddingTop: 40 },
  kicker: {
    fontSize: 13,
    fontFamily: 'Montserrat, monospace',
    fontWeight: 600,
    letterSpacing: '0.12em',
    background: '#000',
    color: '#FF6A1A',
    display: 'inline-block',
    padding: '8px 14px',
    marginBottom: 28,
  },
  h1: {
    fontFamily: 'Barriecito, cursive',
    fontSize: 138,
    lineHeight: 0.92,
    margin: 0,
    color: '#000',
    letterSpacing: '-0.02em',
  },
  h1Pink: { color: '#E00180' },
  lede: {
    fontSize: 19,
    lineHeight: 1.55,
    margin: '36px 0 40px',
    maxWidth: 520,
    color: '#000',
    fontWeight: 500,
  },
  ctaRow: { display: 'flex', gap: 16, alignItems: 'center' },
  ctaPrimary: {
    display: 'inline-block',
    background: '#E00180',
    color: '#fff',
    padding: '20px 32px',
    fontWeight: 700,
    fontSize: 16,
    textDecoration: 'none',
    border: '2px solid #000',
    boxShadow: '6px 6px 0 #000',
    letterSpacing: '0.02em',
  },
  ctaGhost: {
    display: 'inline-block',
    color: '#000',
    padding: '20px 32px',
    fontWeight: 700,
    fontSize: 16,
    textDecoration: 'underline',
    textDecorationThickness: 2,
    textUnderlineOffset: 6,
  },
  heroRight: { position: 'relative', minHeight: 540 },

  posterFrame: {
    position: 'relative',
    width: '100%',
    height: 580,
  },
  posterBack: {
    position: 'absolute',
    inset: 0,
    top: 24,
    left: 28,
    border: '3px solid #000',
    boxShadow: '6px 6px 0 #000',
    overflow: 'hidden',
    transform: 'rotate(-1.5deg)',
  },
  posterFront: {
    position: 'absolute',
    inset: 0,
    border: '3px solid #000',
    boxShadow: '12px 12px 0 #000',
    overflow: 'visible',
  },
  posterTab: {
    position: 'absolute',
    top: -22,
    left: '50%',
    transform: 'translateX(-50%) rotate(-1.5deg)',
    background: '#000',
    color: '#FF6A1A',
    padding: '8px 18px 8px 28px',
    fontFamily: 'Montserrat, monospace',
    fontSize: 12,
    fontWeight: 800,
    letterSpacing: '0.18em',
    border: '2px solid #000',
    display: 'flex',
    alignItems: 'center',
    gap: 12,
    zIndex: 6,
  },
  posterTabText: { lineHeight: 1 },
  posterTabHole: {
    width: 10, height: 10,
    background: '#F8EDDD',
    border: '2px solid #FF6A1A',
    borderRadius: '50%',
  },
  laminate: {
    position: 'absolute',
    top: 56,
    left: '50%',
    transform: 'translateX(-50%) rotate(-2deg)',
    width: '78%',
    background: '#F8EDDD',
    border: '3px solid #000',
    boxShadow: '6px 6px 0 #000',
    padding: '20px 22px 18px',
    zIndex: 4,
  },
  laminateTopBar: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    fontFamily: 'Montserrat, monospace',
    fontSize: 11,
    fontWeight: 700,
    letterSpacing: '0.12em',
    color: '#E00180',
    borderBottom: '2px dashed #000',
    paddingBottom: 8,
    marginBottom: 12,
  },
  laminateBarText: { color: '#E00180' },
  laminateNumber: { color: '#000' },
  laminateBig: {
    fontFamily: 'Barriecito, cursive',
    fontSize: 72,
    lineHeight: 0.92,
    color: '#000',
    letterSpacing: '-0.02em',
    margin: '4px 0 14px',
  },
  laminateMeta: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: 12,
    marginBottom: 14,
  },
  laminateMetaLabel: {
    fontFamily: 'Montserrat, monospace',
    fontSize: 9,
    fontWeight: 700,
    letterSpacing: '0.14em',
    color: '#E00180',
    marginBottom: 2,
  },
  laminateMetaVal: {
    fontSize: 12,
    fontWeight: 700,
    color: '#000',
    letterSpacing: '0.04em',
  },
  laminateBarcode: {
    background: '#fff',
    border: '2px solid #000',
    padding: '10px 12px 6px',
    textAlign: 'center',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
  },
  laminateBarcodeText: {
    fontFamily: 'Montserrat, monospace',
    fontSize: 10,
    fontWeight: 700,
    color: '#000',
    letterSpacing: '0.18em',
    marginTop: 4,
  },
  launchStamp: {
    position: 'absolute',
    bottom: -22,
    right: -18,
    background: '#FF6A1A',
    color: '#000',
    fontFamily: 'Barriecito, cursive',
    padding: '14px 22px 12px',
    transform: 'rotate(8deg)',
    border: '3px solid #000',
    boxShadow: '6px 6px 0 #000',
    textAlign: 'center',
    lineHeight: 1,
    zIndex: 7,
  },
  launchStampLine1: { fontSize: 26, letterSpacing: '0.04em' },
  launchStampLine2: { fontSize: 26, letterSpacing: '0.04em', marginTop: -2 },
  launchStampDate: {
    fontFamily: 'Montserrat, monospace',
    fontSize: 11,
    fontWeight: 800,
    letterSpacing: '0.14em',
    marginTop: 6,
    background: '#000',
    color: '#FF6A1A',
    padding: '4px 8px',
    display: 'inline-block',
  },
  marquee: {
    background: '#000',
    color: '#E00180',
    padding: '18px 0',
    overflow: 'hidden',
    borderTop: '3px solid #000',
    borderBottom: '3px solid #000',
  },
  marqueeTrack: {
    display: 'flex',
    whiteSpace: 'nowrap',
    animation: 'pipeitup-marquee 30s linear infinite',
  },
  marqueeInner: {
    fontFamily: 'Barriecito, cursive',
    fontSize: 32,
    letterSpacing: '0.04em',
  },
  services: {
    padding: '80px 56px',
    background: '#F8EDDD',
  },
  h2: {
    fontFamily: 'Barriecito, cursive',
    fontSize: 80,
    margin: '0 0 48px',
    color: '#000',
    lineHeight: 1,
  },
  serviceGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(2, 1fr)',
    gap: 24,
  },
  serviceCard: {
    background: '#fff',
    border: '3px solid #000',
    padding: '28px 28px 32px',
    boxShadow: '6px 6px 0 #000',
    position: 'relative',
  },
  serviceNum: {
    fontFamily: 'Montserrat, monospace',
    fontSize: 12,
    fontWeight: 700,
    color: '#E00180',
    letterSpacing: '0.15em',
    marginBottom: 10,
  },
  serviceTitle: {
    fontFamily: 'Barriecito, cursive',
    fontSize: 36,
    color: '#000',
    marginBottom: 12,
    lineHeight: 1.05,
  },
  serviceDesc: {
    fontSize: 15,
    lineHeight: 1.55,
    color: '#000',
    fontWeight: 500,
  },
  formSection: {
    padding: '60px 56px 100px',
    background: '#000',
    position: 'relative',
  },
  formCard: {
    background: '#F8EDDD',
    border: '3px solid #F8EDDD',
    padding: '48px 56px 56px',
    position: 'relative',
  },
  formHeader: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    marginBottom: 36,
    borderBottom: '2px dashed #000',
    paddingBottom: 24,
    flexWrap: 'wrap',
    gap: 16,
  },
  formKicker: {
    fontSize: 13,
    fontFamily: 'Montserrat, monospace',
    fontWeight: 600,
    letterSpacing: '0.12em',
    color: '#E00180',
    marginBottom: 8,
  },
  formH2: {
    fontFamily: 'Barriecito, cursive',
    fontSize: 64,
    margin: 0,
    lineHeight: 1,
    color: '#000',
  },
  formBadge: {
    background: '#FF6A1A',
    color: '#000',
    padding: '8px 14px',
    fontWeight: 700,
    fontSize: 12,
    letterSpacing: '0.1em',
    border: '2px solid #000',
  },
  form: {
    display: 'grid',
    gridTemplateColumns: 'repeat(2, 1fr)',
    gap: 20,
  },
  field: {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
  },
  fieldLabel: {
    fontSize: 13,
    fontWeight: 700,
    letterSpacing: '0.06em',
    textTransform: 'uppercase',
    color: '#000',
    fontFamily: 'Montserrat, sans-serif',
  },
  input: {
    border: '2px solid #000',
    background: '#fff',
    padding: '14px 16px',
    fontSize: 15,
    fontFamily: 'Montserrat, sans-serif',
    fontWeight: 500,
    color: '#000',
    outline: 'none',
    width: '100%',
    boxSizing: 'border-box',
    borderRadius: 0,
  },
  submit: {
    gridColumn: '1 / -1',
    marginTop: 12,
    background: '#E00180',
    color: '#fff',
    border: '2px solid #000',
    padding: '20px 32px',
    fontSize: 18,
    fontWeight: 700,
    fontFamily: 'Montserrat, sans-serif',
    cursor: 'pointer',
    boxShadow: '6px 6px 0 #000',
    letterSpacing: '0.02em',
    justifySelf: 'start',
  },
  errorBox: {
    gridColumn: '1 / -1',
    background: '#fff',
    border: '2px solid #E00180',
    color: '#E00180',
    padding: '12px 16px',
    fontWeight: 700,
    fontSize: 14,
    boxShadow: '4px 4px 0 #E00180',
  },
  success: {
    padding: '64px 32px',
    textAlign: 'center',
  },
  successMark: {
    width: 80, height: 80,
    borderRadius: '50%',
    background: '#E00180',
    color: '#fff',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: 44,
    margin: '0 auto 24px',
    border: '3px solid #000',
    boxShadow: '6px 6px 0 #000',
  },
  successH: {
    fontFamily: 'Barriecito, cursive',
    fontSize: 56,
    margin: '0 0 12px',
    color: '#000',
  },
  successP: {
    fontSize: 17,
    color: '#000',
    fontWeight: 500,
  },
  footer: {
    background: '#F8EDDD',
    borderTop: '3px solid #000',
    padding: '32px 56px',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexWrap: 'wrap',
    gap: 16,
  },
  footerLeft: { display: 'flex', alignItems: 'center', gap: 16 },
  footerTitle: {
    fontFamily: 'Barriecito, cursive',
    fontSize: 28,
    color: '#000',
    lineHeight: 1,
  },
  footerSub: {
    fontSize: 13,
    color: '#000',
    marginTop: 4,
    fontWeight: 500,
  },
  footerRight: { display: 'flex', alignItems: 'center', gap: 24 },
  footerIg: {
    color: '#E00180',
    fontWeight: 700,
    textDecoration: 'none',
    fontSize: 14,
    letterSpacing: '0.08em',
  },
  footerYear: {
    fontSize: 13,
    color: '#000',
    fontFamily: 'Montserrat, monospace',
  },
};

window.VarA = VarA;