// NARAMILE — Variant B (refined) — Kurokawa-Echoes hero + white/gray alternating sections
// Hero: left column (logo mark + subtitle, vertical tag, #01, big title, tags, dots) + right photo pair

const { IMG, SAKE_ITEMS, PRODUCTS, NEWS } = window.NARAMILE_A_Data;

// === Header — Existing NARAMILE style: logo mark + NARAMILE left / top menu contact Instagram + search right
function HeaderK({ active = "top" }) {
  return (
    <header style={{
      position: "absolute", top: 0, left: 0, right: 0, zIndex: 20,
      padding: "38px 48px",
      display: "flex", justifyContent: "space-between", alignItems: "center",
      background: "transparent",
    }}>
      {/* Left — logo image */}
      <a href="index.html" style={{ display: "flex", alignItems: "center", textDecoration: "none" }}>
        <img
          src="assets/naramile-logo.png"
          alt="NARAMILE"
          style={{ height: 28, width: "auto", display: "block" }}
        />
      </a>

      {/* Right — text nav + search */}
      <nav style={{ display: "flex", gap: 40, alignItems: "center" }}>
        {[
          { key: "top", en: "top", jp: "トップ", href: "index.html" },
          { key: "menu", en: "menu", jp: "メニュー", href: "menu.html" },
          { key: "news", en: "news", jp: "お知らせ", href: "news.html" },
          { key: "contact", en: "contact", jp: "お問い合わせ", href: "contact.html" },
          { key: "instagram", en: "Instagram", jp: "インスタグラム", href: "#" },
        ].map(n => (
          <a key={n.key} href={n.href} style={{
            display: "flex", flexDirection: "column", alignItems: "center",
            gap: 4, textDecoration: "none",
            color: n.key === active ? "var(--ink)" : "var(--ink-2)",
            position: "relative",
          }}>
            <span style={{
              fontFamily: "var(--f-sans-en)", fontSize: 16, letterSpacing: "0.02em",
              fontWeight: 400,
            }}>{n.en}</span>
            <span style={{
              fontFamily: "var(--f-sans-jp)", fontSize: 10, letterSpacing: "0.15em",
              color: "var(--ink-soft)",
            }}>{n.jp}</span>
            {n.key === active && (
              <span style={{
                position: "absolute", bottom: -12, left: "50%",
                transform: "translateX(-50%)",
                width: 22, height: 2, background: "var(--ink)",
              }} />
            )}
          </a>
        ))}
        <button aria-label="Search" style={{
          background: "transparent", border: "none", cursor: "pointer", padding: 4,
          color: "var(--ink)",
        }}>
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
            <circle cx="9.5" cy="9.5" r="6.5" stroke="currentColor" strokeWidth="1.5"/>
            <line x1="14.5" y1="14.5" x2="19" y2="19" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </button>
      </nav>
    </header>
  );
}

// === HERO — Kurokawa-style split
function HeroK() {
  return (
    <section style={{
      position: "relative", background: "#ffffff",
      minHeight: 820,
      padding: "0",
      overflow: "hidden",
    }}>
      <HeaderK />

      {/* Split: left content column, right photo pair */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "minmax(520px, 1fr) 1.3fr",
        minHeight: 820,
      }}>
        {/* LEFT */}
        <div style={{
          paddingLeft: 48, paddingTop: 160, paddingBottom: 80, paddingRight: 40,
          position: "relative",
          display: "flex", flexDirection: "column",
        }}>
          {/* Vertical tag on far left */}
          <div style={{
            position: "absolute",
            left: 24,
            top: 180,
            height: 320,
            borderTop: "1px solid var(--ink)",
            paddingTop: 16,
          }}>
            <div className="vertical-jp" style={{
              fontSize: 12,
              letterSpacing: "0.5em",
              color: "var(--ink)",
              fontWeight: 500,
            }}>
              体験プログラム
            </div>
            <div style={{
              writingMode: "vertical-rl",
              fontFamily: "var(--f-sans-en)",
              fontSize: 9,
              letterSpacing: "0.3em",
              color: "var(--ink-soft)",
              marginTop: 12,
            }}>
              PROGRAM
            </div>
          </div>

          {/* Horizontal line across the hero left-half — Kurokawa signature */}
          <div style={{
            position: "absolute", top: 130, left: 70, right: 0,
            height: 1, background: "var(--ink)",
          }} />

          {/* #01 large number */}
          <div style={{ paddingLeft: 70, paddingTop: 40 }}>
            <h2 className="jp-display" style={{
              fontSize: 68,
              fontWeight: 400,
              letterSpacing: "0.02em",
              lineHeight: 1,
              marginBottom: 120,
              color: "var(--ink)",
            }}>
              #01
            </h2>

            {/* Main title */}
            <h1 className="jp-display" style={{
              fontSize: 44,
              fontWeight: 400,
              lineHeight: 1.75,
              letterSpacing: "0.04em",
              color: "var(--ink)",
              marginBottom: 28,
            }}>
              ここは旅人の中継地点。<br/>
              少し立ち寄れば、<br/>
              嬉しい発見。
            </h1>

            {/* Category tags */}
            <div style={{
              display: "flex", gap: 16, marginBottom: 36,
              fontFamily: "var(--f-sans-jp)",
              fontSize: 13, color: "var(--ink-soft)",
            }}>
              <span>#地酒</span>
              <span>#特産品</span>
              <span>#抹茶体験</span>
              <span>#奈良公園</span>
            </div>

            {/* Progress dots */}
            <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
              <div style={{ width: 40, height: 4, background: "var(--ink)", borderRadius: 2 }} />
              {[...Array(9)].map((_, i) => (
                <div key={i} style={{
                  width: 6, height: 6, borderRadius: "50%",
                  background: "var(--ink-soft)", opacity: 0.5,
                }} />
              ))}
            </div>
          </div>
        </div>

        {/* RIGHT — photo pair (Kurokawa uses two images side by side) */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 2,
          paddingTop: 120,
          paddingRight: 0,
        }}>
          <div style={{ position: "relative", overflow: "hidden" }}>
            <img src={IMG.hero1} style={{
              width: "100%", height: "100%", objectFit: "cover",
              minHeight: 680,
            }} />
          </div>
          <div style={{ position: "relative", overflow: "hidden" }}>
            <img src={IMG.interior1} style={{
              width: "100%", height: "100%", objectFit: "cover",
              minHeight: 680,
            }} />
          </div>
        </div>
      </div>
    </section>
  );
}

// === Section label — consistent across sections
function SectionHead({ num, en, jp, title, subtitle }) {
  return (
    <div style={{ marginBottom: 72 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 32 }}>
        <span className="en-display" style={{ fontSize: 15, fontStyle: "italic", color: "var(--ink)" }}>— {num}</span>
        <span style={{ width: 40, height: 1, background: "var(--ink)" }} />
        <span className="micro-en" style={{ color: "var(--ink)" }}>{en}</span>
        <span className="micro-jp" style={{ color: "var(--ink-soft)" }}>{jp}</span>
      </div>
      <h2 className="jp-display" style={{
        fontSize: 56, lineHeight: 1.3, fontWeight: 400, letterSpacing: "0.04em",
      }}>
        {title}
      </h2>
      {subtitle && (
        <p className="en-display" style={{
          fontSize: 22, fontStyle: "italic", color: "var(--ink-soft)", marginTop: 16,
        }}>
          {subtitle}
        </p>
      )}
    </div>
  );
}

// === ABOUT — #02 — white section
function AboutK() {
  return (
    <section style={{ padding: "140px 40px", background: "var(--paper)" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <SectionHead num="02" en="ABOUT" jp="ナラマイルとは"
          title={<>奈良に参るなら、<br/>NARAMILE。</>}
          subtitle="Come to Nara, come for NARAMILE." />

        <div style={{
          display: "grid", gridTemplateColumns: "1.2fr 1fr",
          gap: 100, alignItems: "start", marginTop: 40,
        }}>
          <div>
            <div style={{
              padding: "40px 0",
              borderTop: "1px solid var(--ink)",
              borderBottom: "1px solid var(--line-soft)",
              marginBottom: 48,
            }}>
              <p className="jp-display" style={{
                fontSize: 26, lineHeight: 2, letterSpacing: "0.06em", fontWeight: 400,
              }}>
                ここは旅人の中継地点。<br/>
                少し立ち寄れば、嬉しい発見。
              </p>
              <p className="en-display" style={{
                fontSize: 18, lineHeight: 1.6, fontStyle: "italic",
                color: "var(--ink-soft)", marginTop: 16,
              }}>
                A traveler&apos;s crossroads. Stop for a moment, find something wonderful.
              </p>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
              <p style={{ fontSize: 15, lineHeight: 2.1, color: "var(--ink-2)" }}>
                NARAMILEは、奈良の地酒や特産品を通して
                人・文化・歴史を繋ぎ、新しい奈良の魅力を発信します。
                <br/><br/>
                奈良公園のすぐそば、観光の途中にふらりと立ち寄れる場所。
                一杯、一口、一つの品が、あなたの奈良を少しだけ、豊かなものに変えるはず。
              </p>
              <p className="en-display" style={{ fontSize: 15, lineHeight: 1.9, color: "var(--ink-soft)" }}>
                Through Nara&apos;s sake and local treasures, NARAMILE weaves together people, culture, and history to reveal a new side of Nara.
                <br/><br/>
                Tucked beside Nara Park — a place to pause between sights. A cup, a taste, a small object: each a quiet thread in the story of the place.
              </p>
            </div>
          </div>

          <div>
            <img src={IMG.about} style={{ width: "100%", height: 620, objectFit: "cover" }} />
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10 }}>
              <span className="micro-en">ⓘ NARAMILE STUDIO</span>
              <span className="en-display" style={{ fontSize: 12, fontStyle: "italic", color: "var(--ink-soft)" }}>
                photographed at Nara Park
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// === SAKE — #03 — gray section
function SakeK() {
  return (
    <section style={{ padding: "140px 40px", background: "var(--paper-2)" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <SectionHead num="03" en="LOCAL SAKE" jp="奈良の地酒"
          title={<>日本酒発祥の地、<br/>奈良から十二蔵。</>}
          subtitle="Twelve breweries from the birthplace of Japanese sake." />

        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 80px",
        }}>
          {SAKE_ITEMS.map((s, i) => (
            <article key={i} style={{
              display: "grid", gridTemplateColumns: "56px 1fr auto",
              gap: 20, padding: "28px 0",
              borderTop: i < 2 ? "1px solid var(--ink)" : "1px solid var(--line)",
              alignItems: "center",
            }}>
              <span className="en-display" style={{
                fontSize: 38, fontStyle: "italic", fontWeight: 300, color: "var(--ink)",
                lineHeight: 1,
              }}>
                #{String(i + 1).padStart(2, "0")}
              </span>
              <div>
                <h3 className="jp-display" style={{
                  fontSize: 24, fontWeight: 500, marginBottom: 4,
                  display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap",
                }}>
                  <span>{s.name}</span>
                  <span className="en-display" style={{
                    fontSize: 15, fontStyle: "italic", color: "var(--ink-soft)",
                  }}>
                    {s.en}
                  </span>
                </h3>
                <div style={{
                  display: "flex", gap: 12, marginBottom: 6, fontSize: 12,
                  alignItems: "baseline",
                }}>
                  <span style={{ color: "var(--accent-sake)", letterSpacing: "0.05em" }}>{s.brewery}</span>
                  <span style={{ color: "var(--ink-soft)" }}>· {s.region}</span>
                </div>
                <p style={{ fontSize: 12.5, lineHeight: 1.8, color: "var(--ink-2)" }}>{s.desc}</p>
              </div>
              <span className="en-display" style={{ fontStyle: "italic", color: "var(--ink)", fontSize: 14 }}>
                →
              </span>
            </article>
          ))}
        </div>

        <div style={{
          marginTop: 80, display: "flex", justifyContent: "space-between",
          alignItems: "center", flexWrap: "wrap", gap: 24,
        }}>
          <p className="en-display" style={{
            fontSize: 14, fontStyle: "italic", color: "var(--ink-soft)", maxWidth: 520,
          }}>
            日本酒発祥の地・奈良の十二の蔵から、季節ごとに選び抜いた一杯を。<br/>
            <span style={{ color: "var(--ink-soft)", opacity: 0.75 }}>From the twelve breweries of Nara, a curated cup for the season.</span>
          </p>
          <a href="#" style={{
            display: "inline-flex", alignItems: "center", gap: 14,
            padding: "16px 40px", border: "1px solid var(--ink)",
            borderRadius: 999, fontSize: 14, letterSpacing: "0.1em",
          }}>
            <span>メニュー一覧へ</span>
            <span className="en-display" style={{ fontStyle: "italic", fontSize: 12, color: "var(--ink-soft)" }}>view full menu</span>
            <span>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

// === MATCHA — #04 — white section, keep existing visual treatment (moss-green feature block)
function MatchaK() {
  return (
    <section style={{
      padding: "140px 40px", background: "var(--paper)",
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <SectionHead num="04" en="EXPERIENCE" jp="セルフ抹茶点て体験"
          title="新体験・自分で、点てる。"
          subtitle="Make Your Own Matcha. — a new experience." />

        <div style={{
          background: "linear-gradient(135deg, #5a6b4a 0%, #3d4d33 100%)",
          color: "var(--paper)",
          padding: "80px 72px",
          display: "grid", gridTemplateColumns: "1fr 1fr",
          gap: 80, alignItems: "center",
          position: "relative", overflow: "hidden",
        }}>
          <div className="vertical-jp" style={{
            position: "absolute", left: 24, top: 80,
            fontSize: 12, color: "rgba(244,239,230,0.3)", letterSpacing: "0.5em",
          }}>
            一碗の静けさを、旅のあいまに
          </div>

          <div style={{ paddingLeft: 40 }}>
            <img src={IMG.matcha} style={{ width: "100%", height: 520, objectFit: "cover" }} />
          </div>

          <div>
            <div style={{ marginBottom: 20 }}>
              <span style={{
                display: "inline-block", padding: "6px 14px",
                border: "1px solid var(--paper)",
                fontFamily: "var(--f-sans-en)", fontSize: 11, letterSpacing: "0.25em",
              }}>NEW — 新体験</span>
            </div>

            <h3 className="jp-display" style={{
              fontSize: 72, lineHeight: 1.1, fontWeight: 400,
              letterSpacing: "0.04em", marginBottom: 20,
            }}>
              自分で、<br/>点てる。
            </h3>
            <p className="en-display" style={{
              fontSize: 38, lineHeight: 1.2, fontStyle: "italic", fontWeight: 300,
              marginBottom: 48, color: "rgba(244,239,230,0.85)",
            }}>
              Make Your Own Matcha.
            </p>

            <p style={{ fontSize: 15, lineHeight: 2.1, color: "rgba(244,239,230,0.9)", marginBottom: 20, maxWidth: 480 }}>
              大和茶の中から選んだ抹茶を、ご自身の手で点てていただく体験。
              旅のあいまに、静かな一服のひとときを。
            </p>
            <p className="en-display" style={{
              fontSize: 15, lineHeight: 1.9, color: "rgba(244,239,230,0.65)",
              marginBottom: 48, maxWidth: 480,
            }}>
              Whisk your own bowl of Yamato matcha — a quiet moment, mid-journey.
            </p>

            <div style={{
              display: "grid", gridTemplateColumns: "repeat(3, auto)",
              gap: 40, paddingTop: 28,
              borderTop: "1px solid rgba(244,239,230,0.3)",
              marginBottom: 40,
            }}>
              <div>
                <div className="micro-en" style={{ color: "rgba(244,239,230,0.5)" }}>DURATION</div>
                <div className="micro-jp" style={{ color: "rgba(244,239,230,0.4)", marginTop: 2 }}>時間</div>
                <div className="jp-display" style={{ fontSize: 24, marginTop: 10 }}>5 – 10 min</div>
              </div>
              <div>
                <div className="micro-en" style={{ color: "rgba(244,239,230,0.5)" }}>PRICE</div>
                <div className="micro-jp" style={{ color: "rgba(244,239,230,0.4)", marginTop: 2 }}>料金</div>
                <div className="jp-display" style={{ fontSize: 24, marginTop: 10 }}>¥1,600</div>
              </div>
              <div>
                <div className="micro-en" style={{ color: "rgba(244,239,230,0.5)" }}>BOOKING</div>
                <div className="micro-jp" style={{ color: "rgba(244,239,230,0.4)", marginTop: 2 }}>予約</div>
                <div className="jp-display" style={{ fontSize: 24, marginTop: 10 }}>walk-in</div>
              </div>
            </div>

            <a href="#" style={{
              display: "inline-flex", alignItems: "center", gap: 14,
              padding: "14px 28px", border: "1px solid var(--paper)",
              borderRadius: 999, color: "var(--paper)",
            }}>
              <span>体験の詳細</span>
              <span className="en-display" style={{ fontSize: 13, fontStyle: "italic" }}>learn more</span>
              <span>→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// === PRODUCTS — #05 — gray section
function ProductsK() {
  return (
    <section style={{ padding: "140px 0 140px 40px", background: "var(--paper-2)" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto", paddingRight: 40 }}>
        <SectionHead num="05" en="LOCAL PRODUCTS" jp="奈良の特産品"
          title={<>土地の味を、持ち帰る。</>}
          subtitle="Tastes of the land to take home." />
      </div>

      <div className="h-scroll" style={{ display: "flex", gap: 32, paddingBottom: 40, paddingRight: 40 }}>
        {PRODUCTS.map((p, i) => (
          <article key={i} style={{
            flex: "0 0 340px", scrollSnapAlign: "start",
          }}>
            <div style={{
              height: 420, position: "relative",
              background: ["#b8b8b8", "#a8a8a8", "#9a9a9a", "#b0b0b0", "#a0a0a0"][i],
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              {i === 0 && <svg viewBox="0 0 100 100" style={{width: "60%"}}><path d="M20 30 Q 20 20 30 20 L 70 20 Q 80 20 80 30 L 80 65 Q 80 85 50 85 Q 20 85 20 65 Z" fill="#3d4d33"/><path d="M35 35 Q 50 45 50 60 M 50 60 Q 50 45 65 35" stroke="#fff" strokeWidth="2" fill="none"/></svg>}
              {i === 1 && <svg viewBox="0 0 100 100" style={{width: "60%"}}><rect x="20" y="30" width="60" height="50" fill="#6b4423" rx="2"/><rect x="20" y="30" width="60" height="8" fill="#8b5e3c"/><circle cx="50" cy="58" r="8" fill="#fff" opacity="0.3"/></svg>}
              {i === 2 && <svg viewBox="0 0 100 100" style={{width: "60%"}}>{[...Array(8)].map((_,j) => <line key={j} x1={25+j*7} y1="15" x2={25+j*7} y2="85" stroke="#fff" strokeWidth="2"/>)}</svg>}
              {i === 3 && <svg viewBox="0 0 100 100" style={{width: "60%"}}><rect x="25" y="25" width="50" height="50" fill="#fff" opacity="0.85"/><rect x="30" y="30" width="40" height="40" stroke="#3a362e" strokeWidth="1" fill="none"/></svg>}
              {i === 4 && <svg viewBox="0 0 100 100" style={{width: "60%"}}><ellipse cx="50" cy="55" rx="35" ry="28" fill="#5a6b4a" opacity="0.85"/><rect x="40" y="45" width="20" height="18" fill="#fff"/></svg>}

              <div className="en-display" style={{
                position: "absolute", top: 20, left: 20,
                fontStyle: "italic", fontSize: 14, color: "rgba(0,0,0,0.5)",
              }}>
                #0{i+1}
              </div>
            </div>
            <div style={{ padding: "24px 0 0" }}>
              <h3 className="jp-display" style={{ fontSize: 26, fontWeight: 500, marginBottom: 4 }}>{p.name}</h3>
              <p className="en-display" style={{ fontSize: 16, fontStyle: "italic", color: "var(--ink-soft)", marginBottom: 12 }}>
                {p.en}
              </p>
              <p style={{ fontSize: 13, lineHeight: 1.8, color: "var(--ink-2)" }}>{p.desc}</p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// === ACCESS — #06 — white section
function AccessK() {
  return (
    <section style={{ padding: "140px 40px", background: "var(--paper)" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <SectionHead num="06" en="ACCESS" jp="店舗情報・アクセス"
          title={<>奈良公園の、すぐそば。</>}
          subtitle="Tucked beside Nara Park." />

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 60, alignItems: "start" }}>
          <div>
            <dl style={{ borderTop: "1px solid var(--ink)" }}>
              {[
                ["ADDRESS", "住所", "〒630-8213 奈良県奈良市登大路町76\n奈良公園バスターミナル東館2階"],
                ["HOURS", "営業時間", "11:00 — 20:00"],
                ["OPEN", "定休日", "年中無休"],
                ["TRAIN", "電車", "近鉄奈良駅より徒歩5分"],
                ["CONTACT", "連絡先", "naramile.nara@example.jp"],
              ].map(([en, jp, val]) => (
                <div key={jp} style={{
                  display: "grid", gridTemplateColumns: "140px 1fr",
                  padding: "22px 0", borderBottom: "1px solid var(--line-soft)",
                }}>
                  <dt>
                    <div className="micro-en">{en}</div>
                    <div className="micro-jp" style={{ marginTop: 4 }}>{jp}</div>
                  </dt>
                  <dd className="jp-display" style={{ fontSize: 15, lineHeight: 1.9, whiteSpace: "pre-line" }}>{val}</dd>
                </div>
              ))}
            </dl>
          </div>
          <div style={{ background: "var(--paper-2)", padding: 16 }}>
            <div style={{
              height: 560, position: "relative", background: "var(--paper-deep)",
              backgroundImage: `repeating-linear-gradient(0deg, transparent 0, transparent 40px, rgba(0,0,0,0.04) 40px, rgba(0,0,0,0.04) 41px),
                repeating-linear-gradient(90deg, transparent 0, transparent 40px, rgba(0,0,0,0.04) 40px, rgba(0,0,0,0.04) 41px)`,
              overflow: "hidden",
            }}>
              <svg viewBox="0 0 600 560" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
                <ellipse cx="320" cy="320" rx="230" ry="140" fill="var(--accent-moss)" opacity="0.2"/>
                <text x="340" y="332" textAnchor="middle" fontFamily="var(--f-mincho)" fontSize="20" fill="var(--ink)" letterSpacing="8">奈良公園</text>
                <text x="340" y="356" textAnchor="middle" fontFamily="var(--f-serif-en)" fontSize="12" fill="var(--ink-soft)" fontStyle="italic" letterSpacing="2">Nara Park</text>
                <path d="M 0 160 Q 150 200 300 180 T 600 220" stroke="var(--accent-moss)" strokeWidth="3" fill="none" opacity="0.6"/>
                <circle cx="430" cy="280" r="5" fill="var(--ink)"/>
                <text x="445" y="285" fontFamily="var(--f-mincho)" fontSize="12" fill="var(--ink)">東大寺</text>
                <circle cx="220" cy="360" r="5" fill="var(--ink)"/>
                <text x="120" y="380" fontFamily="var(--f-mincho)" fontSize="12" fill="var(--ink)">興福寺</text>
                <g transform="translate(320, 220)">
                  <circle r="56" fill="var(--accent-sake)" opacity="0.18"/>
                  <circle r="28" fill="var(--accent-sake)" opacity="0.28"/>
                  <circle r="10" fill="var(--accent-sake)"/>
                  <text y="-42" textAnchor="middle" fontFamily="var(--f-mincho)" fontWeight="500" fontSize="15" fill="var(--ink)" letterSpacing="3">NARAMILE</text>
                </g>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// === NEWS — #07 — gray section
function NewsK() {
  return (
    <section style={{ padding: "140px 40px", background: "var(--paper-2)" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <SectionHead num="07" en="NEWS" jp="お知らせ"
          title="最近のこと。"
          subtitle="Recent stories from NARAMILE." />

        <ul style={{ listStyle: "none", borderTop: "1px solid var(--ink)" }}>
          {NEWS.map((n, i) => (
            <li key={i} style={{
              display: "grid", gridTemplateColumns: "130px 110px 1fr 40px",
              gap: 32, padding: "32px 0",
              borderBottom: "1px solid var(--line)",
              alignItems: "baseline",
              cursor: "pointer",
            }}>
              <span className="en-display" style={{ fontStyle: "italic", color: "var(--ink)" }}>{n.date}</span>
              <span className="micro-en" style={{ color: "var(--accent-sake)" }}>{n.cat}</span>
              <div>
                <div className="jp-display" style={{ fontSize: 18, marginBottom: 4 }}>{n.title}</div>
                <div className="en-display" style={{ fontSize: 14, fontStyle: "italic", color: "var(--ink-soft)" }}>{n.en}</div>
              </div>
              <span style={{ fontSize: 20, color: "var(--ink)" }}>→</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// === FOOTER — dark ink, fully built out
function FooterK() {
  const SAKE_NAMES = SAKE_ITEMS.map(s => s.brewery);
  const PRODUCT_NAMES = PRODUCTS.map(p => p.name);
  return (
    <footer style={{
      background: "var(--ink)", color: "var(--paper)",
      padding: "120px 40px 40px",
      position: "relative", overflow: "hidden",
    }}>
      {/* Big background wordmark — Kurokawa-style ghost type */}
      <div aria-hidden style={{
        position: "absolute", left: "50%", bottom: -80,
        transform: "translateX(-50%)",
        fontFamily: "var(--f-serif-en)",
        fontStyle: "italic", fontWeight: 300,
        fontSize: 320, lineHeight: 1, letterSpacing: "-0.02em",
        color: "rgba(255,255,255,0.04)",
        whiteSpace: "nowrap", pointerEvents: "none",
      }}>
        NARAMILE
      </div>

      <div style={{ maxWidth: 1400, margin: "0 auto", position: "relative" }}>
        {/* Top row — newsletter + tagline split */}
        <div style={{
          display: "grid", gridTemplateColumns: "1.1fr 1fr",
          gap: 80, paddingBottom: 80,
          borderBottom: "1px solid rgba(255,255,255,0.18)",
          alignItems: "end",
        }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
              <span className="en-display" style={{ fontSize: 14, fontStyle: "italic", color: "rgba(255,255,255,0.55)" }}>— 08</span>
              <span style={{ width: 40, height: 1, background: "rgba(255,255,255,0.4)" }} />
              <span className="micro-en" style={{ color: "rgba(255,255,255,0.65)" }}>STAY IN TOUCH</span>
              <span className="micro-jp" style={{ color: "rgba(255,255,255,0.45)" }}>つながる</span>
            </div>
            <h2 className="jp-display" style={{
              fontSize: 56, lineHeight: 1.3, fontWeight: 400, letterSpacing: "0.04em",
              marginBottom: 16,
            }}>
              旅のたよりを、<br/>季節ごとに。
            </h2>
            <p className="en-display" style={{
              fontSize: 22, fontStyle: "italic", color: "rgba(255,255,255,0.55)",
              marginBottom: 32,
            }}>
              Letters from Nara, season by season.
            </p>

            {/* Newsletter input — minimal, line-only */}
            <form style={{
              display: "flex", alignItems: "center", gap: 16,
              maxWidth: 560,
              borderBottom: "1px solid rgba(255,255,255,0.4)",
              paddingBottom: 14,
            }} onSubmit={(e) => e.preventDefault()}>
              <input type="email" placeholder="your@email.com — メールアドレス" style={{
                flex: 1, background: "transparent", border: "none", outline: "none",
                color: "var(--paper)", fontFamily: "var(--f-serif-en)",
                fontSize: 17, fontStyle: "italic",
                padding: "8px 0",
              }} />
              <button type="submit" style={{
                background: "transparent", border: "none", cursor: "pointer",
                color: "var(--paper)", display: "flex", alignItems: "center", gap: 10,
                fontFamily: "var(--f-sans-jp)", fontSize: 13, letterSpacing: "0.15em",
                padding: 0,
              }}>
                <span>登録する</span>
                <span className="en-display" style={{ fontStyle: "italic", fontSize: 12, color: "rgba(255,255,255,0.6)" }}>subscribe</span>
                <span style={{ fontSize: 18 }}>→</span>
              </button>
            </form>
            <p style={{
              fontSize: 11, lineHeight: 1.8, color: "rgba(255,255,255,0.45)",
              marginTop: 14, maxWidth: 540,
            }}>
              季刊。新酒の入荷・季節の催し・休業日のお知らせ。<br/>
              <span className="en-display" style={{ fontStyle: "italic" }}>
                Quarterly. New sake, seasonal events, holiday hours.
              </span>
            </p>
          </div>

          {/* Social card stack */}
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14,
          }}>
            {[
              { en: "Instagram", jp: "インスタグラム", handle: "@naramile.nara", icon: "ig" },
              { en: "Facebook",  jp: "フェイスブック", handle: "/naramile",      icon: "fb" },
              { en: "X (Twitter)", jp: "エックス",     handle: "@naramile_nara", icon: "x"  },
              { en: "Note",      jp: "note",         handle: "/naramile",       icon: "n"  },
            ].map(s => (
              <a key={s.en} href="#" style={{
                display: "block", padding: "22px 22px",
                border: "1px solid rgba(255,255,255,0.2)",
                color: "var(--paper)", textDecoration: "none",
                transition: "background 0.2s",
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 28 }}>
                  <span className="en-display" style={{
                    fontStyle: "italic", fontSize: 18, lineHeight: 1,
                  }}>{s.en}</span>
                  <span style={{ fontSize: 16, opacity: 0.7 }}>↗</span>
                </div>
                <div className="micro-en" style={{ color: "rgba(255,255,255,0.55)", marginBottom: 4 }}>
                  {s.handle}
                </div>
                <div className="micro-jp" style={{ color: "rgba(255,255,255,0.4)" }}>
                  {s.jp}
                </div>
              </a>
            ))}
          </div>
        </div>

        {/* Middle — sitemap (5 cols) */}
        <div style={{
          display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr 1fr",
          gap: 56, padding: "72px 0",
          borderBottom: "1px solid rgba(255,255,255,0.18)",
        }}>
          {/* Brand block */}
          <div>
            <a href="#" style={{ display: "inline-block", marginBottom: 24 }}>
              <img
                src="assets/naramile-logo.png"
                alt="NARAMILE"
                style={{ height: 30, width: "auto", display: "block", filter: "invert(1) brightness(2)" }}
              />
            </a>
            <p className="en-display" style={{
              fontSize: 17, fontStyle: "italic", lineHeight: 1.5,
              color: "rgba(255,255,255,0.6)", marginBottom: 28,
              maxWidth: 320,
            }}>
              come to Nara,<br/>come for NARAMILE.
            </p>
            <p className="jp-display" style={{
              fontSize: 13, lineHeight: 2.1, color: "rgba(255,255,255,0.75)",
            }}>
              〒630-8213<br/>
              奈良県奈良市登大路町76<br/>
              奈良公園バスターミナル 東館2階
            </p>
            <div style={{
              marginTop: 24, paddingTop: 20,
              borderTop: "1px solid rgba(255,255,255,0.15)",
              display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16,
            }}>
              <div>
                <div className="micro-en" style={{ color: "rgba(255,255,255,0.4)", marginBottom: 4 }}>OPEN</div>
                <div className="jp-display" style={{ fontSize: 14 }}>11:00 — 20:00</div>
              </div>
              <div>
                <div className="micro-en" style={{ color: "rgba(255,255,255,0.4)", marginBottom: 4 }}>HOLIDAY</div>
                <div className="jp-display" style={{ fontSize: 14 }}>年中無休</div>
              </div>
            </div>
          </div>

          {/* Column: ABOUT */}
          {[
            {
              en: "ABOUT", jp: "ナラマイル",
              links: [
                ["Our Story", "ナラマイルとは"],
                ["Concept",   "コンセプト"],
                ["The Space", "店舗のご紹介"],
                ["News",      "お知らせ"],
              ],
            },
            {
              en: "MENU", jp: "おしながき",
              links: [
                ["Local Sake",        "奈良の地酒"],
                ["Tasting Sets",      "飲み比べセット"],
                ["Local Products",    "奈良の特産品"],
                ["Matcha Experience", "セルフ抹茶点て体験"],
              ],
            },
            {
              en: "VISIT", jp: "訪れる",
              links: [
                ["Access",    "アクセス"],
                ["Hours",     "営業時間"],
                ["Group",     "団体のご利用"],
                ["Contact",   "お問い合わせ"],
              ],
            },
            {
              en: "INFO", jp: "ご利用案内",
              links: [
                ["FAQ",            "よくあるご質問"],
                ["Privacy Policy", "プライバシーポリシー"],
                ["Terms",          "利用規約"],
                ["Specified Notation", "特定商取引法"],
              ],
            },
          ].map(col => (
            <div key={col.en}>
              <div className="micro-en" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 4 }}>{col.en}</div>
              <div className="micro-jp" style={{ color: "rgba(255,255,255,0.35)", marginBottom: 22 }}>{col.jp}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {col.links.map(([en, jp]) => (
                  <li key={en} style={{ marginBottom: 14 }}>
                    <a href="#" style={{
                      display: "block", textDecoration: "none",
                      color: "rgba(255,255,255,0.9)",
                    }}>
                      <div className="jp-display" style={{ fontSize: 14, lineHeight: 1.4 }}>{jp}</div>
                      <div className="en-display" style={{
                        fontSize: 12, fontStyle: "italic",
                        color: "rgba(255,255,255,0.45)",
                      }}>{en}</div>
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Brewery roll — 取扱酒造一覧 */}
        <div style={{
          padding: "56px 0",
          borderBottom: "1px solid rgba(255,255,255,0.18)",
        }}>
          <div style={{
            display: "grid", gridTemplateColumns: "260px 1fr",
            gap: 56, alignItems: "start",
          }}>
            <div>
              <div className="micro-en" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 4 }}>BREWERIES</div>
              <div className="micro-jp" style={{ color: "rgba(255,255,255,0.35)", marginBottom: 18 }}>取扱酒造</div>
              <p className="en-display" style={{
                fontSize: 14, fontStyle: "italic",
                color: "rgba(255,255,255,0.55)", lineHeight: 1.6,
              }}>
                Twelve breweries from <br/>across the Yamato basin.
              </p>
            </div>
            <ul style={{
              listStyle: "none", margin: 0, padding: 0,
              display: "grid",
              gridTemplateColumns: "repeat(4, 1fr)",
              gap: "12px 24px",
            }}>
              {SAKE_NAMES.map((b, i) => (
                <li key={b} style={{
                  display: "flex", alignItems: "baseline", gap: 12,
                  padding: "8px 0",
                }}>
                  <span className="en-display" style={{
                    fontSize: 11, fontStyle: "italic",
                    color: "rgba(255,255,255,0.35)",
                  }}>
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <a href="#" className="jp-display" style={{
                    fontSize: 14, color: "rgba(255,255,255,0.9)",
                    textDecoration: "none", letterSpacing: "0.04em",
                  }}>
                    {b}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Bottom — payments + language + copyright */}
        <div style={{
          paddingTop: 36,
          display: "grid", gridTemplateColumns: "1fr auto 1fr",
          gap: 32, alignItems: "center",
        }}>
          {/* Left — language + payments */}
          <div style={{ display: "flex", alignItems: "center", gap: 28, flexWrap: "wrap" }}>
            <div style={{
              display: "flex", alignItems: "center", gap: 10,
              fontSize: 12, color: "rgba(255,255,255,0.7)",
            }}>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <circle cx="7" cy="7" r="6" stroke="currentColor" strokeWidth="1"/>
                <path d="M1 7h12M7 1c1.7 1.6 2.7 3.7 2.7 6S8.7 12.4 7 14M7 1C5.3 2.6 4.3 4.7 4.3 7S5.3 11.4 7 13" stroke="currentColor" strokeWidth="0.8"/>
              </svg>
              <a href="#" className="en-display" style={{ fontStyle: "italic", color: "rgba(255,255,255,0.85)" }}>日本語</a>
              <span style={{ color: "rgba(255,255,255,0.3)" }}>/</span>
              <a href="#" className="en-display" style={{ fontStyle: "italic", color: "rgba(255,255,255,0.55)" }}>English</a>
            </div>
            <div style={{
              display: "flex", alignItems: "center", gap: 10,
              fontSize: 11, color: "rgba(255,255,255,0.4)",
              flexWrap: "wrap",
            }}>
              <span className="micro-en">PAYMENT</span>
              {["VISA","Master","JCB","AMEX","PayPay","Suica"].map(p => (
                <span key={p} style={{
                  padding: "4px 10px",
                  border: "1px solid rgba(255,255,255,0.2)",
                  fontSize: 10, letterSpacing: "0.1em",
                  color: "rgba(255,255,255,0.7)",
                  fontFamily: "var(--f-sans-en)",
                }}>{p}</span>
              ))}
            </div>
          </div>

          {/* Center — back to top */}
          <a href="#top" style={{
            width: 44, height: 44, borderRadius: "50%",
            border: "1px solid rgba(255,255,255,0.4)",
            display: "flex", alignItems: "center", justifyContent: "center",
            color: "var(--paper)", textDecoration: "none",
            fontSize: 16,
          }}>
            ↑
          </a>

          {/* Right — copyright */}
          <div style={{
            textAlign: "right",
            display: "flex", flexDirection: "column", gap: 4,
          }}>
            <span className="en-display" style={{
              fontStyle: "italic", fontSize: 12,
              color: "rgba(255,255,255,0.55)",
            }}>
              © 2026 NARAMILE / ナラマイル.
            </span>
            <span className="en-display" style={{
              fontStyle: "italic", fontSize: 11,
              color: "rgba(255,255,255,0.35)",
            }}>
              A Traveler&apos;s Crossroads · Nara, Japan
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  NARAMILE_K_HeaderK: HeaderK,
  NARAMILE_K_HeroK: HeroK,
  NARAMILE_K_AboutK: AboutK,
  NARAMILE_K_SakeK: SakeK,
  NARAMILE_K_MatchaK: MatchaK,
  NARAMILE_K_ProductsK: ProductsK,
  NARAMILE_K_AccessK: AccessK,
  NARAMILE_K_NewsK: NewsK,
  NARAMILE_K_FooterK: FooterK,
});
