// Variant 1 — 「四方」Shihou Minimal (refined direction)
// Message: "Technologyで、食(職人)に寄り添い、四方良しを。"
// 紙の余白、明朝主役、朱一点。章立て構造・章タイトルが縦組み。

const V1_Shihou = () => {
  const __SB = (typeof window !== 'undefined' && window.__ASSET_BASE__) || './';
  const { lang } = (window.useLang ? window.useLang() : { lang: 'jp' });
  const EN = lang === 'en';
  const { isMobile } = (window.useViewport ? window.useViewport() : { isMobile: false });
  const PX = isMobile ? 20 : 80;  // section horizontal padding
  const PY = isMobile ? 60 : 100; // section vertical padding
  const [scrollY, setScrollY] = React.useState(0);
  const ref = React.useRef(null);
  const heroLogoRef = React.useRef(null);
  const [activeService, setActiveService] = React.useState(0);

  // Slow rotation on hero logo image
  React.useEffect(() => {
    if (!window.gsap || !heroLogoRef.current) return;
    const ctx = window.gsap.context(() => {
      window.gsap.to(heroLogoRef.current, {
        rotation: 360,
        transformOrigin: '50% 50%',
        duration: 80,
        repeat: -1,
        ease: 'none',
      });
    });
    return () => ctx.revert();
  }, []);
  React.useEffect(() => {
    // Body/window scrolls everywhere (desktop + mobile)
    const onScroll = () => setScrollY(window.scrollY || window.pageYOffset || 0);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const { theme } = useTheme();
  const v1 = {
    paper: theme.paper,
    paperDeep: theme.paperDeep,
    ink: theme.ink,
    sumi: theme.sumi,
    shu: theme.accent,
    shuDeep: theme.accentDeep,
    muted: theme.muted,
    mutedLight: theme.mutedLight,
    line: theme.line,
    serif: theme.fonts.serif,
    sans: theme.fonts.sans,
    mono: theme.fonts.mono,
  };
  const techBg = theme.mode === 'dark' ? v1.paper : v1.ink;
  const techFg = theme.mode === 'dark' ? v1.ink : v1.paper;
  const techBody = theme.mode === 'dark' ? v1.sumi : '#d8d2c2';

  const ChapterLabel = ({ num, jp, en }) => (
    <div style={{ display: 'flex', alignItems: 'start', gap: 20 }}>
      <div style={{
        fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.shu,
        writingMode: 'vertical-rl', height: 80, paddingTop: 2,
      }}>
        CHAP. {num}
      </div>
      <div>
        <div style={{ fontFamily: v1.serif, fontSize: 18, color: v1.sumi, letterSpacing: '0.08em' }}>
          {EN ? en : `第 ${num} 章 ／ ${jp}`}
        </div>
        <div style={{ fontFamily: v1.sans, fontSize: 11, color: v1.muted, letterSpacing: '0.25em', marginTop: 4 }}>
          {EN ? jp : en}
        </div>
      </div>
    </div>
  );

  // SVG "Technology ribbon" — four subtle animated strokes forming the mark as dataflow
  const FlowMark = ({ size = 320, opacity = 0.1 }) => (
    <svg width={size} height={size} viewBox="0 0 200 200" style={{ opacity }}>
      <g fill="none" stroke={v1.ink} strokeWidth="0.5">
        {Array.from({ length: 24 }).map((_, i) => (
          <circle key={i} cx="100" cy="100" r={10 + i * 4} />
        ))}
      </g>
      <g fill="none" stroke={v1.shu} strokeWidth="1">
        <path d="M100,30 L170,100 L100,170 L30,100 Z" />
        <path d="M100,60 L140,100 L100,140 L60,100 Z" />
      </g>
    </svg>
  );

  const ScoreMotionStyle = () => (
    <style>{`
      @keyframes culinaScoreDash { to { stroke-dashoffset: -280; } }
      @keyframes culinaScoreFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
      @keyframes culinaScorePulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
    `}</style>
  );

  const CraftScoreSection = React.forwardRef((_, sectionRef) => {
    const scoreLines = Array.from({ length: isMobile ? 7 : 12 });
    const supportMenu = [
      { label: 'Management', jp: '経営管理', en: 'Business Management', href: `${__SB}services/#culimanage` },
      { label: 'Development', jp: '仕組み化・開発', en: 'Systems / Development', href: `${__SB}services/#culiec` },
      { label: 'Marketing / Branding', jp: '集客・ブランド', en: 'Marketing / Branding', href: `${__SB}services/#culimedia` },
      { label: 'Sales / Customer Success', jp: '営業・顧客対応', en: 'Sales / Customer Success', href: `${__SB}services/#curegi` },
    ];

    return (
      <section ref={sectionRef} style={{
        position: 'relative',
        padding: isMobile ? '86px 20px 72px' : '150px 80px 130px',
        borderTop: `1px solid ${v1.line}`,
        background: v1.paper,
        overflow: 'hidden',
      }}>
        <ScoreMotionStyle />
        {window.DecorativeMotionField ? <window.DecorativeMotionField density={8} intensity={0.5} variant="score" /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={isMobile ? 150 : 260} top={isMobile ? 18 : 54} right={isMobile ? -42 : 48} opacity={0.22} rotateDuration={36} delay={0.2} /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={isMobile ? 92 : 150} bottom={isMobile ? 28 : 70} left={isMobile ? 10 : 72} opacity={0.18} rotateDuration={52} delay={1.1} reverse /> : null}
        <svg viewBox="0 0 1200 700" preserveAspectRatio="none" aria-hidden style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          opacity: theme.mode === 'dark' ? 0.34 : 0.48,
          pointerEvents: 'none',
        }}>
          {scoreLines.map((_, i) => (
            <path
              key={i}
              d={`M -80 ${90 + i * 48} C ${190 + i * 24} ${20 + i * 18}, ${410 + i * 12} ${180 + i * 15}, ${690 + i * 22} ${112 + i * 30} S ${1010 - i * 8} ${70 + i * 45}, 1280 ${146 + i * 24}`}
              fill="none"
              stroke={i % 3 === 0 ? v1.shu : v1.line}
              strokeWidth={i % 3 === 0 ? 1.2 : 0.7}
              strokeDasharray={i % 3 === 0 ? '16 20' : '10 18'}
              style={{ animation: `culinaScoreDash ${12 + i * 0.8}s linear infinite` }}
            />
          ))}
        </svg>

        <div style={{
          position: 'relative',
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '0.8fr 1.5fr',
          gap: isMobile ? 42 : 92,
          alignItems: 'start',
        }}>
          <div>
            <div style={{
              fontFamily: v1.mono,
              fontSize: 10,
              letterSpacing: '0.32em',
              color: v1.shu,
              writingMode: isMobile ? 'horizontal-tb' : 'vertical-rl',
              height: isMobile ? 'auto' : 170,
            }}>
              SERVICE SCORE ／ CULINA
            </div>
          </div>

          <div>
            <h2 style={{
              fontFamily: v1.serif,
              fontWeight: 400,
              fontSize: isMobile ? 'clamp(38px, 10vw, 66px)' : 'clamp(68px, 7.8vw, 128px)',
              lineHeight: 1.04,
              letterSpacing: '0',
              margin: 0,
              color: v1.ink,
            }}>
              {EN
                ? <>For makers,<br/>back to what<br/><span style={{ color: v1.shu }}>matters</span>.</>
                : <>作り手が、<br/>本来向き合うべき<br/><span style={{ color: v1.shu }}>こと</span>へ。</>}
            </h2>

            <div style={{
              marginTop: isMobile ? 34 : 56,
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : '1.1fr 0.9fr',
              gap: isMobile ? 24 : 52,
              alignItems: 'start',
            }}>
              <p style={{
                fontFamily: v1.serif,
                fontSize: isMobile ? 16 : 19,
                lineHeight: 2.05,
                margin: 0,
                color: v1.sumi,
              }}>
                {EN
                  ? <>With respect for makers, Culina supports the <span style={{ color: v1.shu }}>non-production side of business</span> from four directions: management, systems, marketing, and sales, so craftspeople can fully face the work only they can do.</>
                  : <>Culinaは作り手に敬意を持ちつつ、職人が本来向き合うべきことに全力で向き合えるよう、<br/><span style={{ color: v1.shu }}>企業の非生産領域</span>を、経営・仕組み・集客・営業の4方向から支援する。</>}
              </p>
              <p style={{
                fontFamily: v1.serif,
                fontSize: isMobile ? 22 : 28,
                lineHeight: 1.7,
                margin: 0,
                color: v1.ink,
              }}>
                {EN
                  ? <>Inside the maker's everyday discipline live<br/><span style={{ color: v1.shu, fontStyle: 'italic' }}>craft, spirit, and essence</span>.</>
                  : <>作り手の当たり前の積み重ねの中に、<br/><span style={{ color: v1.shu, fontStyle: 'italic' }}>技術と魂と本質</span>がある。</>}
              </p>
            </div>
          </div>
        </div>

        <div style={{
          position: 'relative',
          marginTop: isMobile ? 54 : 86,
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)',
          gap: 1,
          background: v1.line,
          border: `1px solid ${v1.line}`,
        }}>
          {supportMenu.map((item, i) => (
            <a key={item.label} href={item.href} style={{
              minHeight: isMobile ? 148 : 220,
              background: v1.paper,
              color: v1.ink,
              textDecoration: 'none',
              padding: isMobile ? '18px 14px' : '24px 18px',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-between',
              transition: 'background .25s, color .25s, transform .25s',
              animation: `culinaScoreFloat ${5 + i * 0.35}s ease-in-out infinite`,
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = v1.ink;
              e.currentTarget.style.color = v1.paper;
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = v1.paper;
              e.currentTarget.style.color = v1.ink;
            }}>
              <div style={{
                fontFamily: v1.mono,
                fontSize: 10,
                letterSpacing: '0.2em',
                color: v1.shu,
                animation: `culinaScorePulse ${2.4 + i * 0.2}s ease-in-out infinite`,
              }}>
                0{i + 1} ／ 04
              </div>
              <div>
                <div style={{
                  fontFamily: v1.serif,
                  fontSize: isMobile ? 20 : 27,
                  lineHeight: 1.25,
                  wordBreak: 'keep-all',
                  overflowWrap: 'break-word',
                }}>
                  {item.label}
                </div>
                <div style={{
                  fontFamily: v1.mono,
                  fontSize: 9,
                  letterSpacing: '0.18em',
                  color: v1.muted,
                  marginTop: 10,
                }}>
                  {EN ? item.en : item.jp}
                </div>
              </div>
            </a>
          ))}
        </div>
      </section>
    );
  });

  // Refs for GSAP reveal animations (motion.jsx provides window.useReveal)
  const scoreRef = React.useRef(null);
  const introRef = React.useRef(null);
  const philosophyRef = React.useRef(null);
  const techRef = React.useRef(null);
  const servicesRef = React.useRef(null);
  const manifestoRef = React.useRef(null);
  const newsRef = React.useRef(null);
  const ctaRef = React.useRef(null);
  // Fallback no-op if motion.jsx isn't loaded (e.g. DesignCanvas preview)
  const reveal = window.useReveal || ((_ref, _opt) => {});
  reveal(scoreRef,     { y: 70,  duration: 1.25, stagger: 0.08 });
  reveal(introRef,     { y: 80,  duration: 1.2 });
  reveal(philosophyRef,{ y: 100, duration: 1.3, stagger: 0.18 });
  reveal(techRef,      { y: 80,  duration: 1.2 });
  reveal(servicesRef,  { y: 60,  duration: 1.1, stagger: 0.1 });
  reveal(manifestoRef, { y: 80,  duration: 1.4, scale: 0.95 });
  reveal(newsRef,      { y: 60,  duration: 1.1, stagger: 0.08 });
  reveal(ctaRef,       { y: 80,  duration: 1.2 });

  return (
    <div ref={ref} style={{
      width: '100%',
      background: v1.paper, color: v1.ink,
      fontFamily: v1.serif,
      fontFeatureSettings: '"palt"',
    }}>
      {/* Scroll progress bar + Motion init */}
      {window.ScrollProgressBar ? <window.ScrollProgressBar /> : null}
      {window.MotionReady ? <window.MotionReady /> : null}

      {/* ── NAV ─────────────────────────────────── */}
      {window.SiteNav ? <window.SiteNav active="top" /> : null}

      {/* ── HERO ───────────────────────────────── */}
      <section style={{ position: 'relative', minHeight: isMobile ? 'auto' : '92vh', padding: isMobile ? '40px 20px 60px' : '108px 80px 72px', overflow: 'hidden' }}>
        {/* Animated shape backdrop (Ver2) */}
        {window.ShapeBackdrop ? <window.ShapeBackdrop /> : null}
        {/* bg flow mark */}
        <div style={{
          position: 'absolute', right: -200, top: 200, opacity: 0.4,
          transform: `rotate(${scrollY * 0.02}deg)`,
          pointerEvents: 'none', zIndex: 0,
        }}>
          <FlowMark size={520} opacity={0.04} />
        </div>

        {/* top labels */}
        <div style={{
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          fontFamily: v1.mono, fontSize: isMobile ? 9 : 10, letterSpacing: '0.3em',
          color: v1.muted, marginBottom: isMobile ? 40 : 46,
          gap: isMobile ? 8 : 0,
        }}>
          <span>CULINA, INC. ／ EST. 2019 TOKYO</span>
          <span style={{ textAlign: isMobile ? 'left' : 'right' }}>{EN ? 'SHIHOU × AI / DX' : '四方良し × AI / DX'}</span>
        </div>

        {/* Main headline with logo on the right */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.16fr 0.84fr', gap: isMobile ? 40 : 76, alignItems: 'center', position: 'relative' }}>
          <div>
            <div style={{ fontFamily: v1.serif, fontSize: isMobile ? 14 : 19, color: v1.sumi, letterSpacing: '0.15em', marginBottom: isMobile ? 20 : 26 }}>
              {EN
                ? <>Technology alongside food <span style={{ color: v1.muted, fontSize: isMobile ? 11 : 14 }}>(and its makers)</span></>
                : <>Technology で 食<span style={{ color: v1.muted, fontSize: isMobile ? 11 : 14 }}>（職人）</span>に寄り添い</>}
            </div>
            <h1 style={{
              fontFamily: v1.serif, fontWeight: 400,
              fontSize: isMobile
                ? (EN ? 'clamp(40px, 11vw, 72px)' : 'clamp(48px, 13vw, 84px)')
                : (EN ? 'clamp(64px, 7.4vw, 124px)' : 'clamp(76px, 8.6vw, 148px)'),
              lineHeight: 1.0,
              letterSpacing: '0', margin: 0,
              wordBreak: 'keep-all', overflowWrap: 'break-word',
            }}>
              {EN
                ? <>A fourfold<br/><span style={{ color: v1.shu }}>good</span>,<br/>an <span style={{ color: v1.shu }}>AX</span>.</>
                : <>四方<span style={{ color: v1.shu }}>良し</span>の<br/><span style={{ color: v1.shu }}>AX</span>を。</>}
            </h1>

            <div style={{ display: 'flex', gap: isMobile ? 20 : 44, marginTop: isMobile ? 40 : 54, alignItems: 'center', flexWrap: 'wrap' }}>
              <a href={__SB + 'services/'} style={{
                fontSize: 12, letterSpacing: '0.2em', color: v1.ink,
                borderBottom: `1px solid ${v1.ink}`, paddingBottom: 6,
                textDecoration: 'none',
              }}>
                {EN ? 'See Services →' : '事業を見る →'}
              </a>
              <a href={__SB + 'company/'} style={{ fontSize: 12, letterSpacing: '0.2em', color: v1.muted, textDecoration: 'none' }}>
                {EN ? 'About' : '会社概要'}
              </a>
              <a href={__SB + 'careers/'} style={{ fontSize: 12, letterSpacing: '0.2em', color: v1.muted, textDecoration: 'none' }}>
                {EN ? 'Careers' : '採用情報'}
              </a>
            </div>
          </div>

          {/* Right — logo as hero visual with four-way labels */}
          <div style={{
            position: 'relative',
            aspectRatio: '1/1',
            width: '100%', maxWidth: isMobile ? 300 : 500,
            justifySelf: isMobile ? 'center' : 'end',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            {/* concentric rings — "寄り添う" enveloping motion */}
            <svg viewBox="0 0 400 400" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
              <g fill="none" stroke={v1.shu} strokeOpacity="0.15">
                {[110, 140, 170, 200].map((r, i) => (
                  <circle key={i} cx="200" cy="200" r={r} strokeWidth={0.6}
                    style={{ transformOrigin: '200px 200px', transform: `rotate(${scrollY * (0.04 + i * 0.012)}deg)` }}
                  />
                ))}
              </g>
              <g fill="none" stroke={v1.ink} strokeOpacity="0.08">
                {[60, 230, 260].map((r, i) => (
                  <circle key={i} cx="200" cy="200" r={r} strokeWidth={0.5} />
                ))}
              </g>
              {/* cross guides */}
              <g stroke={v1.line} strokeWidth="0.5" strokeDasharray="2 4">
                <line x1="200" y1="20" x2="200" y2="380" />
                <line x1="20" y1="200" x2="380" y2="200" />
              </g>
            </svg>
            {/* 4-way labels */}
            {[
              { t: '買 い 手', en: 'BUYER',  style: { top: 0, left: '50%', transform: 'translate(-50%, -50%)' } },
              { t: '売 り 手', en: 'SELLER', style: { right: 0, top: '50%', transform: 'translate(50%, -50%)' } },
              { t: '世   間',  en: 'WORLD',  style: { bottom: 0, left: '50%', transform: 'translate(-50%, 50%)' } },
              { t: '作 り 手', en: 'MAKER',  style: { left: 0, top: '50%', transform: 'translate(-50%, -50%)' }, emphasize: true },
            ].map((c, i) => (
              <div key={i} style={{
                position: 'absolute',
                textAlign: 'center',
                whiteSpace: 'nowrap',
                background: v1.paper,
                padding: '6px 10px',
                ...c.style,
              }}>
                <div style={{
                  fontFamily: v1.serif, fontSize: 14, letterSpacing: '0.15em',
                  color: c.emphasize ? v1.shu : v1.ink,
                }}>
                  {EN ? c.en : c.t}
                </div>
                <div style={{
                  fontFamily: v1.mono, fontSize: 9, letterSpacing: '0.2em',
                  color: c.emphasize ? v1.shu : v1.muted, marginTop: 2,
                }}>
                  {EN ? c.t : c.en}
                </div>
              </div>
            ))}
            {/* 元のロゴ画像 — GSAP でゆっくり自転 */}
            <img
              ref={heroLogoRef}
              src={((window && window.__ASSET_BASE__) || './') + (theme.mode === 'dark' ? 'assets/logo.png' : 'assets/logo-dark.png')}
              alt="Culina"
              style={{
                width: '50%', height: '50%', objectFit: 'contain',
                position: 'relative', zIndex: 1,
              }} />
          </div>
        </div>

        {/* scroll cue */}
        <div style={{
          position: 'absolute', bottom: isMobile ? 16 : 40, left: isMobile ? 20 : 80,
          fontFamily: v1.mono, fontSize: isMobile ? 9 : 10, letterSpacing: '0.3em', color: v1.muted,
          display: 'flex', alignItems: 'center', gap: 12,
          opacity: isMobile ? 0.6 : 1,
        }}>
          <span style={{ width: 40, height: 1, background: v1.muted }}></span>
          {EN ? 'SCROLL ／ READ ON' : 'SCROLL ／ 読み進める'}
        </div>
      </section>

      <CraftScoreSection ref={scoreRef} />

      {/* ── INTRO STATEMENT ───────────────────── */}
      <section ref={introRef} style={{
        padding: isMobile ? '60px 20px' : '120px 80px',
        borderTop: `1px solid ${v1.line}`,
        background: v1.paperDeep,
        position: 'relative',
        overflow: 'hidden',
      }}>
        {window.DecorativeMotionField ? <window.DecorativeMotionField density={6} intensity={0.28} variant="crest" /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={isMobile ? 130 : 230} top={isMobile ? 18 : 44} right={isMobile ? -38 : 86} opacity={0.16} rotateDuration={46} delay={0.5} /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={isMobile ? 76 : 112} bottom={isMobile ? 20 : 40} left={isMobile ? 18 : 120} opacity={0.13} rotateDuration={58} delay={1.6} reverse /> : null}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 2fr', gap: isMobile ? 32 : 80, alignItems: 'start' }}>
          <ChapterLabel num="零" jp="はじめに" en="PROLOGUE" />
          <div style={{ position: 'relative', zIndex: 1 }}>
            <p style={{
              fontFamily: v1.serif, fontSize: 'clamp(22px, 2.4vw, 32px)',
              lineHeight: 2, margin: 0, fontWeight: 400, letterSpacing: '0.02em', color: v1.ink,
            }}>
              {EN ? (
                <>In the field of food, there are <span style={{ color: v1.shu }}>skilled hands</span><br/>
                and <span style={{ color: v1.shu }}>wisdom</span> that cannot be fully put into words.<br/>
                Yet regulations, paperwork, and labor shortages keep pulling those hands away.<br/><br/>
                We take on that complexity and use Technology to restore the time makers need<br/>
                to face <span style={{ color: v1.shu, fontStyle: 'italic' }}>creation itself</span>.</>
              ) : (
                <>食の現場には、<span style={{ color: v1.shu }}>熟練の手</span>と、<br/>
                伝えきれない<span style={{ color: v1.shu }}>知恵</span>があります。<br/>
                けれど、法規や事務、人手不足が<br/>
                その手を、いつも煩わせている。<br/><br/>
                私たちは、その煩雑を引き受け、<br/>
                職人が<span style={{ color: v1.shu, fontStyle: 'italic' }}>創造だけに</span>向かえる時間を、<br/>
                Technologyの力で取り戻します。</>
              )}
            </p>
          </div>
        </div>
      </section>

      {/* ── THE FOUR GOODS (PHILOSOPHY) ─────── */}
      <section ref={philosophyRef} id="philosophy" style={{ padding: isMobile ? '70px 20px' : '140px 80px', borderTop: `1px solid ${v1.line}`, scrollMarginTop: 80, position: 'relative', overflow: 'hidden' }}>
        {/* Subtle animated backdrop shape */}
        {window.DecorativeMotionField ? <window.DecorativeMotionField density={5} intensity={0.2} variant="crest" /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={isMobile ? 110 : 180} top={isMobile ? 18 : 70} left={isMobile ? -30 : 58} opacity={0.14} rotateDuration={50} delay={0.7} reverse /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={isMobile ? 160 : 280} bottom={isMobile ? 18 : 50} right={isMobile ? -60 : -20} opacity={0.12} rotateDuration={64} delay={1.9} /> : null}
        {window.ShapeAccent ? <window.ShapeAccent size={isMobile ? 140 : 240} top={isMobile ? 20 : 60} right={isMobile ? 10 : 60} /> : null}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 2fr', gap: isMobile ? 32 : 80, marginBottom: isMobile ? 40 : 80 }}>
          <ChapterLabel num="壱" jp="四方良し" en="THE FOUR-WAY GOOD" />
          <div>
            <h2 style={{
              fontFamily: v1.serif, fontWeight: 400, fontSize: 64, lineHeight: 1.2,
              margin: 0, letterSpacing: '-0.01em',
            }}>
              {EN ? <>From three<br/>to <span style={{ color: v1.shu }}>four</span>.</> : <>三方から、<br/><span style={{ color: v1.shu }}>四方</span>へ。</>}
            </h2>
            <p style={{ fontFamily: v1.serif, fontSize: 15, lineHeight: 2, marginTop: 32, maxWidth: 640, color: v1.sumi }}>
              {EN
                ? <>The Omi merchant principle says: good for the buyer, good for the seller, good for society. Culina begins by adding one more: <span style={{ color: v1.shu }}>good for the maker</span>. Only businesses that place the maker's pride at the center can last.</>
                : <>近江商人の商道徳「買い手良し・売り手良し・世間良し」。そこに、<span style={{ color: v1.shu }}>作り手良し</span> を加えるのが、Culinaの出発点です。職人の矜持を中心に据えた事業だけが、長く続き、世に残る。</>}
            </p>
          </div>
        </div>

        {/* Four cards — layout echoes the logo's four-square motif */}
        <div data-keep-grid style={{
          display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 1,
          background: v1.line, border: `1px solid ${v1.line}`,
          position: 'relative',
        }}>
          {FOUR_GOODS.map((f, i) => (
            <div key={i} style={{
              background: v1.paper, padding: isMobile ? '28px 16px 22px' : '56px 32px 40px',
              minHeight: isMobile ? 200 : 380, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              position: 'relative',
              ...(i === 3 ? { background: v1.ink, color: v1.paper } : {}),
            }}>
              <div style={{
                fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em',
                color: i === 3 ? v1.shu : v1.muted,
              }}>
                ◇ 0{i+1} ／ 04
              </div>
              <div>
                <div style={{
                  fontFamily: v1.serif, fontSize: isMobile ? 36 : 64, lineHeight: 1,
                  color: i === 3 ? v1.paper : v1.ink,
                }}>
                  {f.kanji}
                </div>
                <div style={{
                  fontSize: isMobile ? 9 : 11, letterSpacing: '0.2em', marginTop: 8,
                  color: i === 3 ? v1.mutedLight : v1.muted,
                }}>
                  {f.yomi} ／ {f.en.toUpperCase()}
                </div>
                <div style={{
                  fontFamily: v1.serif, fontSize: isMobile ? 12 : 15, marginTop: isMobile ? 16 : 28, lineHeight: isMobile ? 1.7 : 2,
                  color: i === 3 ? v1.paper : v1.sumi,
                }}>
                  {f.desc}
                </div>
              </div>
              {i === 3 && (
                <div style={{
                  position: 'absolute', top: 20, right: 20,
                  fontFamily: v1.mono, fontSize: 9, letterSpacing: '0.3em',
                  color: v1.shu, border: `1px solid ${v1.shu}`, padding: '4px 8px',
                }}>
                  CULINA の第4番
                </div>
              )}
            </div>
          ))}
        </div>

        {/* caption line */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          marginTop: 32, fontFamily: v1.serif, fontSize: 14, color: v1.muted,
        }}>
          <span>四方のうちどれか一つでも欠ければ、事業は続かない。</span>
          <span style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em' }}>— CULINA PRINCIPLE</span>
        </div>
      </section>

      {/* ── TECHNOLOGY × CRAFT bridge section ── */}
      <section ref={techRef} style={{
        padding: isMobile ? '70px 20px' : '160px 80px',
        borderTop: `1px solid ${v1.line}`,
        background: techBg, color: techFg, position: 'relative', overflow: 'hidden',
      }}>
        {window.DecorativeMotionField ? <window.DecorativeMotionField density={9} intensity={0.2} variant="score" /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={isMobile ? 170 : 340} top={isMobile ? 14 : 42} right={isMobile ? -70 : 70} opacity={0.24} strokeWidth={0.9} rotateDuration={42} delay={0.3} /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={isMobile ? 88 : 132} bottom={isMobile ? 24 : 58} left={isMobile ? 18 : 86} opacity={0.18} strokeWidth={0.85} rotateDuration={56} delay={1.5} reverse /> : null}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `radial-gradient(circle at 20% 50%, ${v1.shu}15, transparent 40%)`,
          pointerEvents: 'none',
        }} />

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 80, position: 'relative' }}>
          <div>
            <div style={{ fontFamily: v1.mono, fontSize: 11, letterSpacing: '0.3em', color: v1.shu, marginBottom: 40 }}>
              第 弐 章 ／ TECHNOLOGY × CRAFT
            </div>
            <h2 style={{
              fontFamily: v1.serif, fontWeight: 400, fontSize: 'clamp(48px, 6vw, 92px)',
              lineHeight: 1.1, margin: 0, letterSpacing: '-0.02em',
            }}>
              {EN
                ? <>Technology is<br/><span style={{ color: v1.shu, fontStyle: 'italic' }}>a tool</span>.<br/>The protagonist is <span style={{ fontStyle: 'italic' }}>the human hand</span>.</>
                : <>Technologyは、<br/><span style={{ color: v1.shu, fontStyle: 'italic' }}>道具</span>。<br/>主役は、<span style={{ fontStyle: 'italic' }}>人の手</span>。</>}
            </h2>
          </div>
          <div style={{ alignSelf: 'end' }}>
            <p style={{
              fontFamily: v1.serif, fontSize: 17, lineHeight: 2.2,
              margin: 0, color: techBody, maxWidth: 520,
            }}>
              {EN
                ? <>AI and DX are our strengths, but we are not here to replace makers with Technology.<br/>We read gestures, experience, and the context of the workplace carefully,<br/>then place Technology so it can <span style={{ color: v1.shu }}>stand alongside</span> them.<br/>That is Culina's way.</>
                : <>AI と DX を強みとしながら、私たちは「Technologyで置き換える」会社ではありません。<br/>職人の所作や経験、現場の文脈を丁寧に読み解き、<br/>そこに<span style={{ color: v1.shu }}>寄り添う</span>ようにTechnologyを置く。<br/>それが、Culina のやり方です。</>}
            </p>

            <div style={{
              marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 32, fontFamily: v1.serif,
            }}>
              {[
                { num: '8', label: '事業ライン' },
                { num: '120+', label: '導入店舗' },
                { num: '2019', label: '創業年' },
              ].map((s, i) => (
                <div key={i}>
                  <div style={{ fontSize: 48, color: v1.shu, letterSpacing: '-0.02em' }}>{s.num}</div>
                  <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em', color: v1.mutedLight, marginTop: 4 }}>
                    {s.label.toUpperCase()}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── SERVICES ─────────────────────────── */}
      <section ref={servicesRef} style={{ padding: isMobile ? '70px 20px' : '140px 80px', borderTop: `1px solid ${v1.line}`, position: 'relative', overflow: 'hidden' }}>
        {window.DecorativeMotionField ? <window.DecorativeMotionField density={7} intensity={0.22} variant="score" /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={isMobile ? 135 : 210} top={isMobile ? 28 : 76} right={isMobile ? -42 : 92} opacity={0.14} rotateDuration={48} delay={0.8} /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={isMobile ? 78 : 118} bottom={isMobile ? 26 : 62} left={isMobile ? 8 : 110} opacity={0.12} rotateDuration={62} delay={2.0} reverse /> : null}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 2fr', gap: isMobile ? 32 : 80, marginBottom: isMobile ? 40 : 80 }}>
          <ChapterLabel num="参" jp="事業" en="SERVICES" />
          <div style={{ position: 'relative', zIndex: 1 }}>
            <h2 style={{
              fontFamily: v1.serif, fontWeight: 400, fontSize: 64, lineHeight: 1.15,
              margin: 0, letterSpacing: '-0.01em',
            }}>
              {EN ? <>Eight concrete<br/><span style={{ color: v1.shu }}>forms of support</span>.</> : <>八つの、<br/>具体的な<span style={{ color: v1.shu }}>伴走</span>。</>}
            </h2>
            <p style={{ fontFamily: v1.serif, fontSize: 15, lineHeight: 2, marginTop: 32, maxWidth: 640, color: v1.sumi }}>
              {EN
                ? <>From recipe systems and NFC proof to recruiting, brand communication, commerce, and management support. Culina supports the work around makers so makers can keep facing their craft.</>
                : <>レシピシステム、NFC証明、採用、ブランド発信、EC、経営伴走まで。作り手が本来向き合うべきことに向き合えるよう、Culinaの事業は周辺領域を支えます。</>}
            </p>
          </div>
        </div>

        <div style={{ borderTop: `1px solid ${v1.ink}` }}>
          {SERVICES.map((s, i) => (
            <a key={s.id} href={`${__SB}services/#${s.id}`}
              onMouseEnter={() => setActiveService(i)}
              style={{
                display: 'grid',
                gridTemplateColumns: isMobile ? '40px 1fr' : '60px 1.4fr 2.2fr 200px',
                alignItems: 'center',
                gap: isMobile ? 16 : 40,
                padding: isMobile ? '20px 8px' : '28px 16px',
                borderBottom: `1px solid ${v1.line}`,
                cursor: 'pointer', textDecoration: 'none',
                background: activeService === i ? v1.paperDeep : 'transparent',
                transition: 'background 0.2s, padding 0.2s',
              }}>
              <div style={{
                fontFamily: v1.mono, fontSize: 11, color: activeService === i ? v1.shu : v1.muted,
                letterSpacing: '0.15em',
              }}>
                0{i+1}
              </div>
              <div>
                <div style={{
                  fontFamily: v1.serif, fontSize: isMobile ? 22 : 30, lineHeight: 1.2,
                  color: activeService === i ? v1.shu : v1.ink,
                }}>
                  {s.name}
                </div>
                <div style={{ fontFamily: v1.serif, fontSize: isMobile ? 11 : 12, color: v1.muted, marginTop: 4, letterSpacing: '0.05em' }}>
                  {s.kana}
                </div>
                {isMobile && (
                  <div style={{ fontSize: 10, fontFamily: v1.sans, color: v1.shu, letterSpacing: '0.15em', marginTop: 8 }}>
                    {EN ? s.tagEn : s.tag}
                  </div>
                )}
              </div>
              {!isMobile && (
                <div style={{ fontFamily: v1.serif, fontSize: 14.5, lineHeight: 1.9, color: v1.sumi }}>
                  <div style={{ fontSize: 11, fontFamily: v1.sans, color: v1.shu, letterSpacing: '0.15em', marginBottom: 6 }}>
                    {EN ? s.tagEn : s.tag}
                  </div>
                  {s.desc ? <p style={{ margin: 0 }}>{s.desc}</p> : null}
                </div>
              )}
              {!isMobile && (
                <div style={{
                  fontSize: 11, letterSpacing: '0.2em',
                  textAlign: 'right',
                  transform: activeService === i ? 'translateX(-8px)' : 'none',
                  transition: 'transform 0.2s',
                  color: activeService === i ? v1.ink : v1.muted,
                }}>
                  {EN ? 'Learn more →' : '詳しく見る →'}
                </div>
              )}
            </a>
          ))}
        </div>
      </section>

      {/* ── BIG PULL QUOTE ──────────────────── */}
      <section ref={manifestoRef} style={{
        padding: isMobile ? '80px 20px' : '180px 80px',
        borderTop: `1px solid ${v1.line}`,
        background: v1.paperDeep, textAlign: 'center', position: 'relative', overflow: 'hidden',
      }}>
        {window.DecorativeMotionField ? <window.DecorativeMotionField density={6} intensity={0.26} variant="crest" /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={isMobile ? 190 : 360} top={isMobile ? -40 : -46} left={isMobile ? -78 : -90} opacity={0.12} rotateDuration={68} delay={0.2} reverse /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={isMobile ? 94 : 150} bottom={isMobile ? 28 : 54} right={isMobile ? 20 : 160} opacity={0.14} rotateDuration={44} delay={1.4} /> : null}
        {window.ShapeAccent ? <window.ShapeAccent size={isMobile ? 180 : 320} top={isMobile ? 10 : 40} right="-10%" /> : null}
        <div style={{ fontFamily: v1.mono, fontSize: 11, color: v1.shu, letterSpacing: '0.3em', marginBottom: 48 }}>
          — MANIFESTO
        </div>
        <p style={{
          fontFamily: v1.serif, fontSize: 'clamp(32px, 4.2vw, 60px)',
          lineHeight: 1.6, maxWidth: 1100, margin: '0 auto',
          fontWeight: 400, letterSpacing: '0.01em',
        }}>
          {EN
            ? <>A world where professionals<br/>can devote themselves<br/>to <span style={{ color: v1.shu, fontStyle: 'italic' }}>creation itself</span>.</>
            : <>プロフェッショナルが、<br/><span style={{ color: v1.shu, fontStyle: 'italic' }}>創造だけ</span>に、<br/>専念できる世界を。</>}
        </p>
        <div style={{
          fontFamily: v1.serif, fontSize: 14, color: v1.muted, marginTop: 56,
        }}>
          Culina, Inc.
        </div>
      </section>

      {/* ── NEWS ──────────────────────────── */}
      <section ref={newsRef} style={{ padding: isMobile ? '60px 20px' : '120px 80px', borderTop: `1px solid ${v1.line}`, position: 'relative', overflow: 'hidden' }}>
        {window.MorphLineMotif ? <window.MorphLineMotif size={isMobile ? 96 : 154} top={isMobile ? 16 : 44} right={isMobile ? -28 : 70} opacity={0.12} rotateDuration={54} delay={0.9} /> : null}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 2fr', gap: isMobile ? 24 : 80, marginBottom: isMobile ? 24 : 48 }}>
          <ChapterLabel num="肆" jp="お知らせ" en="NEWS & UPDATES" />
          <div style={{ alignSelf: 'end', textAlign: 'right' }}>
            <a href={__SB + 'news/'} style={{ fontSize: 11, letterSpacing: '0.2em', color: v1.muted, textDecoration: 'none' }}>
              一覧を見る →
            </a>
          </div>
        </div>

        <div style={{ borderTop: `1px solid ${v1.line}` }}>
          {NEWS.map((n, i) => (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : '120px 100px 1fr 40px',
              gap: isMobile ? 6 : 24,
              padding: isMobile ? '16px 0' : '24px 0',
              borderBottom: `1px solid ${v1.line}`,
              fontSize: isMobile ? 13 : 15, alignItems: isMobile ? 'start' : 'center',
            }}>
              <span style={{ color: v1.muted, fontFamily: v1.mono, fontSize: 12 }}>{n.date}</span>
              <span style={{
                fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em',
                color: v1.shu, border: `1px solid ${v1.shu}40`, padding: '4px 10px',
                textAlign: 'center',
              }}>{n.tag.toUpperCase()}</span>
              <span style={{ fontFamily: v1.serif }}>{n.title}</span>
              <span style={{ color: v1.muted, textAlign: 'right' }}>→</span>
            </div>
          ))}
        </div>
      </section>

      {/* ── CTA ──────────────────────────── */}
      <section ref={ctaRef} style={{ padding: isMobile ? '70px 20px' : '140px 80px', borderTop: `1px solid ${v1.line}`, position: 'relative', overflow: 'hidden' }}>
        {window.MorphLineMotif ? <window.MorphLineMotif size={isMobile ? 136 : 230} top={isMobile ? 14 : 42} left={isMobile ? -50 : 64} opacity={0.12} rotateDuration={58} delay={0.4} reverse /> : null}
        {window.ShapeAccent ? <window.ShapeAccent size={isMobile ? 160 : 260} top="auto" right={isMobile ? 10 : 60} /> : null}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 80, alignItems: 'center' }}>
          <div>
            <ChapterLabel num="伍" jp="お問い合わせ" en="CONTACT" />
            <h3 style={{
              fontFamily: v1.serif, fontWeight: 400, fontSize: 'clamp(44px, 5vw, 72px)',
              lineHeight: 1.2, margin: '32px 0 0', letterSpacing: '-0.01em',
            }}>
              あなたの事業の<br/>
              次の<span style={{ color: v1.shu, fontStyle: 'italic' }}>一手</span>を、<br/>
              ご一緒に。
            </h3>
          </div>
          <div>
            <p style={{ fontFamily: v1.serif, fontSize: 16, lineHeight: 2, color: v1.sumi, maxWidth: 460 }}>
              最初の30分は、無料でお話を伺います。<br/>
              私たちの八つの事業のどれが合うか、<br/>
              あるいはどれも要らないのか、<br/>
              正直にお伝えします。
            </p>
            <div style={{ display: 'flex', gap: 16, marginTop: 48, flexWrap: 'wrap' }}>
              <a href={__SB + 'contact/'} style={{ textDecoration: 'none' }}>
                <button style={{
                  background: v1.ink, color: v1.paper, border: 'none',
                  padding: '20px 32px', fontSize: 13, letterSpacing: '0.2em',
                  fontFamily: v1.sans, cursor: 'pointer',
                }}>お問い合わせ →</button>
              </a>
              <a href={__SB + 'contact/'} style={{ textDecoration: 'none' }}>
                <button style={{
                  background: 'transparent', color: v1.ink, border: `1px solid ${v1.ink}`,
                  padding: '20px 32px', fontSize: 13, letterSpacing: '0.2em',
                  fontFamily: v1.sans, cursor: 'pointer',
                }}>会社資料 DL</button>
              </a>
              <a href={__SB + 'careers/'} style={{ textDecoration: 'none' }}>
                <button style={{
                  background: 'transparent', color: v1.shu, border: `1px solid ${v1.shu}`,
                  padding: '20px 32px', fontSize: 13, letterSpacing: '0.2em',
                  fontFamily: v1.sans, cursor: 'pointer',
                }}>採用情報</button>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ── FOOTER ────────────────────────── */}
      {window.SiteFooter ? <window.SiteFooter /> : null}
    </div>
  );
};
window.V1_Shihou = V1_Shihou;
