/* 案1「食卓篇」— 上品・和モダン、ベージュ×墨×朱、明朝主体
   食卓の延長としての愛犬ごはん、というストーリーで構成 */

function LP_Shokutaku({ tweaks }) {
  const scrollerRef = React.useRef(null);
  const fontSerif = tweaks.font === 'sans'
    ? '"Zen Kaku Gothic New", system-ui, sans-serif'
    : '"Noto Serif JP", "Hiragino Mincho ProN", serif';
  const fontSans = '"Zen Kaku Gothic New", system-ui, sans-serif';

  const palette = {
    beige: { bg: '#f6f1e6', bg2: '#ebe2cf', ink: '#2a2520', sub: '#6b6259', accent: '#a83f2a', soft: '#fdfaf3', line: '#d8cdb8' },
    green: { bg: '#eef0e6', bg2: '#dde2cf', ink: '#1f2a22', sub: '#5e6b5d', accent: '#4a6b3f', soft: '#f5f7ee', line: '#c8d1b6' },
    mono:  { bg: '#f0eee9', bg2: '#e2dfd9', ink: '#1a1a1a', sub: '#666',    accent: '#a83f2a', soft: '#fafaf7', line: '#d4d1cb' },
  }[tweaks.color] || {};
  const c = palette;

  // Hero parallax based on scroll
  const [parallax, setParallax] = React.useState(0);
  React.useEffect(() => {
    const el = scrollerRef.current;
    if (!el) return;
    const onScroll = () => setParallax(el.scrollTop);
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <MobileChrome bg={c.soft} innerRef={scrollerRef}>
      <style>{`
        .v1 { font-family: ${fontSerif}; color: ${c.ink}; background: ${c.soft}; }
        .v1 .sans { font-family: ${fontSans}; }
        .v1 .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
        .v1 .accent { color: ${c.accent}; }
        .v1 .line { background: ${c.line}; }
        @keyframes v1-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
        @keyframes v1-heart-bounce {
          0%   { transform: translate(0,0) rotate(-8deg) scale(1); }
          20%  { transform: translate(-4px,-14px) rotate(-14deg) scale(1.15); }
          40%  { transform: translate(2px,-22px) rotate(6deg) scale(1.05); }
          55%  { transform: translate(8px,-10px) rotate(12deg) scale(1.2); }
          75%  { transform: translate(-2px,-4px) rotate(-4deg) scale(0.95); }
          100% { transform: translate(0,0) rotate(-8deg) scale(1); }
        }
        @keyframes v1-heart-pulse {
          0%,100% { transform: scale(1); opacity: 0.85; }
          50%     { transform: scale(1.25); opacity: 1; }
        }
        @keyframes v1-heart-rise {
          0%   { transform: translate(0,10px) scale(0.4); opacity: 0; }
          15%  { opacity: 1; }
          85%  { opacity: 1; }
          100% { transform: translate(-12px,-60px) scale(1); opacity: 0; }
        }
        @keyframes v1-heart-rise2 {
          0%   { transform: translate(0,10px) scale(0.5); opacity: 0; }
          20%  { opacity: 1; }
          80%  { opacity: 1; }
          100% { transform: translate(14px,-70px) scale(1.1); opacity: 0; }
        }
      `}</style>

      <div className="v1" style={{ paddingTop: 0 }}>
        {/* ============ HERO ============ */}
        <section style={{ position: 'relative', background: c.soft, overflow: 'hidden' }}>
          {/* tiny brand bar */}
          <div className="sans" style={{
            display: 'flex', justifyContent: 'space-between',
            padding: '52px 24px 16px',
            fontSize: 10, letterSpacing: '0.32em', color: c.sub,
          }}>
            <span>ONE LIFE</span>
            <span>EST. 2021</span>
          </div>

          {/* full-bleed hero image with subtle parallax */}
          <div style={{ position: 'relative', overflow: 'hidden' }}>
            <img
              src="assets/hero.png"
              alt="いのちのごはん — 余計なものは一切含まない、国産無添加ドッグフード"
              style={{
                display: 'block', width: '100%', height: 'auto',
                transform: `translateY(${parallax * -0.05}px) scale(1.02)`,
                transition: 'transform 0.05s linear',
              }}
            />
          </div>

          {/* tagline below image */}
          <div style={{ padding: '36px 28px 56px', position: 'relative' }}>
            <div style={{ display: 'flex', gap: 18, alignItems: 'flex-start' }}>
              <div style={{
                writingMode: 'vertical-rl', fontSize: 10, letterSpacing: '0.4em',
                color: c.sub, paddingTop: 4,
              }}>
                <span className="sans">ヒューマングレード</span>
              </div>
              <div style={{ flex: 1 }}>
                <h1 style={{
                  margin: 0, fontSize: 34, lineHeight: 1.35, letterSpacing: '0.04em',
                  fontWeight: 500,
                }}>
                  <span style={{ display: 'block' }}>家族の食卓から、</span>
                  <span style={{ display: 'block' }}>愛犬の<span className="accent">お皿</span>へ。</span>
                </h1>
                <div className="line" style={{ width: 40, height: 1, marginTop: 22 }} />
                <p className="sans" style={{ marginTop: 18, fontSize: 13, lineHeight: 1.95, color: c.sub, fontWeight: 400 }}>
                  「食べられる」ではなく、<br/>
                  <span style={{ color: c.ink, fontWeight: 600 }}>私たちが普段、食べているもの</span>を。
                </p>
              </div>
            </div>

            {/* scroll indicator */}
            <div className="sans" style={{ marginTop: 36, display: 'flex', alignItems: 'center', gap: 12, color: c.sub, fontSize: 10, letterSpacing: '0.3em' }}>
              <div className="line" style={{ width: 30, height: 1 }}/>
              SCROLL
            </div>
          </div>
        </section>

        {/* ============ 悩み・問いかけ ============ */}
        <section style={{ padding: '80px 28px', background: c.bg }}>
          <Reveal>
            <div className="sans" style={{ fontSize: 10, letterSpacing: '0.3em', color: c.accent, marginBottom: 16 }}>
              ─ A QUESTION
            </div>
          </Reveal>
          <Reveal delay={120}>
            <h2 style={{ margin: 0, fontSize: 30, lineHeight: 1.6, letterSpacing: '0.04em', fontWeight: 500 }}>
              その<span className="accent">ひと粒</span>、<br/>
              ご自身でも<br/>口にできますか？
            </h2>
          </Reveal>
          <Reveal delay={240}>
            <p className="sans" style={{ marginTop: 28, fontSize: 13, lineHeight: 2.0, color: c.sub }}>
              市販の多くは「人間が食べられる食材」を謳います。<br/>
              けれど私たちが本当にお届けしたいのは、<br/>
              <span style={{ color: c.ink, fontWeight: 600 }}>普段の食卓に並ぶ食材そのもの</span>でつくる、ごはんです。
            </p>
          </Reveal>

          {/* 食材タグ流れ */}
          <Reveal delay={360}>
            <div style={{ marginTop: 40, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['生鶏胸肉', '生鶏レバー', '大麦', 'もちきび', 'もちあわ', 'アマランサス', '白ごま', '煮干し', 'おから', '野菜', '果物'].map((t, i) => (
                <span key={t} className="sans" style={{
                  padding: '8px 14px', border: `1px solid ${c.line}`,
                  fontSize: 11, color: c.ink, background: c.soft, borderRadius: 999,
                }}>{t}</span>
              ))}
            </div>
          </Reveal>
        </section>

        {/* ============ メインコピー：人間が普段食べている食材 ============ */}
        <section style={{ padding: '100px 28px 80px', background: c.soft, position: 'relative' }}>
          <Reveal>
            <div className="sans" style={{ fontSize: 10, letterSpacing: '0.3em', color: c.sub, marginBottom: 12 }}>
              01 — OUR PROMISE
            </div>
          </Reveal>

          <Reveal delay={100}>
            <h2 style={{ margin: 0, fontSize: 36, lineHeight: 1.45, letterSpacing: '0.04em', fontWeight: 500 }}>
              「食べられる」<br/>ではなく、<br/>
              <span className="accent">「食べている」</span>。
            </h2>
          </Reveal>

          {/* 比較カード */}
          <Reveal delay={220}>
            <div style={{ marginTop: 44, display: 'grid', gap: 14 }}>
              <div style={{
                padding: '22px 22px',
                background: c.bg, opacity: 0.7,
                position: 'relative',
              }}>
                <div className="sans" style={{ fontSize: 10, letterSpacing: '0.2em', color: c.sub, marginBottom: 8 }}>
                  ── よくあるドッグフード
                </div>
                <div style={{ fontSize: 17, lineHeight: 1.6, color: c.sub, textDecoration: 'line-through', textDecorationColor: c.sub, textDecorationThickness: 1 }}>
                  人間が食べられる食材
                </div>
                <div className="sans" style={{ fontSize: 11, color: c.sub, marginTop: 6 }}>
                  = 法律上、口にしても問題ない原料
                </div>
              </div>
              <div style={{
                padding: '22px 22px',
                background: c.ink, color: c.soft,
                position: 'relative',
                border: `1px solid ${c.ink}`,
              }}>
                <div className="sans" style={{ fontSize: 10, letterSpacing: '0.2em', color: c.accent, marginBottom: 8 }}>
                  ── いのちのごはん
                </div>
                <div style={{ fontSize: 22, lineHeight: 1.5, fontWeight: 500 }}>
                  人間が<span style={{ color: c.accent }}>普段食べている</span>食材
                </div>
                <div className="sans" style={{ fontSize: 11, color: 'rgba(255,255,255,.7)', marginTop: 8, lineHeight: 1.7 }}>
                  = 私たちの食卓に毎日並ぶ、<br/>新鮮な鶏胸肉や五穀そのもの。
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={340}>
            <p className="sans" style={{ marginTop: 36, fontSize: 13, lineHeight: 2.0, color: c.sub }}>
              出来上がったごはんを、<br/>
              <span style={{ color: c.ink, fontWeight: 600 }}>私たち人間も口にできる</span>。<br/>
              それが、いのちのごはんの基準です。
            </p>
          </Reveal>
        </section>

        {/* ============ 数字で見る ============ */}
        <section style={{ padding: '80px 28px', background: c.bg2, color: c.ink }}>
          <div className="sans" style={{ fontSize: 10, letterSpacing: '0.3em', color: c.sub, marginBottom: 28 }}>
            02 — BY THE NUMBERS
          </div>
          <div style={{ display: 'grid', gap: 36 }}>
            {[
              { n: 50, suf: '%', label: 'タンパク質配合率', sub: '生鶏胸肉と生鶏レバー' },
              { n: 0, suf: '', label: '香料・着色料・保存料・酸化防止剤', sub: '余計なものは一切含まない' },
              { n: 5, suf: '種', label: 'こだわりの五穀', sub: '大麦・もちきび・もちあわ・アマランサス・白ごま' },
              { n: 16, suf: '年', label: 'わんこと共に', sub: '5頭の愛犬と歩んできた年月から' },
            ].map((row, i) => (
              <Reveal key={i} delay={i * 80}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, borderBottom: `1px solid ${c.line}`, paddingBottom: 28 }}>
                  <div style={{ flexShrink: 0, width: 90 }}>
                    <div style={{ fontSize: 56, lineHeight: 0.9, fontWeight: 500, letterSpacing: '-0.03em' }}>
                      <CountUp to={row.n} />
                      <span style={{ fontSize: 22 }}>{row.suf}</span>
                    </div>
                  </div>
                  <div style={{ flex: 1, paddingTop: 10 }}>
                    <div className="sans" style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>{row.label}</div>
                    <div className="sans" style={{ fontSize: 11, color: c.sub, lineHeight: 1.6 }}>{row.sub}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </section>

        {/* ============ 食材ギャラリー（横スクロール） ============ */}
        <section style={{ padding: '80px 0 80px', background: c.soft }}>
          <Reveal>
            <div style={{ padding: '0 28px' }}>
              <div className="sans" style={{ fontSize: 10, letterSpacing: '0.3em', color: c.sub, marginBottom: 12 }}>
                03 — INGREDIENTS
              </div>
              <h2 style={{ margin: 0, fontSize: 28, lineHeight: 1.5, letterSpacing: '0.04em', fontWeight: 500 }}>
                食卓から、<br/>そのまま。
              </h2>
            </div>
          </Reveal>

          <div style={{ marginTop: 36, overflowX: 'auto', WebkitOverflowScrolling: 'touch', paddingBottom: 12 }}>
            <div style={{ display: 'flex', gap: 14, padding: '0 28px' }}>
              {[
                { jp: '生鶏胸肉', en: 'Fresh chicken breast', note: '日々食べる新鮮なもののみ', img: 'assets/chicken-breast.png' },
                { jp: '生鶏レバー', en: 'Fresh chicken liver', note: '良質なタンパク源', img: 'assets/chicken-liver.png' },
                { jp: '五穀', en: 'Five grains', note: '大麦・もちきび・もちあわ\nアマランサス・白ごま', img: 'assets/grains.png' },
                { jp: '野菜・果物', en: 'Veggies & fruits', note: 'ビタミン・ミネラル', img: 'assets/veggies.png' },
                { jp: '煮干し・昆布・鰹節', en: 'Niboshi, Kombu & Katsuo', note: 'ミネラルとアミノ酸', img: 'assets/niboshi.png' },
                { jp: 'おから・米ぬか', en: 'Okara & Komenuka', note: '植物性タンパク質と食物繊維', img: 'assets/okara.png' },
              ].map((it, i) => (
                <div key={i} style={{ width: 280, flexShrink: 0 }}>
                  {it.img ? (
                    <div style={{ aspectRatio: '4 / 3', overflow: 'hidden', background: c.bg }}>
                      <img src={it.img} alt={it.jp} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                    </div>
                  ) : (
                    <Placeholder ratio="4 / 3" kind={it.en.toLowerCase()} tone="warm" accent={c.accent} />
                  )}
                  <div style={{ paddingTop: 14 }}>
                    <div className="sans" style={{ fontSize: 9, letterSpacing: '0.2em', color: c.sub, textTransform: 'uppercase' }}>
                      0{i+1} · {it.en}
                    </div>
                    <div style={{ fontSize: 18, fontWeight: 500, marginTop: 4 }}>{it.jp}</div>
                    <div className="sans" style={{ fontSize: 11, color: c.sub, marginTop: 4, whiteSpace: 'pre-line', lineHeight: 1.6 }}>
                      {it.note}
                    </div>
                  </div>
                </div>
              ))}
              <div style={{ width: 28, flexShrink: 0 }} />
            </div>
          </div>
        </section>

        {/* ============ 製法のこだわり ============ */}
        <section style={{ padding: '80px 28px', background: c.ink, color: c.soft }}>
          <Reveal>
            <div className="sans" style={{ fontSize: 10, letterSpacing: '0.3em', color: 'rgba(255,255,255,.5)', marginBottom: 16 }}>
              04 — CRAFTSMANSHIP
            </div>
          </Reveal>
          <Reveal delay={100}>
            <h2 style={{ margin: 0, fontSize: 32, lineHeight: 1.45, letterSpacing: '0.04em', fontWeight: 500 }}>
              <span className="accent">無水製造</span>という、<br/>
              ひとつの答え。
            </h2>
          </Reveal>

          <Reveal delay={200}>
            <div style={{ marginTop: 36, marginBottom: 36, overflow: 'hidden', background: '#000' }}>
              <img src="assets/all-ingredients.png" alt="いのちのごはんの全食材" style={{ width: '100%', height: 'auto', display: 'block' }} />
            </div>
          </Reveal>

          <div style={{ display: 'grid', gap: 28 }}>
            {[
              { t: '無水製造', d: '製造過程で水を一切使わず、食材本来の水分のみで凝縮。栄養素を逃さない。' },
              { t: 'ノンオイルコーティング', d: '喰いつき向上のためだけの油は使わない。素材そのままの香り。' },
              { t: '小麦グルテンフリー', d: 'アレルギーをお持ちの子にも安心して。' },
            ].map((it, i) => (
              <Reveal key={i} delay={i * 100}>
                <div style={{ display: 'flex', gap: 18, paddingBottom: 24, borderBottom: '1px solid rgba(255,255,255,.12)' }}>
                  <div className="sans" style={{ fontSize: 10, color: c.accent, paddingTop: 4 }}>0{i+1}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 19, fontWeight: 500, marginBottom: 8 }}>{it.t}</div>
                    <div className="sans" style={{ fontSize: 12, lineHeight: 1.8, color: 'rgba(255,255,255,.7)' }}>{it.d}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </section>

        {/* ============ 開発ストーリー ============ */}
        <section style={{ padding: '90px 28px', background: c.soft }}>
          <Reveal>
            <div className="sans" style={{ fontSize: 10, letterSpacing: '0.3em', color: c.sub, marginBottom: 16 }}>
              05 — OUR STORY
            </div>
          </Reveal>
          <Reveal delay={100}>
            <h2 style={{ margin: 0, fontSize: 28, lineHeight: 1.55, letterSpacing: '0.04em', fontWeight: 500 }}>
              一日でも、<br/>一分一秒でも、<br/>長く一緒に。
            </h2>
          </Reveal>
          <Reveal delay={220}>
            <p className="sans" style={{ marginTop: 28, fontSize: 13, lineHeight: 2.1, color: c.sub }}>
              わんこと共に生活して16年。<br/>
              5頭の愛犬と過ごす私たちもずっと同じ気持ちで、<br/>
              生活を共にしてきました。<br/><br/>
              食事面で、その願いに寄り添えないか。<br/>
              そんな想いから、<br/>
              <span style={{ color: c.ink, fontWeight: 600 }}>「本当に与えたいごはん」</span>づくりが始まりました。
            </p>
          </Reveal>
          <Reveal delay={340}>
            <div style={{ marginTop: 44, position: 'relative', padding: '20px 8px 8px' }}>
              {/* decorative paw prints scattered */}
              <svg viewBox="0 0 24 24" width="22" height="22" style={{ position: 'absolute', top: -4, left: 18, color: c.accent, opacity: 0.5, transform: 'rotate(-18deg)' }} fill="currentColor"><ellipse cx="12" cy="16" rx="5" ry="4.5"/><ellipse cx="5.5" cy="9" rx="2" ry="2.6" transform="rotate(-20 5.5 9)"/><ellipse cx="9.5" cy="5" rx="1.8" ry="2.4"/><ellipse cx="14.5" cy="5" rx="1.8" ry="2.4"/><ellipse cx="18.5" cy="9" rx="2" ry="2.6" transform="rotate(20 18.5 9)"/></svg>
              <svg viewBox="0 0 24 24" width="16" height="16" style={{ position: 'absolute', top: 32, right: 14, color: c.accent, opacity: 0.35, transform: 'rotate(22deg)' }} fill="currentColor"><ellipse cx="12" cy="16" rx="5" ry="4.5"/><ellipse cx="5.5" cy="9" rx="2" ry="2.6" transform="rotate(-20 5.5 9)"/><ellipse cx="9.5" cy="5" rx="1.8" ry="2.4"/><ellipse cx="14.5" cy="5" rx="1.8" ry="2.4"/><ellipse cx="18.5" cy="9" rx="2" ry="2.6" transform="rotate(20 18.5 9)"/></svg>
              <svg viewBox="0 0 24 24" width="14" height="14" style={{ position: 'absolute', bottom: 80, left: 6, color: c.accent, opacity: 0.4, transform: 'rotate(-30deg)' }} fill="currentColor"><ellipse cx="12" cy="16" rx="5" ry="4.5"/><ellipse cx="5.5" cy="9" rx="2" ry="2.6" transform="rotate(-20 5.5 9)"/><ellipse cx="9.5" cy="5" rx="1.8" ry="2.4"/><ellipse cx="14.5" cy="5" rx="1.8" ry="2.4"/><ellipse cx="18.5" cy="9" rx="2" ry="2.6" transform="rotate(20 18.5 9)"/></svg>
              <svg viewBox="0 0 24 24" width="18" height="18" style={{ position: 'absolute', bottom: 30, right: 4, color: c.accent, opacity: 0.45, transform: 'rotate(15deg)' }} fill="currentColor"><ellipse cx="12" cy="16" rx="5" ry="4.5"/><ellipse cx="5.5" cy="9" rx="2" ry="2.6" transform="rotate(-20 5.5 9)"/><ellipse cx="9.5" cy="5" rx="1.8" ry="2.4"/><ellipse cx="14.5" cy="5" rx="1.8" ry="2.4"/><ellipse cx="18.5" cy="9" rx="2" ry="2.6" transform="rotate(20 18.5 9)"/></svg>

              {/* image with soft shadow + glow background */}
              <div style={{ position: 'relative' }}>
                {/* soft radial glow */}
                <div style={{
                  position: 'absolute', inset: '-8% -4%',
                  background: `radial-gradient(ellipse at center, ${c.bg2} 0%, transparent 65%)`,
                  filter: 'blur(8px)', zIndex: 0,
                }}/>
                <img src="assets/5peke-heart.png" alt="5頭のペキニーズ" style={{
                  width: '100%', display: 'block', position: 'relative', zIndex: 1,
                  filter: `drop-shadow(0 12px 20px ${c.ink}22)`,
                }} />
                {/* small heart accent floating top right */}
                {/* main bouncing heart */}
                <svg viewBox="0 0 24 24" width="36" height="36" style={{
                  position: 'absolute', top: '6%', right: '8%', zIndex: 3,
                  color: c.accent,
                  animation: 'v1-heart-bounce 2.4s ease-in-out infinite',
                  transformOrigin: 'center',
                  filter: `drop-shadow(0 4px 6px ${c.ink}33)`,
                }} fill="currentColor">
                  <path d="M12 21s-7-4.5-9.5-9.2C.8 8 2.7 4 6.3 4c2 0 3.5 1 4.7 2.6C12.2 5 13.7 4 15.7 4c3.6 0 5.5 4 3.8 7.8C19 16.5 12 21 12 21z"/>
                </svg>
                {/* small pulsing heart */}
                <svg viewBox="0 0 24 24" width="18" height="18" style={{
                  position: 'absolute', top: '18%', right: '22%', zIndex: 3,
                  color: c.accent, opacity: 0.85,
                  animation: 'v1-heart-pulse 1.6s ease-in-out infinite',
                  transformOrigin: 'center',
                }} fill="currentColor">
                  <path d="M12 21s-7-4.5-9.5-9.2C.8 8 2.7 4 6.3 4c2 0 3.5 1 4.7 2.6C12.2 5 13.7 4 15.7 4c3.6 0 5.5 4 3.8 7.8C19 16.5 12 21 12 21z"/>
                </svg>
                {/* rising heart 1 */}
                <svg viewBox="0 0 24 24" width="14" height="14" style={{
                  position: 'absolute', top: '14%', right: '38%', zIndex: 3,
                  color: c.accent,
                  animation: 'v1-heart-rise 3.2s ease-out infinite',
                  animationDelay: '0.4s',
                }} fill="currentColor">
                  <path d="M12 21s-7-4.5-9.5-9.2C.8 8 2.7 4 6.3 4c2 0 3.5 1 4.7 2.6C12.2 5 13.7 4 15.7 4c3.6 0 5.5 4 3.8 7.8C19 16.5 12 21 12 21z"/>
                </svg>
                {/* rising heart 2 */}
                <svg viewBox="0 0 24 24" width="12" height="12" style={{
                  position: 'absolute', top: '22%', left: '10%', zIndex: 3,
                  color: c.accent,
                  animation: 'v1-heart-rise2 3.6s ease-out infinite',
                  animationDelay: '1.2s',
                }} fill="currentColor">
                  <path d="M12 21s-7-4.5-9.5-9.2C.8 8 2.7 4 6.3 4c2 0 3.5 1 4.7 2.6C12.2 5 13.7 4 15.7 4c3.6 0 5.5 4 3.8 7.8C19 16.5 12 21 12 21z"/>
                </svg>
              </div>

              {/* caption ribbon */}
              <div style={{
                marginTop: 22, textAlign: 'center', position: 'relative',
              }}>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 12,
                  padding: '10px 22px',
                  background: c.bg, border: `1px solid ${c.line}`,
                  borderRadius: 999,
                }}>
                  <span style={{ width: 5, height: 5, borderRadius: 99, background: c.accent }}/>
                  <span className="sans" style={{ fontSize: 11, letterSpacing: '0.2em', color: c.ink, fontWeight: 600 }}>
                    家族の5頭
                  </span>
                  <span style={{ width: 5, height: 5, borderRadius: 99, background: c.accent }}/>
                </div>
                <div className="sans" style={{ marginTop: 12, fontSize: 11, lineHeight: 1.8, color: c.sub, fontStyle: 'italic' }}>
                  ── このごはんは、<br/>この子たちのために生まれました。
                </div>
              </div>
            </div>
          </Reveal>
        </section>

        {/* ============ 原材料・成分 ============ */}
        <section style={{ padding: '80px 28px', background: c.bg }}>
          <Reveal>
            <div className="sans" style={{ fontSize: 10, letterSpacing: '0.3em', color: c.sub, marginBottom: 16 }}>
              06 — INGREDIENTS LIST
            </div>
          </Reveal>
          <Reveal delay={80}>
            <h2 style={{ margin: 0, fontSize: 26, lineHeight: 1.5, letterSpacing: '0.04em', fontWeight: 500 }}>
              すべて、<br/>正直に書きます。
            </h2>
          </Reveal>

          <Reveal delay={180}>
            <div style={{ marginTop: 36, padding: '28px 22px', background: c.soft, border: `1px solid ${c.line}` }}>
              <div className="sans" style={{ fontSize: 11, letterSpacing: '0.2em', color: c.sub, marginBottom: 14 }}>
                ── 原材料
              </div>
              <div className="sans" style={{ fontSize: 13, lineHeight: 2.0, color: c.ink }}>
                鶏肉（胸肉、レバー）、五穀（大麦、もちきび、もちあわ、アマランサス、白ごま）、さつまいも、かぼちゃ、人参、りんご、キャベツ、大根、白菜、小松菜、コーンフラワー、米ぬか、おから、煮干し、昆布、椎茸、鰹節
              </div>

              <div className="line" style={{ height: 1, margin: '28px 0' }} />

              <div className="sans" style={{ fontSize: 11, letterSpacing: '0.2em', color: c.sub, marginBottom: 14 }}>
                ── 成分（保証分析値）
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 16px' }}>
                {[
                  ['粗たんぱく質', '36.5% 以上'],
                  ['粗脂質', '11% 以上'],
                  ['粗繊維質', '4% 以下'],
                  ['粗灰分', '4% 以下'],
                  ['水分', '10% 以下'],
                  ['代謝エネルギー', '513 kcal/100g'],
                ].map(([k, v]) => (
                  <div key={k} className="sans" style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, paddingBottom: 8, borderBottom: `1px dashed ${c.line}` }}>
                    <span style={{ color: c.sub }}>{k}</span>
                    <span style={{ fontWeight: 600 }}>{v}</span>
                  </div>
                ))}
              </div>

              <div className="line" style={{ height: 1, margin: '28px 0' }} />

              <div className="sans" style={{ fontSize: 11, letterSpacing: '0.2em', color: c.sub, marginBottom: 14 }}>
                ── 含まないもの
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {['香料', '着色料', '保存料', '酸化防止剤', '小麦グルテン', 'オイルコーティング'].map(t => (
                  <span key={t} className="sans" style={{
                    fontSize: 10, padding: '4px 10px',
                    border: `1px solid ${c.accent}`, color: c.accent,
                    letterSpacing: '0.1em',
                  }}>NO {t}</span>
                ))}
              </div>
            </div>
          </Reveal>
        </section>

        {/* ============ お客様の声 ============ */}
        {tweaks.showVoice && (
        <section style={{ padding: '90px 0 80px', background: c.soft }}>
          <Reveal>
            <div style={{ padding: '0 28px' }}>
              <div className="sans" style={{ fontSize: 10, letterSpacing: '0.3em', color: c.sub, marginBottom: 16 }}>
                07 — VOICE
              </div>
              <h2 style={{ margin: 0, fontSize: 28, lineHeight: 1.5, letterSpacing: '0.04em', fontWeight: 500 }}>
                飼い主さまの声。
              </h2>
            </div>
          </Reveal>

          <div style={{ marginTop: 36, overflowX: 'auto', WebkitOverflowScrolling: 'touch', paddingBottom: 12 }}>
            <div style={{ display: 'flex', gap: 14, padding: '0 28px' }}>
              {[
                { name: 'お客様 A 様', dog: '愛犬と暮らす飼い主さま', quote: 'ドッグフードは普段与えておりませんでしたが、栄養面も考え、レアフードと一緒に混ぜて使用しております。他のドッグフードは何が入っているかわからない点もあり、こちらのドッグフードは自分でも食べてみましたが、余計な添加物が入っていないこともあり、ヒューマングレードの高品質のものと感じています。他のドッグフードと食いつきも全く違いますし、風味もカツオ本来の風味があり、非常にいい商品だと思っています。', stars: 5 },
                { name: 'お客様 B 様', dog: '愛犬と暮らす飼い主さま', quote: '色々なドッグフードを試してきましたが、これが一番うちの子にはヒットしたようです。他のフードは、お湯をかけないと食べなかったりと反応がイマイチでしたが、これはオヤツを食べるかの様にポリポリ食べてくれました。またリピートしたいです。', stars: 5 },
                { name: 'お客様 C 様', dog: '豆柴の飼い主さま', quote: '豆柴ですが、このごはんが大好きです。いろんなおやつ、フードの中で、多分一番好物だと思いますし、飽きない。ご褒美として本当に重宝しています！', stars: 5 },
                { name: 'お客様 D 様', dog: '食べムラに悩む飼い主さま', quote: 'すごいです。この2年間食べムラがあり食べたり食べなかったりですが、このままおやつのように食べてくれました。', stars: 5 },
                { name: 'お客様 E 様', dog: '手作り食と併用の飼い主さま', quote: '突然痙攣を起こし手作り食に変更しました。手作りご飯は初めは喜んで食べてくれていましたが、最近は飽きてきたのかイヤイヤ食べるようになり、手作り食に混ぜる用に完全無添加のドッグフードを探していたらこちらにたどり着きました。', stars: 5 },
              ].map((v, i) => (
                <div key={i} style={{
                  width: 280, flexShrink: 0,
                  padding: '24px 22px', background: c.bg, border: `1px solid ${c.line}`,
                }}>
                  <div className="accent" style={{ fontSize: 14, letterSpacing: '0.1em', marginBottom: 12 }}>
                    {'★'.repeat(v.stars)}
                  </div>
                  <p style={{ margin: 0, fontSize: 13, lineHeight: 2.0, color: c.ink }}>
                    「{v.quote}」
                  </p>
                  <div className="sans" style={{ marginTop: 18, paddingTop: 14, borderTop: `1px solid ${c.line}` }}>
                    <div style={{ fontSize: 12, fontWeight: 600, color: c.ink }}>{v.name}</div>
                    <div style={{ fontSize: 10, color: c.sub, marginTop: 3, letterSpacing: '0.05em' }}>{v.dog}</div>
                  </div>
                </div>
              ))}
              <div style={{ width: 28, flexShrink: 0 }} />
            </div>
          </div>
        </section>
        )}

        {/* ============ FAQ ============ */}
        {tweaks.showFaq && (
        <section style={{ padding: '80px 28px', background: c.bg }}>
          <Reveal>
            <div className="sans" style={{ fontSize: 10, letterSpacing: '0.3em', color: c.sub, marginBottom: 16 }}>
              08 — Q & A
            </div>
          </Reveal>
          <Reveal delay={80}>
            <h2 style={{ margin: 0, fontSize: 28, lineHeight: 1.5, letterSpacing: '0.04em', fontWeight: 500 }}>
              よくある質問。
            </h2>
          </Reveal>

          <div style={{ marginTop: 36 }}>
            {[
              { q: '本当に人間が食べている食材を使用していますか？', a: 'はい。すべて私たちが普段の食卓で食べている食材で作っています。香料・着色料・保存料・酸化防止剤も不使用ですので、安心してご家族と同じ基準でお選びいただけます。保存料や酸化防止剤が一切入っておりませんので、保存方法にお気をつけいただき、開封後は早めにお召し上がりください。' },
              { q: 'アレルギーがある子でも大丈夫？', a: '小麦グルテンフリーですので、小麦アレルギーをお持ちのわんちゃんにも安心です。ただし、個別のアレルギー症状については原材料をご確認の上、ご不安な場合は獣医師にご相談ください。' },
              { q: 'シニア犬・子犬にも与えられますか？', a: 'オールステージ対応です。給与量は体重と年齢に合わせて調整してください。シニア犬には少しふやかしてお与えいただくのもおすすめです。' },
              { q: '保存方法と賞味期限は？', a: '直射日光・高温多湿を避けて常温、もしくは夏季や温度湿度が高めの気候では冷蔵保存を推奨します。開封後は密封容器に入れ、冷暗所か冷蔵保存の上、1か月以内にお使いください。未開封時の賞味期限は製造から3か月です。' },
              { q: '配送・送料について', a: '通常1〜3営業日以内に発送。9,900円以上のご購入で送料無料です。' },
              { q: '一番安く買えるサイトはどこですか？', a: '公式サイトでメンバー価格が一番お安い価格となっています。メンバー様は月額500円（税込）で、いのちのごはん1㎏が4,450円（税込）にて1か月に何個でもご購入いただけます。公式サイトにて通常価格は、4,950円（税込）となっております。アマゾン等は手数料の関係で公式より高くなっておりますので、ご了承くださいませ。' },
            ].map((it, i) => (
              <Reveal key={i} delay={i * 60}>
                <FaqItem q={it.q} a={it.a} c={c} />
              </Reveal>
            ))}
          </div>
        </section>
        )}

        {/* ============ CTA ============ */}
        <section style={{ padding: '90px 28px 60px', background: c.soft, textAlign: 'center' }}>
          <Reveal>
            <div className="sans" style={{ fontSize: 10, letterSpacing: '0.3em', color: c.accent, marginBottom: 16 }}>
              ─ ORDER
            </div>
          </Reveal>
          <Reveal delay={100}>
            <h2 style={{ margin: 0, fontSize: 30, lineHeight: 1.5, letterSpacing: '0.04em', fontWeight: 500 }}>
              本当に与えたい<br/>ごはんを、<br/>愛犬に。
            </h2>
          </Reveal>
          <Reveal delay={220}>
            <div style={{ marginTop: 36, marginBottom: 28 }}>
              <img src="assets/package-1kg.png" alt="いのちのごはん 1kg" style={{ width: '100%', display: 'block' }} />
            </div>
          </Reveal>
          <Reveal delay={300}>
            <div className="sans" style={{ display: 'flex', justifyContent: 'space-between', padding: '0 16px', marginBottom: 24 }}>
              <div style={{ textAlign: 'left' }}>
                <div style={{ fontSize: 10, color: c.sub, letterSpacing: '0.2em' }}>内容量</div>
                <div style={{ fontSize: 16, fontWeight: 600 }}>1kg</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 10, color: c.sub, letterSpacing: '0.2em' }}>価格</div>
                <div style={{ fontSize: 16, fontWeight: 600 }}>¥4,950 <span style={{ fontSize: 10, color: c.sub, fontWeight: 400 }}>(税込)</span></div>
              </div>
            </div>
          </Reveal>
          <Reveal delay={380}>
            <a href="https://onelife-store.com/" target="_blank" rel="noopener" className="sans" style={{
              display: 'block', padding: '20px', background: c.ink, color: c.soft,
              textDecoration: 'none', fontSize: 14, letterSpacing: '0.2em', fontWeight: 500,
              textAlign: 'center',
            }}>
              ご購入はこちら →
            </a>
          </Reveal>
          <Reveal delay={460}>
            <div style={{
              marginTop: 14, padding: '24px 22px',
              background: c.bg, border: `1px solid ${c.line}`,
              textAlign: 'left',
            }}>
              <div className="sans" style={{
                display: 'inline-block', padding: '4px 10px',
                background: c.accent, color: c.soft,
                fontSize: 10, letterSpacing: '0.25em', fontWeight: 600,
                marginBottom: 14,
              }}>
                MEMBERS ONLY
              </div>
              <h3 style={{ margin: 0, fontSize: 20, lineHeight: 1.5, fontWeight: 500, letterSpacing: '0.04em' }}>
                メンバー会員登録で<br/>特別価格での購入が可能。
              </h3>
              <p className="sans" style={{ marginTop: 14, fontSize: 12, lineHeight: 1.95, color: c.sub }}>
                <span style={{ color: c.ink, fontWeight: 600 }}>メンバー会員（税込月額500円）</span>にご登録いただくと、<br/>
                いのちのごはん1㎏が<span style={{ color: c.ink, fontWeight: 600 }}>4,450円（税込）</span>で<br/>
                1か月何個でもご購入が可能になっております。<br/><br/>
                複数個ご購入いただくお客様には大変お得になっております。<br/>
                メンバー様には便利な定期便も利用可能になっておりますので、<br/>
                ぜひ一度ご確認ください。
              </p>

              <ul className="sans" style={{ margin: '18px 0 0', padding: 0, listStyle: 'none', display: 'grid', gap: 8 }}>
                {[
                  'メンバー限定の特別価格',
                  '定期便のお申し込み',
                  '新商品・キャンペーンのご案内',
                ].map((t) => (
                  <li key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: c.ink }}>
                    <span style={{ width: 6, height: 6, borderRadius: 99, background: c.accent, flexShrink: 0 }}/>
                    {t}
                  </li>
                ))}
              </ul>

              <a href="#member-form" className="sans" style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                marginTop: 22, padding: '16px 18px',
                border: `1px solid ${c.ink}`, color: c.ink,
                textDecoration: 'none', fontSize: 12, letterSpacing: '0.2em', fontWeight: 500,
                background: c.soft,
              }}>
                <span>無料メンバー登録へ</span>
                <span style={{ fontSize: 16 }}>→</span>
              </a>
              <div className="sans" style={{ marginTop: 10, fontSize: 10, color: c.sub, lineHeight: 1.7 }}>
                ※ 登録は無料・1分で完了します。<br/>
                　メールアドレスのみで簡単にご登録いただけます。
              </div>
            </div>
          </Reveal>

          {/* ====== メンバー登録フォーム ====== */}
          <Reveal delay={540}>
            <MemberForm c={c} />
          </Reveal>

          {/* footer */}
          <div className="sans" style={{ marginTop: 60, paddingTop: 28, borderTop: `1px solid ${c.line}`, fontSize: 10, color: c.sub, letterSpacing: '0.2em' }}>
            <div style={{ marginBottom: 8 }}>ONE LIFE</div>
            <div style={{ fontFamily: fontSerif, fontSize: 11, color: c.ink }}>わんこのためにできること</div>
          </div>
        </section>
      </div>
    </MobileChrome>
  );
}

function FaqItem({ q, a, c }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: `1px solid ${c.line}` }}>
      <button
        onClick={() => setOpen(!open)}
        style={{
          width: '100%', textAlign: 'left', padding: '20px 0',
          background: 'transparent', border: 0, cursor: 'pointer',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 16, color: c.ink,
          font: 'inherit',
        }}
      >
        <span style={{ fontSize: 14, fontWeight: 500, lineHeight: 1.5, fontFamily: 'inherit' }}>
          {q}
        </span>
        <span style={{
          flexShrink: 0, width: 24, height: 24, borderRadius: 99,
          background: open ? c.accent : 'transparent',
          border: `1px solid ${open ? c.accent : c.line}`,
          color: open ? '#fff' : c.ink,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 14, transition: 'all .2s',
        }}>{open ? '−' : '+'}</span>
      </button>
      <div style={{
        maxHeight: open ? 400 : 0, overflow: 'hidden',
        transition: 'max-height .4s ease, padding .3s ease',
        paddingBottom: open ? 20 : 0,
      }}>
        <div className="sans" style={{ fontSize: 12.5, lineHeight: 2.0, color: c.sub, paddingRight: 32 }}>
          {a}
        </div>
      </div>
    </div>
  );
}

window.LP_Shokutaku = LP_Shokutaku;
window.FaqItem = FaqItem;

function MemberForm({ c }) {
  const [status, setStatus] = React.useState('idle'); // idle | sending | success | error
  const [errorMsg, setErrorMsg] = React.useState('');

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('sending');
    setErrorMsg('');
    const form = e.target;
    const data = new FormData(form);
    try {
      const res = await fetch('https://formspree.io/f/mjglapva', {
        method: 'POST',
        body: data,
        headers: { Accept: 'application/json' },
      });
      if (res.ok) {
        setStatus('success');
        form.reset();
      } else {
        const j = await res.json().catch(() => ({}));
        setErrorMsg((j.errors && j.errors.map(x => x.message).join(' / ')) || '送信に失敗しました。');
        setStatus('error');
      }
    } catch (err) {
      setErrorMsg('通信エラーが発生しました。時間をおいて再度お試しください。');
      setStatus('error');
    }
  }

  if (status === 'success') {
    return (
      <div id="member-form" style={{
        marginTop: 28, padding: '40px 22px',
        background: c.ink, color: c.soft, textAlign: 'center',
      }}>
        <div className="sans" style={{ fontSize: 10, letterSpacing: '0.3em', color: c.accent, marginBottom: 14 }}>
          ─ THANK YOU
        </div>
        <div style={{
          width: 56, height: 56, borderRadius: 99, margin: '0 auto 18px',
          background: c.accent, display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 26, color: c.soft,
        }}>✓</div>
        <h3 style={{ margin: 0, fontSize: 20, lineHeight: 1.5, fontWeight: 500, letterSpacing: '0.04em' }}>
          ご登録ありがとうございます。
        </h3>
        <p className="sans" style={{ marginTop: 14, fontSize: 12, lineHeight: 1.95, color: 'rgba(255,255,255,.75)' }}>
          いただいたメールアドレス宛に、<br/>
          メンバー特典の詳細をお送りいたします。
        </p>
      </div>
    );
  }

  return (
    <form id="member-form" onSubmit={handleSubmit}
      style={{
        marginTop: 28, padding: '28px 22px',
        background: c.ink, color: c.soft, textAlign: 'left',
      }}>
      <div className="sans" style={{ fontSize: 10, letterSpacing: '0.3em', color: c.accent, marginBottom: 12 }}>
        ─ MEMBER REGISTRATION
      </div>
      <h3 style={{ margin: 0, fontSize: 22, lineHeight: 1.5, fontWeight: 500, letterSpacing: '0.04em' }}>
        ご登録フォーム
      </h3>
      <p className="sans" style={{ marginTop: 12, fontSize: 11.5, lineHeight: 1.9, color: 'rgba(255,255,255,.7)' }}>
        必要事項をご入力のうえ、<br/>
        「登録する」ボタンを押してください。
      </p>

      <div style={{ marginTop: 22, display: 'grid', gap: 16 }}>
        {[
          { id: 'name', name: 'お名前', label: 'お名前', type: 'text', placeholder: '山田 太郎', required: true },
          { id: 'email', name: 'email', label: 'メールアドレス', type: 'email', placeholder: 'example@mail.com', required: true },
          { id: 'dog', name: '愛犬のお名前', label: '愛犬のお名前（任意）', type: 'text', placeholder: 'ぽち', required: false },
        ].map((f) => (
          <label key={f.id} className="sans" style={{ display: 'block' }}>
            <span style={{ fontSize: 11, letterSpacing: '0.15em', color: 'rgba(255,255,255,.7)', display: 'block', marginBottom: 8 }}>
              {f.label}{f.required && <span style={{ color: c.accent, marginLeft: 6 }}>*</span>}
            </span>
            <input
              id={f.id} name={f.name} type={f.type} placeholder={f.placeholder} required={f.required}
              style={{
                width: '100%', boxSizing: 'border-box',
                padding: '12px 14px', fontSize: 13,
                background: 'rgba(255,255,255,.06)',
                border: '1px solid rgba(255,255,255,.2)',
                color: c.soft, outline: 'none',
                fontFamily: 'inherit', borderRadius: 0,
              }}
            />
          </label>
        ))}

        {/* honeypot — bots fill this, humans don't see it */}
        <input type="text" name="_gotcha" style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />

        <label className="sans" style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 11, color: 'rgba(255,255,255,.75)', lineHeight: 1.7 }}>
          <input type="checkbox" required style={{ marginTop: 3, accentColor: c.accent }}/>
          <span>
            <a href="#" style={{ color: c.accent, textDecoration: 'underline' }}>プライバシーポリシー</a>に同意のうえ登録します。
          </span>
        </label>
      </div>

      {status === 'error' && (
        <div className="sans" style={{
          marginTop: 16, padding: '10px 14px',
          background: 'rgba(168, 63, 42, 0.18)',
          border: `1px solid ${c.accent}`,
          fontSize: 11.5, color: '#ffd9d2', lineHeight: 1.6,
        }}>
          ※ {errorMsg}
        </div>
      )}

      <button type="submit" disabled={status === 'sending'} className="sans" style={{
        width: '100%', marginTop: 22, padding: '18px',
        background: status === 'sending' ? c.sub : c.accent, color: c.soft, border: 0,
        fontSize: 13, letterSpacing: '0.2em', fontWeight: 600,
        cursor: status === 'sending' ? 'wait' : 'pointer', fontFamily: 'inherit',
        opacity: status === 'sending' ? 0.7 : 1,
        transition: 'opacity .2s',
      }}>
        {status === 'sending' ? '送信中...' : '登録する →'}
      </button>

      <div className="sans" style={{ marginTop: 14, fontSize: 10, color: 'rgba(255,255,255,.5)', lineHeight: 1.7 }}>
        ※ ご登録いただいたメールアドレス宛に、<br/>
        　メンバー特典の詳細をお送りいたします。
      </div>
    </form>
  );
}

window.MemberForm = MemberForm;