// Five minimal landing variations for Kyō
// All share: red bg, beige logo, Area Normal (with Inter fallback), email form.

const KYO_RED = '#ff001c';
const KYO_BEIGE = '#f4e2cd';
const KYO_BEIGE_DIM = 'rgba(244, 226, 205, 0.55)';
const KYO_BEIGE_FAINT = 'rgba(244, 226, 205, 0.18)';
const TAGLINE_JP = 'リスボンはまもなく、これまでとは違う味を体験しようとしています';

const TAGLINE_PT = 'Lisboa está quase a provar algo diferente.';
const TAGLINE_PT_LONG = 'Um novo espaço, uma nova forma de viver o sushi — simples, rápido, de rua. O sítio, a data e o menu ainda são segredo.';
const TAGLINE_PT_CTA = 'Deixa o teu e-mail e serás o primeiro a saber quando as portas abrirem.';

const TAGLINE_EN = 'Lisbon is about to taste something different.';
const TAGLINE_EN_LONG = 'A new space, a new way to live sushi — simple, fast, street. The place, the date and the menu are still a secret.';
const TAGLINE_EN_CTA = 'Drop your email and be the first to know when the doors open.';

// ────────────────────────────────────────────────────────────
// Shared form
// Real Mailchimp integration via JSONP (avoids CORS + keeps SPA UX)
// ────────────────────────────────────────────────────────────
const MAILCHIMP_ACTION = 'https://kyosushipop.us5.list-manage.com/subscribe/post-json?u=b4eeba3ca0108f3448e60d1f4&id=a0b121178b&f_id=00134dedf0';
const MAILCHIMP_HONEYPOT = 'b_b4eeba3ca0108f3448e60d1f4_a0b121178b';

function submitToMailchimp(email) {
  return new Promise((resolve) => {
    const cb = '__mc_cb_' + Date.now() + '_' + Math.floor(Math.random() * 1e6);
    const timeout = setTimeout(() => { cleanup(); resolve({ result: 'error', msg: 'Timeout. Tenta outra vez.' }); }, 10000);
    const cleanup = () => {
      clearTimeout(timeout);
      try { delete window[cb]; } catch (e) { window[cb] = undefined; }
      if (script.parentNode) script.parentNode.removeChild(script);
    };
    window[cb] = (data) => { cleanup(); resolve(data); };
    const url = MAILCHIMP_ACTION
      + '&EMAIL=' + encodeURIComponent(email)
      + '&' + MAILCHIMP_HONEYPOT + '='
      + '&c=' + cb;
    const script = document.createElement('script');
    script.src = url;
    script.onerror = () => { cleanup(); resolve({ result: 'error', msg: 'Erro de rede.' }); };
    document.body.appendChild(script);
  });
}

function EmailForm({ variant = 'underline', placeholder = 'email@exemplo.com', cta = 'Subscrever / Subscribe', accent = KYO_BEIGE, fg = KYO_BEIGE, size = 'md' }) {
  const [email, setEmail] = React.useState('');
  const [state, setState] = React.useState('idle'); // idle | sending | done | error
  const [errorMsg, setErrorMsg] = React.useState('');
  const onSubmit = async (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setState('sending');
    const data = await submitToMailchimp(email);
    if (data.result === 'success') {
      setState('done');
    } else {
      // Strip HTML from Mailchimp's error msg
      const clean = (data.msg || 'Erro. Tenta novamente.').replace(/<[^>]+>/g, '').replace(/^\d+\s*-\s*/, '');
      setErrorMsg(clean);
      setState('error');
    }
  };

  const fontSize = size === 'sm' ? 13 : size === 'lg' ? 17 : 15;

  if (state === 'done') {
    return (
      <div style={{
        color: fg, fontSize: 10, fontFamily: 'AreaNormal, Inter, sans-serif',
        letterSpacing: 2.5, textTransform: 'uppercase', fontWeight: 400,
        textAlign: 'center', lineHeight: 1.6,
      }}>
        Obrigado<br/>ありがとう
      </div>
    );
  }

  if (variant === 'underline') {
    return (
      <div>
        <form onSubmit={onSubmit} style={{ display: 'flex', alignItems: 'stretch', gap: 0, borderBottom: `1.5px solid ${accent}`, paddingBottom: 10 }}>
          <input
            type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
            placeholder={placeholder}
            disabled={state === 'sending'}
            style={{
              flex: 1, background: 'transparent', border: 'none', outline: 'none',
              color: fg, fontSize: 11, fontFamily: 'AreaNormal, Inter, sans-serif',
              letterSpacing: 2.5, padding: '4px 0', textTransform: 'uppercase',
              fontWeight: 400,
            }}
          />
          <button type="submit" disabled={state === 'sending'} style={{
            background: 'transparent', border: 'none', color: fg, fontSize,
            fontFamily: 'AreaNormal, Inter, sans-serif', fontWeight: 700,
            letterSpacing: 1, cursor: state === 'sending' ? 'wait' : 'pointer',
            padding: '4px 0 4px 16px', textTransform: 'uppercase', opacity: state === 'sending' ? 0.5 : 1,
          }}>
            {state === 'sending' ? '...' : '→'}
          </button>
        </form>
        {state === 'error' && (
          <div style={{
            color: fg, fontSize: 10, letterSpacing: 1.5,
            fontFamily: 'AreaNormal, Inter, sans-serif', marginTop: 10,
            textTransform: 'uppercase', opacity: 0.85, lineHeight: 1.5,
          }}>✕ {errorMsg}</div>
        )}
      </div>
    );
  }

  if (variant === 'pill') {
    return (
      <form onSubmit={onSubmit} style={{
        display: 'flex', alignItems: 'stretch', gap: 0,
        background: KYO_BEIGE, borderRadius: 999, padding: 6,
      }}>
        <input
          type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
          placeholder={placeholder}
          style={{
            flex: 1, background: 'transparent', border: 'none', outline: 'none',
            color: KYO_RED, fontSize, fontFamily: 'AreaNormal, Inter, sans-serif',
            letterSpacing: 0.3, padding: '10px 18px',
          }}
        />
        <button type="submit" style={{
          background: KYO_RED, color: KYO_BEIGE, border: 'none',
          fontSize, fontFamily: 'AreaNormal, Inter, sans-serif', fontWeight: 700,
          letterSpacing: 1.2, cursor: 'pointer', padding: '10px 22px',
          borderRadius: 999, textTransform: 'uppercase',
        }}>
          {state === 'sending' ? '...' : 'OK'}
        </button>
      </form>
    );
  }

  if (variant === 'boxed') {
    return (
      <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <input
          type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
          placeholder={placeholder}
          style={{
            background: 'transparent', border: `1.5px solid ${accent}`, outline: 'none',
            color: fg, fontSize, fontFamily: 'AreaNormal, Inter, sans-serif',
            letterSpacing: 0.3, padding: '14px 16px',
          }}
        />
        <button type="submit" style={{
          background: KYO_BEIGE, color: KYO_RED, border: 'none',
          fontSize, fontFamily: 'AreaNormal, Inter, sans-serif', fontWeight: 700,
          letterSpacing: 1.2, cursor: 'pointer', padding: '14px 16px',
          textTransform: 'uppercase',
        }}>
          {state === 'sending' ? '送信中...' : cta}
        </button>
      </form>
    );
  }

  // 'inline' — single row, beige bottom border under input AND button
  return (
    <form onSubmit={onSubmit} style={{ display: 'flex', alignItems: 'stretch', gap: 12 }}>
      <input
        type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
        placeholder={placeholder}
        style={{
          flex: 1, background: 'transparent', border: 'none',
          borderBottom: `1.5px solid ${accent}`, outline: 'none',
          color: fg, fontSize, fontFamily: 'AreaNormal, Inter, sans-serif',
          letterSpacing: 0.3, padding: '10px 0',
        }}
      />
      <button type="submit" style={{
        background: KYO_BEIGE, color: KYO_RED, border: 'none',
        fontSize, fontFamily: 'AreaNormal, Inter, sans-serif', fontWeight: 700,
        letterSpacing: 1.4, cursor: 'pointer', padding: '0 28px',
        textTransform: 'uppercase',
      }}>
        {state === 'sending' ? '...' : cta.split(' / ')[0]}
      </button>
    </form>
  );
}

// ────────────────────────────────────────────────────────────
// Reusable: corner ticks (top-left/right etc. small marks)
// ────────────────────────────────────────────────────────────
function CornerTicks({ color = KYO_BEIGE, inset = 24, size = 14 }) {
  const t = { position: 'absolute', borderColor: color, borderStyle: 'solid', width: size, height: size };
  return (
    <>
      <div style={{ ...t, top: inset, left: inset, borderWidth: '1.5px 0 0 1.5px' }} />
      <div style={{ ...t, top: inset, right: inset, borderWidth: '1.5px 1.5px 0 0' }} />
      <div style={{ ...t, bottom: inset, left: inset, borderWidth: '0 0 1.5px 1.5px' }} />
      <div style={{ ...t, bottom: inset, right: inset, borderWidth: '0 1.5px 1.5px 0' }} />
    </>
  );
}

// ────────────────────────────────────────────────────────────
// V1 — Centered classic
// ────────────────────────────────────────────────────────────
function V1Centered({ logoSrc, logoScale = 1, tagline = TAGLINE_PT, w, h }) {
  return (
    <div style={{
      width: w, height: h, background: KYO_RED, position: 'relative',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      padding: 64, color: KYO_BEIGE, fontFamily: 'AreaNormal, Inter, sans-serif',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: 28, left: 32, fontSize: 11, letterSpacing: 2,
        textTransform: 'uppercase', color: KYO_BEIGE_DIM,
      }}>Coming Soon · 近日公開</div>
      <div style={{
        position: 'absolute', top: 28, right: 32, fontSize: 11, letterSpacing: 2,
        textTransform: 'uppercase', color: KYO_BEIGE_DIM,
      }}>Lisboa · 2026</div>

      <img src={logoSrc} style={{ width: `${52 * logoScale}%`, maxWidth: 460, marginBottom: 44 }} />

      <p style={{
        fontSize: 17, lineHeight: 1.5, textAlign: 'center', maxWidth: 480,
        margin: '0 0 36px', color: KYO_BEIGE, opacity: 0.92, textWrap: 'pretty',
      }}>{tagline}</p>

      <div style={{ width: '100%', maxWidth: 420 }}>
        <EmailForm variant="underline" />
      </div>

      <div style={{
        position: 'absolute', bottom: 28, left: 32, fontSize: 11, letterSpacing: 1.5,
        color: KYO_BEIGE_DIM,
      }}>@kyosushipop</div>
      <div style={{
        position: 'absolute', bottom: 28, right: 32, fontSize: 11, letterSpacing: 1.5,
        color: KYO_BEIGE_DIM,
      }}>kyosushipop.com</div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// V2 — Editorial left-aligned, big type
// ────────────────────────────────────────────────────────────
function V2Editorial({ logoSrc, logoScale = 1, tagline = TAGLINE_PT, w, h }) {
  return (
    <div style={{
      width: w, height: h, background: KYO_RED, position: 'relative',
      padding: '64px 72px', color: KYO_BEIGE, fontFamily: 'AreaNormal, Inter, sans-serif',
      overflow: 'hidden', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
    }}>
      {/* top bar */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: KYO_BEIGE_DIM,
      }}>
        <span>KYŌ — 京</span>
        <span>N°001 / Coming Soon</span>
        <span>PT · EN · 日本語</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end' }}>
        <div>
          <img src={logoSrc} style={{ width: `${100 * logoScale}%`, maxWidth: 520 }} />
        </div>
        <div style={{ paddingBottom: 12 }}>
          <div style={{
            fontSize: 11, letterSpacing: 2, textTransform: 'uppercase',
            color: KYO_BEIGE_DIM, marginBottom: 16,
          }}>— Manifesto</div>
          <h2 style={{
            fontSize: 28, lineHeight: 1.2, fontWeight: 700, margin: 0,
            letterSpacing: -0.4, textWrap: 'balance',
          }}>{tagline}</h2>
          <p style={{
            fontSize: 14, lineHeight: 1.6, marginTop: 14, opacity: 0.85, textWrap: 'pretty',
          }}>{TAGLINE_PT_LONG}</p>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end' }}>
        <div style={{ fontSize: 11, letterSpacing: 1.5, color: KYO_BEIGE_DIM, lineHeight: 1.7 }}>
          <div>@kyosushipop</div>
          <div>kyosushipop.com</div>
          <div style={{ marginTop: 8 }}>Lisboa · MMXXVI</div>
        </div>
        <div>
          <div style={{
            fontSize: 11, letterSpacing: 2, textTransform: 'uppercase',
            color: KYO_BEIGE_DIM, marginBottom: 12,
          }}>{TAGLINE_PT_CTA}</div>
          <EmailForm variant="inline" cta="Subscrever" />
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// V3 — Split, logo full-bleed left, form right
// ────────────────────────────────────────────────────────────
function V3Split({ logoSrc, logoScale = 1, tagline = TAGLINE_PT, w, h }) {
  return (
    <div style={{
      width: w, height: h, background: KYO_RED, position: 'relative',
      display: 'grid', gridTemplateColumns: '1.15fr 1fr',
      color: KYO_BEIGE, fontFamily: 'AreaNormal, Inter, sans-serif', overflow: 'hidden',
    }}>
      {/* left: huge logo, breathing */}
      <div style={{
        position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 48, borderRight: `1px solid ${KYO_BEIGE_FAINT}`,
      }}>
        <img src={logoSrc} style={{ width: `${108 * logoScale}%`, maxWidth: 720, transform: 'translateX(-2%)' }} />
        <div style={{
          position: 'absolute', top: 28, left: 32, fontSize: 11, letterSpacing: 2,
          textTransform: 'uppercase', color: KYO_BEIGE_DIM,
        }}>Sushi Pop · スシポップ</div>
        <div style={{
          position: 'absolute', bottom: 28, left: 32, fontSize: 11, letterSpacing: 2,
          color: KYO_BEIGE_DIM,
        }}>EST. 2026 · LISBOA</div>
      </div>

      {/* right: form panel */}
      <div style={{
        padding: '64px 56px', display: 'flex', flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <div style={{
          fontSize: 11, letterSpacing: 2, textTransform: 'uppercase',
          color: KYO_BEIGE_DIM, alignSelf: 'flex-end',
        }}>N°001 / 2026</div>

        <div>
          <div style={{
            fontSize: 11, letterSpacing: 2, textTransform: 'uppercase',
            color: KYO_BEIGE_DIM, marginBottom: 18,
          }}>— Coming Soon</div>
          <h1 style={{
            fontSize: 34, lineHeight: 1.15, fontWeight: 700, margin: 0,
            letterSpacing: -0.5, textWrap: 'balance',
          }}>{tagline}</h1>
          <p style={{
            fontSize: 14, lineHeight: 1.6, marginTop: 18, opacity: 0.85,
            maxWidth: 380, textWrap: 'pretty',
          }}>{TAGLINE_PT_CTA}</p>

          <div style={{ marginTop: 28, maxWidth: 380 }}>
            <EmailForm variant="boxed" cta="Junta-te à lista" />
          </div>
        </div>

        <div style={{
          display: 'flex', justifyContent: 'space-between', fontSize: 11,
          letterSpacing: 1.5, color: KYO_BEIGE_DIM,
        }}>
          <span>@kyosushipop</span>
          <span>kyosushipop.com</span>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// V4 — Full-bleed dramatic, logo HUGE, form floats bottom
// ────────────────────────────────────────────────────────────
function V4FullBleed({ logoSrc, logoScale = 1, tagline = TAGLINE_PT, w, h }) {
  return (
    <div style={{
      width: w, height: h, background: KYO_RED, position: 'relative',
      color: KYO_BEIGE, fontFamily: 'AreaNormal, Inter, sans-serif', overflow: 'hidden',
    }}>
      <CornerTicks inset={24} size={16} color={KYO_BEIGE_DIM} />

      {/* huge logo, slightly cropped to feel oversized */}
      <img src={logoSrc} style={{
        position: 'absolute', top: '8%', left: '50%',
        transform: 'translateX(-50%)',
        width: `${88 * logoScale}%`, maxWidth: 900,
      }} />

      {/* floating bottom card */}
      <div style={{
        position: 'absolute', left: '50%', bottom: 56, transform: 'translateX(-50%)',
        width: 'min(560px, 78%)',
        background: 'transparent',
      }}>
        <p style={{
          fontSize: 16, lineHeight: 1.5, textAlign: 'center', margin: '0 0 22px',
          opacity: 0.92, textWrap: 'pretty',
        }}>{tagline}</p>
        <EmailForm variant="pill" placeholder="o teu email · your email" />
      </div>

      {/* meta */}
      <div style={{
        position: 'absolute', top: 32, left: 0, right: 0, display: 'flex',
        justifyContent: 'center', gap: 32, fontSize: 11, letterSpacing: 2.5,
        textTransform: 'uppercase', color: KYO_BEIGE_DIM,
      }}>
        <span>京</span>
        <span>Coming Soon</span>
        <span>Lisboa</span>
        <span>MMXXVI</span>
        <span>京</span>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// V5 — Japanese motif, vertical text + tategaki feel
// Responsive: ≤640px collapses to a single-column mobile layout
// ────────────────────────────────────────────────────────────
function V5Japanese({ logoSrc, logoScale = 1, tagline = TAGLINE_PT, w, h }) {
  const isMobile = w <= 640;
  const isCompact = w > 640 && w < 900;

  // ── Mobile layout: no side strips, vertical stack with safe-area aware paddings
  if (isMobile) {
    // proportional vertical scale: small phones (≤375) get tighter type
    const tight = w <= 375;
    return (
      <div style={{
        width: w, height: h, background: KYO_RED, position: 'relative',
        color: KYO_BEIGE, fontFamily: 'AreaNormal, Inter, sans-serif', overflow: 'hidden',
        display: 'flex', flexDirection: 'column',
        paddingTop: 'max(24px, env(safe-area-inset-top))',
        paddingBottom: 'max(24px, env(safe-area-inset-bottom))',
        paddingLeft: 'max(20px, env(safe-area-inset-left))',
        paddingRight: 'max(20px, env(safe-area-inset-right))',
      }}>
        {/* watermark */}
        <div style={{
          position: 'absolute', top: '46%', left: '50%',
          transform: 'translate(-50%, -50%)',
          fontSize: 'min(80vw, 420px)', fontWeight: 700, color: KYO_BEIGE,
          opacity: 0.05, lineHeight: 1, letterSpacing: -8, userSelect: 'none',
          pointerEvents: 'none',
        }}>京</div>

        {/* top meta row */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontSize: 10, letterSpacing: 2, textTransform: 'uppercase',
          color: KYO_BEIGE_DIM, position: 'relative', zIndex: 1,
        }}>
          <span>京 · Kyō</span>
          <span>N°001</span>
        </div>

        {/* main centered content */}
        <div style={{
          flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center',
          justifyContent: 'center', position: 'relative', zIndex: 1,
          gap: tight ? 18 : 22,
        }}>
          <img src={logoSrc} style={{
            width: `${(tight ? 72 : 80) * logoScale}%`, maxWidth: 320,
            display: 'block',
          }} />

          <div style={{
            fontSize: 10, letterSpacing: 2.5, textTransform: 'uppercase',
            color: KYO_BEIGE_DIM, textAlign: 'center', lineHeight: 1.6,
          }}>
            Coming Soon<br/>近日公開
          </div>

          <p style={{
            fontSize: 10, lineHeight: 1.6, textAlign: 'center',
            margin: 0, textWrap: 'pretty', color: '#000',
            maxWidth: 320, fontWeight: 400,
            letterSpacing: 2.5, textTransform: 'uppercase',
          }}>{tagline}</p>

          <p lang="ja" style={{
            fontSize: tight ? 11 : 12, lineHeight: 1.7, textAlign: 'center',
            margin: 0, color: KYO_BEIGE_DIM, textWrap: 'pretty',
            maxWidth: 300, fontWeight: 400, letterSpacing: 0.5,
          }}>{TAGLINE_JP}</p>

          <div style={{ width: '100%', maxWidth: 360, marginTop: tight ? 4 : 8 }}>
            <EmailForm variant="underline" placeholder="Quer ser o primeiro a saber? · 最初に知りたい？" size="md" />
          </div>
        </div>

        {/* bottom meta */}
        <div style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
          fontSize: 10, letterSpacing: 1.8, color: KYO_BEIGE_DIM,
          position: 'relative', zIndex: 1, textTransform: 'uppercase',
        }}>
          <span>@kyosushipop</span>
          <span>kyosushipop.com</span>
          <span style={{ marginTop: 2, opacity: 0.7 }}>Lisboa · MMXXVI</span>
        </div>
      </div>
    );
  }

  // ── Desktop / tablet: original 3-column layout, narrower strips on compact
  const stripW = isCompact ? 56 : 80;
  return (
    <div style={{
      width: w, height: h, background: KYO_RED, position: 'relative',
      color: KYO_BEIGE, fontFamily: 'AreaNormal, Inter, sans-serif',
      overflow: 'hidden', display: 'grid', gridTemplateColumns: `${stripW}px 1fr ${stripW}px`,
    }}>
      {/* left vertical strip */}
      <div style={{
        borderRight: `1px solid ${KYO_BEIGE_FAINT}`,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-between',
        padding: '32px 0',
      }}>
        <div style={{
          writingMode: 'vertical-rl', fontSize: 11, letterSpacing: 4,
          textTransform: 'uppercase', color: KYO_BEIGE_DIM,
        }}>Sushi Pop · スシポップ · Lisboa</div>
        <div style={{ fontSize: 22, color: KYO_BEIGE, opacity: 0.4, fontWeight: 700 }}>京</div>
      </div>

      {/* center */}
      <div style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        padding: '48px 32px', position: 'relative',
      }}>
        {/* big background katakana */}
        <div style={{
          position: 'absolute', top: '50%', left: '50%',
          transform: 'translate(-50%, -50%)',
          fontSize: 'min(38vw, 360px)', fontWeight: 700, color: KYO_BEIGE,
          opacity: 0.06, lineHeight: 1, letterSpacing: -10, userSelect: 'none',
          pointerEvents: 'none',
        }}>京</div>

        <img src={logoSrc} style={{ width: `${56 * logoScale}%`, maxWidth: 420, marginBottom: 36, position: 'relative', zIndex: 1 }} />

        <div style={{
          fontSize: 11, letterSpacing: 3, textTransform: 'uppercase',
          color: KYO_BEIGE_DIM, marginBottom: 14, position: 'relative', zIndex: 1,
        }}>Coming Soon · 近日公開</div>

        <p style={{
          fontSize: 11, lineHeight: 1.6, textAlign: 'center', maxWidth: 460,
          margin: '0 0 14px', textWrap: 'pretty', color: '#000',
          position: 'relative', zIndex: 1,
          letterSpacing: 3, textTransform: 'uppercase', fontWeight: 400,
        }}>{tagline}</p>

        <p lang="ja" style={{
          fontSize: 13, lineHeight: 1.7, textAlign: 'center', maxWidth: 460,
          margin: '0 0 32px', color: KYO_BEIGE_DIM, textWrap: 'pretty',
          position: 'relative', zIndex: 1, letterSpacing: 0.5,
        }}>{TAGLINE_JP}</p>

        <div style={{ width: '100%', maxWidth: 440, position: 'relative', zIndex: 1 }}>
          <EmailForm variant="underline" placeholder="Quer ser o primeiro a saber? · 最初に知りたい？" />
        </div>
      </div>

      {/* right vertical strip */}
      <div style={{
        borderLeft: `1px solid ${KYO_BEIGE_FAINT}`,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-between',
        padding: '32px 0',
      }}>
        <div style={{ fontSize: 22, color: KYO_BEIGE, opacity: 0.4, fontWeight: 700 }}>壽</div>
        <div style={{
          writingMode: 'vertical-rl', fontSize: 11, letterSpacing: 4,
          textTransform: 'uppercase', color: KYO_BEIGE_DIM,
        }}>@kyosushipop · kyosushipop.com</div>
      </div>
    </div>
  );
}

Object.assign(window, { V1Centered, V2Editorial, V3Split, V4FullBleed, V5Japanese, EmailForm });