// OGS LP — メインページの全セクションとスタイル。
// ライブ産業のグラフィック言語: コンデンス書体の大見出し、罫線、赤の差し色。

// reCAPTCHA v3 のサイトキー（公開鍵。フロントに出てよい値）。
// チェックボックス不要・スコア判定型。Google reCAPTCHA 管理画面で v3 として発行し、
// ここと index.html の api.js?render= の両方に貼る。シークレットキーは
// Vercel の環境変数 RECAPTCHA_SECRET_KEY に登録する（フロントには出さない）。
const RECAPTCHA_SITE_KEY = '6LfcsCMtAAAAADdIxV0XZ1KPkqtRNi3Uq2z2bw0G';

const VC_CSS = `
.vc-root {
  --paper: #FFFFFF;
  --ink: #0B0B09;
  --red: oklch(0.56 0.22 29);
  --gray: #56544E;
  --gray2: #8C897F;
  width: 1280px; background: var(--paper); color: var(--ink);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.vc-root .cond { font-family: 'Archivo', 'Helvetica Neue', sans-serif; font-stretch: 62.5%; }
.vc-root .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.vc-root .red { color: var(--red); }
.vc-pad { padding-left: 64px; padding-right: 64px; }

/* header */
.vc-header { position: sticky; top: 0; z-index: 100; background: var(--paper); display: flex; align-items: center; justify-content: space-between; height: 70px; border-bottom: 3px solid var(--ink); }
.vc-wordmark { display: flex; align-items: baseline; gap: 14px; }
.vc-wordmark .mk { font-size: 32px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.vc-wordmark .sub { font-size: 10px; letter-spacing: 0.18em; color: var(--gray); }
.vc-nav { display: flex; align-items: center; gap: 30px; }
.vc-nav a { font-size: 11px; letter-spacing: 0.14em; color: var(--ink); text-decoration: none; font-weight: 500; }
.vc-cta, .vc-nav a.vc-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--red); color: #fff; padding: 12px 22px; font-size: 12px; letter-spacing: 0.1em; text-decoration: none; font-weight: 700; }

/* hero */
.vc-hero-strip { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.22em; color: var(--ink); padding: 22px 0 36px; font-weight: 500; }
.vc-display { font-weight: 800; font-size: 282px; line-height: 0.84; letter-spacing: -0.01em; text-transform: uppercase; margin: 0 0 0 -10px; }
.vc-display .by { font-size: 36px; font-weight: 700; letter-spacing: 0.02em; color: var(--red); vertical-align: 196px; margin-left: 18px; text-transform: none; }
.vc-hero-bar { margin-top: 48px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); display: flex; gap: 40px; padding: 14px 0; font-size: 11px; letter-spacing: 0.14em; font-weight: 500; }
.vc-hero-bar span i { font-style: normal; color: var(--red); margin-right: 10px; }
.vc-hero-foot { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: start; padding: 52px 0 88px; }
.vc-hero-foot h1 { font-size: 46px; font-weight: 900; line-height: 1.55; letter-spacing: 0.01em; margin: 0; }
.vc-hero-foot p { font-size: 14px; line-height: 2.0; color: var(--gray); margin: 6px 0 0; }

/* marquee */
.vc-marquee { background: var(--ink); color: var(--paper); overflow: hidden; padding: 18px 0; }
.vc-marquee .track { display: flex; width: max-content; animation: vc-scroll 80s linear infinite; }
.vc-marquee .item { white-space: nowrap; font-size: 28px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.vc-marquee .sl { color: var(--red); padding: 0 0.6em; font-weight: 400; }
@keyframes vc-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .vc-marquee .track { animation: none; } }

/* section scaffold */
.vc-root [id] { scroll-margin-top: 80px; }
.vc-sec { border-top: 3px solid var(--ink); padding-top: 24px; padding-bottom: 88px; }
.vc-label { font-size: 11px; letter-spacing: 0.18em; color: var(--red); font-weight: 500; margin-bottom: 40px; }
.vc-label em { font-style: normal; color: var(--gray2); margin-left: 16px; letter-spacing: 0.3em; }
.vc-h2 { font-size: 52px; font-weight: 900; line-height: 1.4; letter-spacing: 0.01em; margin: 0 0 52px; }

/* service rows */
.vc-service > div { display: grid; grid-template-columns: 110px 330px 1fr; gap: 40px; align-items: start; padding: 34px 0; border-top: 1px solid var(--ink); }
.vc-service .n { font-size: 68px; font-weight: 800; line-height: 0.9; letter-spacing: -0.01em; }
.vc-service h3 { font-size: 27px; font-weight: 900; margin: 0 0 8px; }
.vc-service .en { font-size: 11px; letter-spacing: 0.24em; color: var(--gray2); }
.vc-service p { font-size: 14px; line-height: 1.95; color: var(--gray); margin: 0; padding-top: 6px; }

/* experience — pass cards */
.vc-pass { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vc-pass > div { background: var(--ink); color: var(--paper); padding: 26px 28px 24px; min-height: 330px; display: flex; flex-direction: column; }
.vc-pass .top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 14px; }
.vc-pass .tag { font-size: 11px; letter-spacing: 0.26em; }
.vc-pass .idx { font-size: 20px; font-weight: 800; color: var(--red); }
.vc-pass h3 { font-size: 31px; font-weight: 900; margin: 30px 0 14px; }
.vc-pass p { font-size: 13px; line-height: 1.9; color: rgba(255,255,255,0.66); margin: 0; }
.vc-pass .foot { margin-top: auto; padding-top: 22px; font-size: 9px; letter-spacing: 0.3em; color: rgba(255,255,255,0.4); }

/* formats */
.vc-formats > div { display: flex; align-items: baseline; gap: 32px; padding: 17px 0; border-top: 1px solid var(--ink); }
.vc-formats .n { font-size: 12px; color: var(--red); width: 40px; font-weight: 500; }
.vc-formats .t { font-size: 35px; font-weight: 900; letter-spacing: 0.01em; }
.vc-formats-note { font-size: 13px; color: var(--gray); margin: 30px 0 0; }

/* numbers — ink band */
.vc-numbers { background: var(--ink); color: var(--paper); padding-top: 64px; padding-bottom: 72px; }
.vc-numbers .vc-label { margin-bottom: 48px; }
.vc-numbers .grid { display: grid; grid-template-columns: auto auto auto; justify-content: space-between; gap: 48px; }
.vc-numbers .n { font-size: 230px; font-weight: 800; line-height: 0.84; letter-spacing: -0.015em; }
.vc-numbers .n span { font-size: 110px; color: var(--red); }
.vc-numbers .n .suf { font-size: 42px; color: rgba(255,255,255,0.5); font-weight: 600; letter-spacing: 0.01em; margin-left: 2px; }
.vc-numbers .n .suf-short { display: none; }
.vc-numbers .l { font-size: 11.5px; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); margin-top: 22px; font-weight: 500; }

/* pricing */
.vc-price > div { display: grid; grid-template-columns: 1fr 300px; align-items: center; padding: 18px 0; border-top: 1px solid var(--ink); }
.vc-price .k { font-size: 15px; font-weight: 500; }
.vc-price .v { font-size: 62px; font-weight: 800; text-align: right; line-height: 1; }
.vc-price .fee { grid-template-columns: 300px 1fr; padding: 28px 0; border-top: 3px solid var(--ink); }
.vc-price .fee .v { font-size: 18px; font-weight: 900; line-height: 1.7; }
.vc-price-note { font-size: 12.5px; color: var(--gray2); margin: 26px 0 0; line-height: 1.9; }

/* works — lineup poster */
.vc-works { text-align: center; }
.vc-works .vc-label { text-align: left; }
.vc-lineup { margin: 24px auto 0; max-width: 1100px; }
.vc-lineup .t1 { font-size: 50px; font-weight: 900; line-height: 1.6; letter-spacing: 0.01em; }
.vc-lineup .t2 { font-size: 29px; font-weight: 900; line-height: 1.85; margin-top: 26px; }
.vc-lineup .t3 { font-size: 19px; font-weight: 700; line-height: 2.0; margin-top: 24px; color: var(--ink); }
.vc-lineup .sl { color: var(--red); font-weight: 400; padding: 0 0.4em; }
.vc-works .more { font-size: 11px; letter-spacing: 0.22em; color: var(--gray); margin-top: 48px; }
.vc-works .more b { color: var(--red); font-weight: 700; }
.vc-works .more a { color: var(--red); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.vc-works .more a svg { vertical-align: -1px; }
.vc-works .more a:hover, .vc-works .more a:hover b { color: var(--ink); }

/* faq */
.vc-faq > div { display: grid; grid-template-columns: 70px 1fr; gap: 22px; padding: 24px 0; border-top: 1px solid var(--ink); }
.vc-faq .n { font-size: 12px; color: var(--red); padding-top: 4px; font-weight: 500; }
.vc-faq h3 { font-size: 17px; font-weight: 900; margin: 0 0 10px; }
.vc-faq p { font-size: 14px; line-height: 1.9; color: var(--gray); margin: 0; max-width: 760px; }

/* company */
.vc-co { display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: start; }
.vc-co .mk { font-size: 84px; font-weight: 800; line-height: 0.9; text-transform: uppercase; }
.vc-co-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 11px; letter-spacing: 0.18em; color: var(--red); text-decoration: none; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.vc-co .note { font-size: 13px; line-height: 2.0; color: var(--gray); margin: 20px 0 0; }
.vc-co-rows > div { display: grid; grid-template-columns: 150px 1fr; padding: 15px 0; border-top: 1px solid var(--ink); font-size: 14px; }
.vc-co-rows > div:last-child { border-bottom: 1px solid var(--ink); }
.vc-co-rows .k { color: var(--gray2); letter-spacing: 0.08em; }

/* contact — red band */
.vc-contact { background: var(--red); color: #fff; padding-top: 88px; padding-bottom: 96px; }
.vc-contact-grid { display: grid; grid-template-columns: 1fr 460px; gap: 96px; }
.vc-contact .label { font-size: 11px; letter-spacing: 0.18em; color: rgba(255,255,255,0.75); margin-bottom: 40px; font-weight: 500; }
.vc-contact h2 { font-size: 54px; font-weight: 900; line-height: 1.45; margin: 0 0 28px; }
.vc-contact .d { font-size: 14px; line-height: 2.0; color: rgba(255,255,255,0.85); margin: 0; max-width: 480px; }
.vc-form { display: flex; flex-direction: column; gap: 28px; }
.vc-field label { display: block; font-size: 10px; letter-spacing: 0.2em; color: rgba(255,255,255,0.75); margin-bottom: 8px; font-family: 'JetBrains Mono', monospace; }
.vc-field input, .vc-field textarea {
  width: 100%; box-sizing: border-box; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.55);
  color: #fff; font-family: inherit; font-size: 15px; padding: 8px 0 12px; outline: none; resize: none;
}
.vc-submit { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.85); cursor: pointer; padding: 15px 30px; font-size: 13px; letter-spacing: 0.08em; font-family: inherit; font-weight: 700; transition: background .15s, color .15s; }
.vc-submit:hover { background: #fff; color: var(--red); }
.vc-root[data-contact="ink"] .vc-submit:hover { color: var(--ink); }
.vc-submit:disabled { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.45); cursor: not-allowed; }
.vc-submit:disabled:hover { background: transparent; color: rgba(255,255,255,0.45); }
.vc-submit:disabled .ogs-arrow, .vc-submit:disabled svg { opacity: 0.45; }

/* footer */
.vc-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; padding-bottom: 24px; border-top: 3px solid var(--ink); font-size: 10px; letter-spacing: 0.18em; color: var(--gray2); }
.vc-footer a { color: var(--gray2); text-decoration: none; }
.vc-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* tweak modes */
.vc-root[data-red="min"] .vc-label,
.vc-root[data-red="min"] .vc-formats .n,
.vc-root[data-red="min"] .vc-faq .n,
.vc-root[data-red="min"] .vc-hero-bar span i,
.vc-root[data-red="min"] .vc-display .by,
.vc-root[data-red="min"] .vc-co-link,
.vc-root[data-red="min"] .vc-works .more b { color: var(--ink); }
.vc-root[data-red="min"] .vc-pass .idx,
.vc-root[data-red="min"] .vc-numbers .n span { color: var(--paper); }
.vc-root[data-red="min"] .vc-marquee .sl { color: rgba(255,255,255,0.45); }
.vc-root[data-red="min"] .vc-lineup .sl { color: var(--gray2); }
.vc-root[data-contact="ink"] .vc-contact { background: var(--ink); }
.vc-lineup .flat { font-size: 30px; font-weight: 900; line-height: 1.95; }

/* ============================================================
   MOBILE — viewport ≤ 800px renders at native scale (zoom 1),
   so these are true responsive overrides, not a shrunk desktop.
   ============================================================ */
@media (max-width: 800px) {
  .vc-root { width: 100% !important; overflow-x: hidden; }
  .vc-pad { padding-left: 20px; padding-right: 20px; }

  /* header — compact: wordmark + CTA only */
  .vc-header { height: 56px; border-bottom-width: 2px; }
  .vc-wordmark { gap: 8px; }
  .vc-wordmark .mk { font-size: 23px; }
  .vc-wordmark .sub { display: none; }
  .vc-nav { gap: 0; }
  .vc-nav a:not(.vc-cta) { display: none; }
  .vc-nav a.vc-cta { padding: 13px 16px; font-size: 11px; gap: 7px; min-height: 44px; box-sizing: border-box; }

  /* hero */
  .vc-hero-strip { font-size: 9px; letter-spacing: 0.14em; padding: 16px 0 20px; gap: 14px; }
  .vc-display { font-size: 19vw; line-height: 0.86; margin-left: -3px; }
  .vc-display .by { font-size: 18px; vertical-align: baseline; margin-left: 8px; display: inline-block; }
  .vc-hero-bar { margin-top: 26px; flex-wrap: wrap; gap: 10px 22px; padding: 14px 0; font-size: 10px; }
  .vc-hero-foot { grid-template-columns: 1fr; gap: 22px; padding: 30px 0 56px; }
  .vc-hero-foot h1 { font-size: 29px; line-height: 1.5; }
  .vc-hero-foot p { font-size: 13.5px; line-height: 1.95; }

  /* marquee */
  .vc-marquee { padding: 13px 0; }
  .vc-marquee .item { font-size: 19px; }

  /* sections */
  .vc-root [id] { scroll-margin-top: 64px; }
  .vc-sec { padding-bottom: 56px; }
  .vc-label { margin-bottom: 26px; font-size: 10px; }
  .vc-label em { margin-left: 10px; letter-spacing: 0.18em; }
  .vc-h2 { font-size: 30px; line-height: 1.35; margin-bottom: 32px; }

  /* service */
  .vc-service > div { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .vc-service .n { font-size: 44px; }
  .vc-service h3 { font-size: 22px; }
  .vc-service p { padding-top: 4px; }

  /* experience */
  .vc-pass { grid-template-columns: 1fr; gap: 14px; }
  .vc-pass > div { min-height: 0; padding: 22px 22px 20px; }
  .vc-pass h3 { font-size: 26px; margin: 22px 0 12px; }

  /* formats */
  .vc-formats > div { gap: 18px; padding: 14px 0; }
  .vc-formats .n { width: 28px; }
  .vc-formats .t { font-size: 24px; }

  /* numbers */
  .vc-numbers { padding-top: 48px; padding-bottom: 52px; }
  .vc-numbers .grid { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .vc-numbers .grid > div { min-width: 0; }
  .vc-numbers .n { font-size: 68px; white-space: nowrap; }
  .vc-numbers .n span { font-size: 32px; }
  .vc-numbers .n .suf { font-size: 15px; margin-left: 1px; }
  .vc-numbers .n .suf-full { display: none; }
  .vc-numbers .n .suf-short { display: inline; }
  .vc-numbers .l { margin-top: 12px; }

  /* pricing */
  .vc-price > div { grid-template-columns: 1fr auto; gap: 16px; padding: 16px 0; align-items: baseline; }
  .vc-price .v { font-size: 34px; }
  .vc-price .fee { grid-template-columns: 1fr; gap: 10px; }
  .vc-price .fee .v { font-size: 16px; text-align: left !important; }

  /* works */
  .vc-lineup .t1 { font-size: 27px; line-height: 1.55; }
  .vc-lineup .t2 { font-size: 19px; line-height: 1.75; margin-top: 18px; }
  .vc-lineup .t3 { font-size: 15px; line-height: 1.85; margin-top: 16px; }
  .vc-lineup .flat { font-size: 19px; line-height: 1.8; }
  .vc-works .more { margin-top: 32px; letter-spacing: 0.14em; line-height: 1.9; }

  /* faq */
  .vc-faq > div { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }

  /* company */
  .vc-co { grid-template-columns: 1fr; gap: 32px; }
  .vc-co .mk { font-size: 58px; }
  .vc-co-rows > div { grid-template-columns: 110px 1fr; font-size: 13px; }

  /* contact */
  .vc-contact { padding-top: 56px; padding-bottom: 60px; }
  .vc-contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .vc-contact h2 { font-size: 31px; line-height: 1.4; }
  /* 16px inputs prevent iOS focus-zoom; taller tap targets */
  .vc-field input, .vc-field textarea { font-size: 16px; padding: 10px 0 14px; }
  .vc-submit { padding: 16px 28px; }

  /* footer */
  .vc-footer { flex-direction: column; align-items: flex-start; gap: 8px; line-height: 1.6; }
}


/* form extras */
.vc-agree { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,0.92); cursor: pointer; }
.vc-agree input { width: 16px; height: 16px; accent-color: #fff; cursor: pointer; margin: 0; flex-shrink: 0; }
.vc-agree a { color: #fff; text-underline-offset: 3px; }
.vc-form-error { margin: 0; font-size: 13px; color: #fff; font-weight: 700; }
.vc-field-error { display: block; margin-top: 6px; font-size: 12px; color: #fff; font-weight: 700; }
.vc-field input[aria-invalid="true"], .vc-field textarea[aria-invalid="true"] { border-bottom-color: #fff; }
`;

// Lineup tiers — headliner sizing, like a festival poster.
// 実績・マーキーともに OGS.artists を唯一の出典にする（順序もこの配列どおり）。
// tiered 表示用に先頭から 5 / 10 / 残り のティアに分割。
const VC_T1 = OGS.artists.slice(0, 5);
const VC_T2 = OGS.artists.slice(5, 15);
const VC_T3 = OGS.artists.slice(15);

function VCNames({ list }) {
  return (
    <span>
      {list.map((a, i) => (
        <span key={a}>{a}{i < list.length - 1 && <span className="sl">／</span>}</span>
      ))}
    </span>
  );
}

// Hero copy options — toggled from the Tweaks panel.
const VC_HERO = {
  subete: 'グッズ販売に必要なこと、\nすべて。',
  urakata: '600公演の、\n裏方。',
  soba: '公演の、そばに。',
};

// お問い合わせフォームの下書き（入力値・同意状態）を sessionStorage に保持する。
const CONTACT_DRAFT_KEY = 'ogs-contact-draft';
function loadContactDraft() {
  try { return JSON.parse(sessionStorage.getItem(CONTACT_DRAFT_KEY)) || {}; }
  catch (e) { return {}; }
}
function saveContactDraft(draft) {
  try { sessionStorage.setItem(CONTACT_DRAFT_KEY, JSON.stringify(draft)); } catch (e) {}
}
function clearContactDraft() {
  try { sessionStorage.removeItem(CONTACT_DRAFT_KEY); } catch (e) {}
}

function OGSLandingPage({ heroCopy = 'subete', lineup = 'tiered', marqueeSec = 80, redAmount = 'standard', contactBand = 'red' }) {
  const C = OGS;
  const marquee = C.artists;
  const heroLines = (VC_HERO[heroCopy] || VC_HERO.subete).split('\n');
  // 入力値は sessionStorage に退避し、別ページ（プライバシーポリシー等）へ
  // 遷移して戻っても保持する。タブを閉じると消える。
  const [agree, setAgree] = React.useState(() => !!loadContactDraft().agree);
  const [values, setValues] = React.useState(() => loadContactDraft().values || {});
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const [errorMsg, setErrorMsg] = React.useState('');
  const [touched, setTouched] = React.useState({}); // フォーカスが外れた項目だけエラー表示

  // values / agree が変わるたび下書きを保存
  React.useEffect(() => {
    saveContactDraft({ values, agree });
  }, [values, agree]);

  // メール形式の簡易チェック（ローカル部@ドメイン.TLD）
  const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  const validate = () => {
    const errs = {};
    C.contact.fields.forEach((f) => {
      const v = (values[f.l] || '').trim();
      if (f.req && !v) { errs[f.l] = C.contact.errorRequired; return; }
      if (f.type === 'email' && v && !EMAIL_RE.test(v)) { errs[f.l] = C.contact.errorEmail; }
    });
    if (C.contact.textareaReq && !(values.__message || '').trim()) {
      errs.__message = C.contact.errorRequired;
    }
    return errs;
  };

  // 毎レンダリングで検証。errors は送信可否の判定に、touched は表示制御に使う。
  const errors = validate();
  const isFormValid = Object.keys(errors).length === 0 && agree;
  const handleBlur = (key) => setTouched((t) => (t[key] ? t : { ...t, [key]: true }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    setErrorMsg('');
    if (!isFormValid) return; // 送信ボタンは無効化されているが念のため
    if (!window.grecaptcha || !window.grecaptcha.execute) {
      setStatus('error'); setErrorMsg(C.contact.errorSend); return;
    }
    setStatus('sending');
    try {
      // v3: 送信時にトークンを取得（チェックボックス不要）
      const token = await window.grecaptcha.execute(RECAPTCHA_SITE_KEY, { action: 'contact' });
      const fields = C.contact.fields.map((f) => ({ label: f.l, value: values[f.l] || '' }));
      fields.push({ label: C.contact.textarea, value: values.__message || '' });
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ token, fields }),
      });
      if (!res.ok) throw new Error('send failed: ' + res.status);
      clearContactDraft();
      setStatus('sent');
    } catch (err) {
      setStatus('error');
      setErrorMsg(C.contact.errorSend);
    }
  };
  return (
    <div className="vc-root ogs2-measure" data-screen-label="C · Production"
      data-red={redAmount === 'min' ? 'min' : undefined}
      data-contact={contactBand === 'ink' ? 'ink' : undefined}>
      <style>{VC_CSS}</style>

      <header className="vc-header vc-pad">
        <div className="vc-wordmark">
          <span className="mk cond">OGS</span>
          <span className="sub mono">OFFICIAL GOODS STORE — BY RENI</span>
        </div>
        <nav className="vc-nav mono">
          <a href="#vc-service">SERVICE</a>
          <a href="#vc-pricing">PRICING</a>
          <a href="#vc-works">WORKS</a>
          <a href="#vc-faq">FAQ</a>
          <a className="vc-cta" href="#vc-contact">お問い合わせ <OGSArrow></OGSArrow></a>
        </nav>
      </header>

      <section className="vc-pad">
        <div className="vc-hero-strip mono">
          <span>ARTIST MD SOLUTION</span>
          <span>EST. 2015 — TOKYO, JP</span>
        </div>
        <div className="vc-display cond">OFFICIAL<br></br>GOODS<br></br>STORE<span className="by">by RENI</span></div>
        <div className="vc-hero-bar mono">
          <span><i>●</i>600+ STORES</span>
          <span><i>●</i>600+ SHOWS / YEAR</span>
          <span><i>●</i>¥0 INITIAL COST</span>
          <span><i>●</i>REVENUE SHARE MODEL</span>
        </div>
        <div className="vc-hero-foot">
          <h1>{heroLines.map((l, i) => (
            <React.Fragment key={i}>{l}{i < heroLines.length - 1 && <br></br>}</React.Fragment>
          ))}</h1>
          <p>{C.intro}</p>
        </div>
      </section>

      <div className="vc-marquee" aria-hidden="true">
        <div className="track" style={{ animationDuration: marqueeSec + 's' }}>
          {[0, 1].map((k) => (
            <span className="item cond" key={k}>
              {marquee.map((a) => (
                <span key={a}>{a}<span className="sl">／</span></span>
              ))}
            </span>
          ))}
        </div>
      </div>

      <section className="vc-sec vc-pad" id="vc-service" style={{ borderTop: 'none' }}>
        <div className="vc-label mono">(01)&nbsp;&nbsp;SERVICE<em>一気通貫</em></div>
        <h2 className="vc-h2">立ち上げから運営まで、<br></br>ぜんぶ。</h2>
        <div className="vc-service">
          {C.service.map((s) => (
            <div key={s.n}>
              <div className="n cond">{s.n}</div>
              <div>
                <h3>{s.t}</h3>
                <div className="en mono">{s.en}</div>
              </div>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="vc-sec vc-pad">
        <div className="vc-label mono">(02)&nbsp;&nbsp;EXPERIENCE<em>受取のかたち</em></div>
        <h2 className="vc-h2">並ばない物販へ。</h2>
        <div className="vc-pass">
          {C.experience.map((e) => (
            <div key={e.n}>
              <div className="top">
                <span className="tag mono">{e.tag}</span>
                <span className="idx cond">({e.n})</span>
              </div>
              <h3>{e.t}</h3>
              <p>{e.d}</p>
              <div className="foot mono">OGS — PICKUP SYSTEM {e.n}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="vc-sec vc-pad">
        <div className="vc-label mono">(03)&nbsp;&nbsp;FORMATS<em>扱える販売</em></div>
        <div className="vc-formats">
          {C.formats.map((f, i) => (
            <div key={f}>
              <span className="n mono">{String(i + 1).padStart(2, '0')}</span>
              <span className="t">{f}</span>
            </div>
          ))}
        </div>
        <p className="vc-formats-note">{C.formatsNote}</p>
      </section>

      <section className="vc-numbers vc-pad">
        <div className="vc-label mono">(04)&nbsp;&nbsp;NUMBERS<em style={{ color: 'rgba(255,255,255,0.4)' }}>実績</em></div>
        <div className="grid cond">
          {C.stats.map((s) => (
            <div key={s.l}>
              <div className="n">{s.n}<span>{s.u}</span>{s.suf ? (
                <React.Fragment>
                  <span className="suf suf-full">{s.suf}</span>
                  {s.sufShort ? <span className="suf suf-short">{s.sufShort}</span> : null}
                </React.Fragment>
              ) : null}</div>
              <div className="l" style={{ fontFamily: "'Zen Kaku Gothic New', sans-serif", fontStretch: '100%' }}>{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="vc-sec vc-pad" id="vc-pricing" style={{ borderTop: 'none' }}>
        <div className="vc-label mono">(05)&nbsp;&nbsp;PRICING<em>料金</em></div>
        <h2 className="vc-h2">初期費用ゼロ。<br></br>成果報酬だけ。</h2>
        <div className="vc-price">
          {C.pricing.map(([k, v]) => (
            <div key={k}><span className="k">{k}</span><span className="v cond">{v}</span></div>
          ))}
          <div className="fee"><span className="k">{C.fee.t}</span><span className="v" style={{ textAlign: 'right' }}>{C.fee.d}</span></div>
        </div>
        <p className="vc-price-note">{C.pricingNote}</p>
      </section>

      <section className="vc-sec vc-pad vc-works" id="vc-works">
        <div className="vc-label mono">(06)&nbsp;&nbsp;WORKS<em>運営実績</em></div>
        <div className="vc-lineup">
          {lineup === 'flat' ? (
            <div className="flat"><VCNames list={[...VC_T1, ...VC_T2, ...VC_T3]}></VCNames></div>
          ) : (
            <React.Fragment>
              <div className="t1"><VCNames list={VC_T1}></VCNames></div>
              <div className="t2"><VCNames list={VC_T2}></VCNames></div>
              <div className="t3"><VCNames list={VC_T3}></VCNames></div>
            </React.Fragment>
          )}
        </div>
        <div className="more mono">AND MORE — <a href="stores.html"><b>600+ STORES SINCE 2015</b> <OGSArrow size={10}></OGSArrow></a>　※過去の運営実績を含みます</div>
      </section>

      <section className="vc-sec vc-pad" id="vc-faq">
        <div className="vc-label mono">(07)&nbsp;&nbsp;FAQ<em>よくある質問</em></div>
        <div className="vc-faq">
          {C.faq.map((f, i) => (
            <div key={f.q}>
              <span className="n mono">Q.{String(i + 1).padStart(2, '0')}</span>
              <div>
                <h3>{f.q}</h3>
                <p>{f.a}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="vc-sec vc-pad">
        <div className="vc-label mono">(08)&nbsp;&nbsp;COMPANY<em>運営会社</em></div>
        <div className="vc-co">
          <div>
            <div className="mk cond">RENI</div>
            <p className="note">{C.companyNote}</p>
            <a className="vc-co-link mono" href="https://www.reni.co.jp/" target="_blank" rel="noopener noreferrer">WWW.RENI.CO.JP <OGSArrow></OGSArrow></a>
          </div>
          <div className="vc-co-rows">
            {C.company.map(([k, v]) => (
              <div key={k}><span className="k">{k}</span><span>{v}</span></div>
            ))}
          </div>
        </div>
      </section>

      <section className="vc-contact vc-pad" id="vc-contact">
        <div className="vc-contact-grid">
          <div>
            <div className="label mono">(09)&nbsp;&nbsp;CONTACT</div>
            <h2>まずは、公演の<br></br>予定から。</h2>
            <p className="d" style={{ whiteSpace: 'pre-line' }}>{C.contact.d}</p>
          </div>
          {status === 'sent' ? (
            <div className="vc-form"><p className="d">{C.contact.sent}</p></div>
          ) : (
          <form className="vc-form" noValidate onSubmit={handleSubmit}>
            {C.contact.fields.map((f) => (
              <div className="vc-field" key={f.l}>
                <label>{f.l}{f.opt ? '（任意）' : ''}</label>
                <input type={f.type === 'email' ? 'email' : 'text'}
                  value={values[f.l] || ''}
                  aria-invalid={touched[f.l] && errors[f.l] ? 'true' : undefined}
                  onChange={(e) => setValues((v) => ({ ...v, [f.l]: e.target.value }))}
                  onBlur={() => handleBlur(f.l)}></input>
                {touched[f.l] && errors[f.l] ? <span className="vc-field-error">{errors[f.l]}</span> : null}
              </div>
            ))}
            <div className="vc-field">
              <label>{C.contact.textarea}</label>
              <textarea rows="3" value={values.__message || ''}
                aria-invalid={touched.__message && errors.__message ? 'true' : undefined}
                onChange={(e) => setValues((v) => ({ ...v, __message: e.target.value }))}
                onBlur={() => handleBlur('__message')}></textarea>
              {touched.__message && errors.__message ? <span className="vc-field-error">{errors.__message}</span> : null}
            </div>
            <label className="vc-agree">
              <input type="checkbox" checked={agree} onChange={(e) => setAgree(e.target.checked)}></input>
              <span>{C.contact.agree}（<a href="privacy.html">内容を読む</a>）</span>
            </label>
            {status === 'error' && errorMsg ? <p className="vc-form-error">{errorMsg}</p> : null}
            <button type="submit" className="vc-submit" disabled={!isFormValid || status === 'sending'}>
              {status === 'sending' ? C.contact.sending : C.contact.submit} <OGSArrow></OGSArrow>
            </button>
          </form>
          )}
        </div>
      </section>

      <footer className="vc-footer vc-pad mono">
        <span>OGS — OFFICIAL GOODS STORE</span>
        <span>{OGS.footer.by}</span>
        <span><a href="privacy.html">プライバシーポリシー</a> / <a href="legal.html">特定商取引法に基づく表記</a></span>
        <span>{OGS.footer.c}</span>
      </footer>
    </div>
  );
}

Object.assign(window, { OGSLandingPage, VC_HERO });