// NARAMILE — Variation A: "Editorial Quiet"
// Most faithful to Kurokawa Echoes — black hero with framed image, lots of whitespace
// Vertical Japanese rhythm, horizontal scroll gallery

const IMG = {
  hero1: "https://naramile.com/wpwp/wp-content/uploads/2026/01/S__119988290_0.jpg",
  hero2: "https://naramile.com/wpwp/wp-content/uploads/2026/01/S__119988292_0.jpg",
  interior1: "https://naramile.com/wpwp/wp-content/uploads/2025/10/NARAMILE20251001_097-scaled.jpg",
  interior2: "https://naramile.com/wpwp/wp-content/uploads/2025/10/NARAMILE20251001_122-scaled.jpg",
  about: "https://naramile.com/wpwp/wp-content/uploads/2025/10/NARAMILE20251001_120-scaled.jpg",
  matcha: "https://naramile.com/wpwp/wp-content/uploads/2026/02/matcha2-1024x576.jpg",
};

// Placeholder sake / product imagery — warm tones via CSS
const SAKE_ITEMS = [
  { name: "春鹿", en: "Harushika", brewery: "今西清兵衛商店", region: "奈良市", desc: "奈良を代表する、すっきりと辛口の超辛口純米。" },
  { name: "豊祝", en: "Hoshuku", brewery: "奈良豊澤酒造", region: "奈良市", desc: "古都の地下水で醸す、まろやかで穏やかな酒。" },
  { name: "梅乃宿", en: "Umenoyado", brewery: "梅乃宿酒造", region: "葛城市", desc: "梅酒・果実酒でも知られる葛城の蔵。" },
  { name: "篠峯", en: "Shinomine", brewery: "千代酒造", type: "純米吟醸", region: "御所市", desc: "金剛山麓・葛城の伏流水が育む繊細な味わい。" },
  { name: "猩々", en: "Shōjō", brewery: "北村酒造", region: "吉野町", desc: "吉野杉の里から、芳醇でふくよかな旨口。" },
  { name: "やたがらす", en: "Yatagarasu", brewery: "北岡本店", region: "吉野町", desc: "熊野古道の入口・吉野で醸す、米の旨味が冴える酒。" },
  { name: "喜多酒造", en: "Kita Shuzō", brewery: "喜多酒造", region: "橿原市", desc: "「御代菊」「利兵衛」を醸す大和の老舗。" },
  { name: "菊司", en: "Kikutsukasa", brewery: "菊司醸造", region: "生駒市", desc: "暗峠の麓、やわらかな仕込み水が活きる。" },
  { name: "出世男", en: "Shussedoko", brewery: "河合酒造", region: "橿原市今井町", desc: "重要伝統的建造物群・今井町に佇む江戸の蔵。" },
  { name: "澤田酒造", en: "Sawada Shuzō", brewery: "澤田酒造", region: "香芝市", desc: "「歓喜光」を醸す、家族の手仕事の酒。" },
  { name: "稲田酒造", en: "Inada Shuzō", brewery: "稲田酒造", region: "天理市", desc: "「黒松稲天」で知られる、米の旨味を引き出す造り。" },
  { name: "長龍", en: "Chōryō", brewery: "長龍酒造", region: "広陵町", desc: "大和盆地・広陵の地で醸す、キレと旨味の調和。" },
];

const PRODUCTS = [
  { name: "大和茶", en: "Yamato Tea", desc: "奈良県産の深蒸し煎茶" },
  { name: "奈良漬", en: "Narazuke", desc: "酒粕で漬け込んだ伝統の味" },
  { name: "三輪素麺", en: "Miwa Somen", desc: "手延べの細く白い麺" },
  { name: "吉野葛", en: "Yoshino Kuzu", desc: "吉野山の清らかな葛" },
  { name: "柿の葉寿司", en: "Kakinoha Sushi", desc: "柿の葉で包む押し寿司" },
];

const NEWS = [
  { date: "2026.04.18", cat: "EXPERIENCE", title: "セルフ抹茶点て体験、開始いたしました", en: "Make Your Own Matcha is now open" },
  { date: "2026.04.02", cat: "SAKE", title: "春の新酒入荷のお知らせ", en: "Spring sake selection now available" },
  { date: "2026.03.15", cat: "NEWS", title: "桜の季節の営業時間について", en: "Cherry blossom season opening hours" },
  { date: "2026.02.20", cat: "PRODUCT", title: "新しい大和茶のラインナップ", en: "New Yamato tea selection" },
];

function Header({ variant = "light" }) {
  const isDark = variant === "dark";
  return (
    <header style={{
      position: "absolute", top: 0, left: 0, right: 0, zIndex: 10,
      padding: "28px 48px",
      display: "flex", justifyContent: "space-between", alignItems: "center",
      color: isDark ? "var(--paper)" : "var(--ink)",
      mixBlendMode: isDark ? "normal" : "normal",
    }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
        <div className="jp-display" style={{ fontSize: 22, letterSpacing: "0.15em", fontWeight: 500 }}>
          NARAMILE
        </div>
        <div className="micro-jp" style={{ color: isDark ? "rgba(244,239,230,0.7)" : "var(--ink-soft)" }}>
          ナラマイル
        </div>
      </div>
      <nav style={{ display: "flex", gap: 36, alignItems: "center" }}>
        {[
          ["TOP", "トップ"],
          ["SAKE", "地酒"],
          ["PRODUCTS", "特産品"],
          ["MATCHA", "抹茶体験"],
          ["ACCESS", "アクセス"],
        ].map(([en, jp]) => (
          <a key={en} href="#" style={{
            display: "flex", flexDirection: "column", alignItems: "center", gap: 2,
            fontFamily: "var(--f-sans-en)", fontSize: 11, letterSpacing: "0.22em",
          }}>
            <span>{en}</span>
            <span style={{
              fontFamily: "var(--f-mincho)", fontSize: 10,
              color: isDark ? "rgba(244,239,230,0.55)" : "var(--ink-soft)",
              letterSpacing: "0.15em"
            }}>{jp}</span>
          </a>
        ))}
        <div style={{
          width: 1, height: 24,
          background: isDark ? "rgba(244,239,230,0.3)" : "var(--line)"
        }} />
        <a href="#" style={{ fontFamily: "var(--f-sans-en)", fontSize: 11, letterSpacing: "0.22em" }}>JA / EN</a>
      </nav>
    </header>
  );
}

// === HERO — Variant A: black hero, framed full-bleed portrait image ===
function HeroA() {
  return (
    <section style={{
      position: "relative",
      background: "var(--accent-sumi)",
      color: "var(--paper)",
      minHeight: 920,
      padding: "140px 48px 80px",
      overflow: "hidden",
    }}>
      <Header variant="dark" />

      {/* Vertical side tag */}
      <div className="vertical-jp" style={{
        position: "absolute", left: 48, top: "48%", transform: "translateY(-50%)",
        fontSize: 13, color: "rgba(244,239,230,0.5)",
        letterSpacing: "0.5em",
      }}>
        奈良に参るなら、ナラマイル
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 520px",
        gap: 80,
        maxWidth: 1400, margin: "0 auto",
        alignItems: "start",
      }}>
        {/* LEFT — Title block */}
        <div style={{ paddingTop: 80 }}>
          <div style={{
            display: "flex", alignItems: "center", gap: 16, marginBottom: 48,
          }}>
            <div style={{ width: 48, height: 1, background: "rgba(244,239,230,0.4)" }} />
            <span className="micro-en" style={{ color: "rgba(244,239,230,0.6)" }}>
              A TRAVELER&apos;S CROSSROADS · 奈良公園バスターミナル
            </span>
          </div>

          <h1 className="jp-display" style={{
            fontSize: 88, lineHeight: 1.3, fontWeight: 400,
            letterSpacing: "0.05em", marginBottom: 48,
          }}>
            ここは、旅人の<br/>
            中継地点。
          </h1>

          <p className="en-display" style={{
            fontSize: 38, lineHeight: 1.4, fontWeight: 300,
            color: "rgba(244,239,230,0.85)", marginBottom: 80,
            maxWidth: 560,
          }}>
            A traveler&apos;s<br/>crossroads.<br/>
            <span style={{ fontStyle: "normal", fontSize: 32 }}>Stop. Find wonder.</span>
          </p>

          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40,
            paddingTop: 40, borderTop: "1px solid rgba(244,239,230,0.2)",
            maxWidth: 560,
          }}>
            <div>
              <div className="micro-en" style={{ color: "rgba(244,239,230,0.5)", marginBottom: 8 }}>
                LOCATION
              </div>
              <div style={{ fontFamily: "var(--f-mincho)", fontSize: 15, lineHeight: 1.8 }}>
                奈良公園バスターミナル<br/>東館2階
              </div>
            </div>
            <div>
              <div className="micro-en" style={{ color: "rgba(244,239,230,0.5)", marginBottom: 8 }}>
                OPEN
              </div>
              <div style={{ fontFamily: "var(--f-mincho)", fontSize: 15, lineHeight: 1.8 }}>
                11:00 — 20:00<br/>年中無休
              </div>
            </div>
          </div>
        </div>

        {/* RIGHT — framed image */}
        <div style={{ position: "relative", paddingTop: 0 }}>
          <div style={{
            border: "1px solid rgba(244,239,230,0.2)",
            padding: 14,
            position: "relative",
          }}>
            <img src={IMG.hero1} style={{
              width: "100%", height: 680, objectFit: "cover",
              filter: "contrast(0.95) saturate(0.9)",
            }} />
            <div className="micro-en" style={{
              position: "absolute", bottom: -24, right: 0,
              color: "rgba(244,239,230,0.5)",
            }}>
              NARAMILE / INTERIOR — NARA, JAPAN
            </div>
          </div>
        </div>
      </div>

      {/* Bottom scroll hint */}
      <div style={{
        position: "absolute", bottom: 40, left: "50%", transform: "translateX(-50%)",
        display: "flex", flexDirection: "column", alignItems: "center", gap: 12,
      }}>
        <span className="micro-en" style={{ color: "rgba(244,239,230,0.5)" }}>SCROLL</span>
        <div style={{ width: 1, height: 40, background: "rgba(244,239,230,0.3)" }}>
          <div style={{
            width: 1, height: 16, background: "var(--paper)",
            animation: "scrollHint 2s ease-in-out infinite",
          }} />
        </div>
      </div>
      <style>{`
        @keyframes scrollHint {
          0%,100% { transform: translateY(0); opacity: 0; }
          50% { transform: translateY(24px); opacity: 1; }
        }
      `}</style>
    </section>
  );
}

window.NARAMILE_A_Data = { IMG, SAKE_ITEMS, PRODUCTS, NEWS };
window.NARAMILE_A_Header = Header;
window.NARAMILE_A_HeroA = HeroA;