// ── AVANTI INTERNI — FULL WEBSITE ──────────────────────────────────────────

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#C8A97A",
  "heroSize": 96,
  "navStyle": "transparent",
  "showStats": true,
  "lang": "en"
}/*EDITMODE-END*/;

// ── PROJECTS ─ grouped by project (not category) ──────────────────────────────
const PROJECTS = [
  {
    id: "s59",
    title: { en: "Private Residence S59", th: "บ้านพักอาศัย S59" },
    location: { en: "Sukhumvit, Bangkok", th: "สุขุมวิท กรุงเทพฯ" },
    type: { en: "Private Residence", th: "บ้านพักอาศัย" },
    designer: "PIA",
    summary: {
      en: "A multi-level private residence in Sukhumvit combining bronze, wood and Italian marble. The full interior — from grand dining and double-height living lounge to private whisky bar and master suite — was custom built-in by Avanti Interni's in-house team.",
      th: "บ้านพักอาศัยส่วนตัวย่านสุขุมวิทผสมผสานวัสดุทองสัมฤทธิ์ ไม้ และหินอ่อนอิตาเลียน งานตกแต่งภายในทั้งหลัง ตั้งแต่ห้องรับประทานอาหารใหญ่ ห้องนั่งเล่นโอ่งโถง บาร์วิสกี้ส่วนตัว ไปจนถึงห้องนอนใหญ่ ผลิตและติดตั้งโดยทีมงานของอแวนติ เอนเตอร์นี"
    },
    cover: "images/s59-living-curtain.jpg",
    images: [
      { src: "images/s59-living-curtain.jpg",   caption: { en: "Living Lounge",      th: "ห้องนั่งเล่น" } },
      { src: "images/s59-living-wide.jpg",      caption: { en: "Bronze Feature Wall", th: "ผนังสเตนเลส" } },
      { src: "images/s59-living-bronze.jpg",    caption: { en: "Reading Corner",     th: "มุมพักผ่อน" } },
      { src: "images/s59-dining-portrait.jpg",  caption: { en: "Grand Dining",       th: "ห้องรับประทานหลัก" } },
      { src: "images/s59-dining-bar-wide.jpg",  caption: { en: "Dining & Bar",       th: "ทานอาหาร & บาร์" } },
      { src: "images/s59-whisky-bar.jpg",       caption: { en: "Private Whisky Bar", th: "บาร์วิสกี้" } },
      { src: "images/s59-bedroom.jpg",          caption: { en: "Master Bedroom",     th: "ห้องนอนใหญ่" } },
      { src: "images/s59-bathroom-marble.jpg",  caption: { en: "Marble Bathroom",    th: "ห้องน้ำหินอ่อน" } },
      { src: "images/s59-dining-mezzanine.jpg", caption: { en: "Dining from Mezzanine", th: "ห้องอาหารมองจากชั้นลอย" } },
    ],
  },
  {
    id: "r185",
    title: { en: "185 Ratchadamri", th: "185 ราชดำริ" },
    location: { en: "Ratchadamri, Bangkok", th: "ราชดำริ กรุงเทพฯ" },
    type: { en: "Private Residence", th: "บ้านพักอาศัย" },
    designer: "Pakorn Kanjanarintr",
    summary: {
      en: "A high-rise private residence at 185 Ratchadamri with sweeping Lumphini and central Bangkok views. Avanti Interni delivered full built-in cabinetry, wardrobes and kitchen joinery in a restrained palette of pale travertine, dark walnut and brushed metal — a quietly luxurious counterpoint to the city skyline outside.",
      th: "ที่พักอาศัยบนตึกสูงย่าน 185 ราชดำริ พร้อมวิวสวนลุมพินีและกรุงเทพฯ ใจกลางเมือง อแวนติ เอนเตอร์นี รับผิดชอบงานบิลท์อินทั้งหมด ตั้งแต่ตู้เก็บของ ตู้เสื้อผ้า ครัว ในโทนสีหินเทรเวอร์ทีน ไม้วอลนัตเข้ม และโลหะแปรง — สง่างามแบบเรียบหรู"
    },
    cover: "images/r185-living-cityview.jpg",
    images: [
      { src: "images/r185-living-cityview.jpg",   caption: { en: "Living Room — City View",     th: "ห้องนั่งเล่น — วิวเมือง" } },
      { src: "images/r185-dining-cityview.jpg",   caption: { en: "Dining — Skyline View",       th: "ห้องอาหาร — วิวเมือง" } },
      { src: "images/r185-dining-vertical.jpg",   caption: { en: "Dining Corner",               th: "มุมห้องอาหาร" } },
      { src: "images/r185-kitchen-marble.jpg",    caption: { en: "Kitchen & Dining",            th: "ครัวและห้องอาหาร" } },
      { src: "images/r185-living-marble.jpg",     caption: { en: "Living Detail",               th: "รายละเอียดห้องนั่งเล่น" } },
      { src: "images/r185-living-lounge.jpg",     caption: { en: "Lounge",                      th: "เลาจน์" } },
      { src: "images/r185-kitchen-dining.jpg",    caption: { en: "Kitchen Joinery",             th: "งานครัวบิลท์อิน" } },
      { src: "images/r185-kitchen-mirrors.jpg",   caption: { en: "Mirrored Kitchen",            th: "ครัวกระจกเงา" } },
      { src: "images/r185-dining-wide.jpg",       caption: { en: "Dining — Wide View",          th: "ห้องอาหาร — มุมกว้าง" } },
      { src: "images/r185-dining-warm.jpg",       caption: { en: "Warm Dining",                 th: "ห้องอาหารโทนอุ่น" } },
      { src: "images/r185-hallway-mirrors.jpg",   caption: { en: "Mirrored Hallway",            th: "ทางเดินกระจกเงา" } },
      { src: "images/r185-bathroom.jpg",          caption: { en: "Bathroom",                    th: "ห้องน้ำ" } },
      { src: "images/r185-bathroom-cityview.jpg", caption: { en: "Bathroom — City View",        th: "ห้องน้ำ — วิวเมือง" } },
      { src: "images/r185-bathroom-marble.jpg",   caption: { en: "Marble Bath & Shower",        th: "ห้องน้ำหินอ่อนและฝักบัว" } },
    ],
  },
  {
    id: "ichirin",
    title: { en: "Ichirin Wellness", th: "อิจิริน เวลเนส" },
    location: { en: "Sukhumvit 24, Bangkok", th: "สุขุมวิท 24 กรุงเทพฯ" },
    type: { en: "Wellness · Onsen & Sauna", th: "ออนเซ็น & สปา" },
    designer: "Sirine Design",
    summary: {
      en: "A full Japanese-style onsen & sauna destination on Sukhumvit 24. Avanti Interni delivered the entire interior fit-out — from the sento bathing rooms with sourced Japanese tile and timber, to the cedar-clad sauna dome, salt-stone relaxation cave, tatami rest rooms and the timber-screen lounges. Every wet area was engineered with full waterproofing and Japanese-spec drainage to keep the experience uncompromisingly authentic.",
      th: "ออนเซ็น & ซาวน่าสไตล์ญี่ปุ่นเต็มรูปแบบบนสุขุมวิท 24 อแวนติ เอนเตอร์นี รับผิดชอบงานตกแต่งภายในทั้งหมด ตั้งแต่ห้องอาบน้ำเซ็นโตะปูกระเบื้องและไม้นำเข้าจากญี่ปุ่น โดมซาวน่าไม้ซีดาร์ ห้องผ่อนคลายเกลือหิมาลัย ห้องพักทาทามิ และเลาจน์ผนังไม้ระแนง พื้นที่เปียกทุกจุดออกแบบระบบกันซึมและระบายน้ำมาตรฐานญี่ปุ่น เพื่อประสบการณ์ที่แท้จริงไม่ประนีประนอม"
    },
    cover: "images/ichirin-pattern-wall.jpg",
    images: [
      { src: "images/ichirin-pattern-wall.jpg",    caption: { en: "Entry — Japanese Pattern Screen", th: "ทางเข้า — ผนังลายญี่ปุ่น" } },
      { src: "images/ichirin-pool.jpg",            caption: { en: "Onsen Bathing Pool",             th: "บ่อแช่ออนเซ็น" } },
      { src: "images/ichirin-stone-bath.jpg",      caption: { en: "Stone-tile Sento",               th: "เซ็นโตะกระเบื้องหิน" } },
      { src: "images/ichirin-sento.jpg",           caption: { en: "Wash Stations",                  th: "พื้นที่อาบน้ำ" } },
      { src: "images/ichirin-shower-light.jpg",    caption: { en: "Shower Booths — Wood",           th: "ห้องอาบน้ำไม้" } },
      { src: "images/ichirin-shower-light2.jpg",   caption: { en: "Shower Booths — Mosaic",         th: "ห้องอาบน้ำกระเบื้องโมเสก" } },
      { src: "images/ichirin-shower2.jpg",         caption: { en: "Shower Booths — Detail",         th: "รายละเอียดห้องอาบน้ำ" } },
      { src: "images/ichirin-shower-detail.jpg",   caption: { en: "Brick-tile Shower",              th: "ห้องอาบน้ำกระเบื้องอิฐ" } },
      { src: "images/ichirin-shower.jpg",          caption: { en: "Cold Plunge — Approach",         th: "โซน Cold Plunge" } },
      { src: "images/ichirin-cold-pool.jpg",       caption: { en: "Cold Water Bath — LED",          th: "บ่อน้ำเย็น — ไฟ LED" } },
      { src: "images/ichirin-cold-plunge-dark.jpg",caption: { en: "Cold Plunge — Drama",            th: "Cold Plunge โทนเข้ม" } },
      { src: "images/ichirin-sauna.jpg",           caption: { en: "Cedar Sauna Dome",               th: "โดมซาวน่าไม้ซีดาร์" } },
      { src: "images/ichirin-salt-room.jpg",       caption: { en: "Salt Stone Cave",                th: "ห้องเกลือหิมาลัย" } },
      { src: "images/ichirin-salt-cave.jpg",       caption: { en: "Salt Cave — Entry",              th: "ทางเข้าห้องเกลือ" } },
      { src: "images/ichirin-hot-stones.jpg",      caption: { en: "Hot Stone Relaxation",           th: "หินร้อนผ่อนคลาย" } },
      { src: "images/ichirin-tatami.jpg",          caption: { en: "Tatami Rest Room",               th: "ห้องพักทาทามิ" } },
      { src: "images/ichirin-tatami-sanctuary.jpg",caption: { en: "Tatami Sanctuary",               th: "ห้องสมาธิทาทามิ" } },
      { src: "images/ichirin-tatami-lounge2.jpg",  caption: { en: "Tatami Lounge — Shoji",          th: "เลาจน์ทาทามิ — โชจิ" } },
      { src: "images/ichirin-tatami2.jpg",         caption: { en: "Tatami Lounge",                  th: "เลาจน์ทาทามิ" } },
      { src: "images/ichirin-lounge.jpg",          caption: { en: "Double-height Lounge",           th: "เลาจน์เพดานสูง" } },
      { src: "images/ichirin-vanity.jpg",          caption: { en: "Powder Room",                    th: "ห้องแต่งตัว" } },
      { src: "images/ichirin-locker-light.jpg",    caption: { en: "Locker Room — Light Oak",        th: "ห้องล็อกเกอร์ไม้โอ๊คอ่อน" } },
      { src: "images/ichirin-locker.jpg",          caption: { en: "Locker Room — Walnut",           th: "ห้องล็อกเกอร์ไม้วอลนัต" } },
      { src: "images/ichirin-locker-dark.jpg",     caption: { en: "Locker Room — Dark",             th: "ห้องล็อกเกอร์โทนเข้ม" } },
    ],
  },
  {
    id: "sculptural-house",
    title: { en: "Private Residence #1", th: "บ้านพักอาศัย #1" },
    location: { en: "Bangkok", th: "กรุงเทพฯ" },
    type: { en: "Private Residence", th: "บ้านพักอาศัย" },
    designer: "PIA",
    summary: {
      en: "An architecturally sculptural private residence where Avanti Interni executed the bespoke interior — a timber pivot entry beneath faceted skylights, a copper-clad gallery, free-form cast vessels and a cast-stone bathing suite. Every surface, from the seamless concrete walls to the curved organic forms, was custom built and finished in-house.",
      th: "บ้านพักอาศัยส่วนตัวที่โดดเด่นด้วยงานสถาปัตยกรรมเชิงประติมากรรม อแวนติ เอนเตอร์นี รับผิดชอบงานตกแต่งภายในทั้งหมด ตั้งแต่ประตูบานเปลือยไม้ใต้ช่องแสงเหลี่ยมมุม แกลเลอรีผนังทองแดง งานหล่อรูปทรงอิสระ ไปจนถึงห้องน้ำหินหล่อ ทุกพื้นผิวตั้งแต่ผนังคอนกรีตเรียบเนียนไปจนถึงรูปทรงโค้งออร์แกนิก ผลิตและติดตั้งโดยทีมงานของเราเอง"
    },
    cover: "images/res-copper-hall.jpg",
    images: [
      { src: "images/res-copper-hall.jpg",      caption: { en: "Copper-clad Gallery",          th: "แกลเลอรีผนังทองแดง" } },
      { src: "images/res-entry-pivot.jpg",     caption: { en: "Sculptural Entry — Pivot Door", th: "ทางเข้า — ประตูบานเปลือยไม้" } },
      { src: "images/res-stair-vessels.jpg",    caption: { en: "Stair & Cast Vessels",         th: "บันไดและงานหล่อประติมากรรม" } },
      { src: "images/res-sculpture-room.jpg",   caption: { en: "Sculpture Niche",              th: "มุมประติมากรรม" } },
      { src: "images/res-bath-stone.jpg",       caption: { en: "Cast-stone Bath",              th: "ห้องน้ำอ่างหินหล่อ" } },
      { src: "images/res-bath-papyrus.jpg",     caption: { en: "Powder Room — Papyrus Court",  th: "ห้องน้ำ — สวนกก" } },
    ],
  },
  {
    id: "tomi-sushi",
    title: { en: "Tomi Sushi Omakase", th: "โทมิ ซูชิ โอมากาเสะ" },
    location: { en: "Bangkok", th: "กรุงเทพฯ" },
    type: { en: "Omakase Restaurant", th: "ร้านโอมากาเสะ" },
    designer: "Chic Republic (Chich Design Studio)",
    summary: {
      en: "An intimate omakase restaurant in warm white oak, where Avanti Interni built the full interior to Chic Republic's design. Curved fluted-oak walls with concealed cove lighting lead to a live-edge dining counter beneath a faceted skylight, complemented by cane-screen dressing areas, an arched private suite and a bespoke timber capsule sleeping nook — every surface custom-veneered and finished in-house.",
      th: "ร้านโอมากาเสะสุดพิเศษในโทนไม้โอ๊คขาวอบอุ่น อแวนติ เอนเตอร์นี รับผิดชอบงานตกแต่งภายในทั้งหมดตามแบบของ Chic Republic ตั้งแต่ผนังไม้โอ๊คเซาะร่องโค้งซ่อนไฟ เคาน์เตอร์ไม้ขอบธรรมชาติใต้ช่องแสงเหลี่ยมมุม ไปจนถึงมุมแต่งตัวผนังหวาย ห้องส่วนตัวซุ้มโค้ง และมุมนอนแคปซูลไม้สั่งทำพิเศษ ทุกพื้นผิวปิดผิวไม้และเก็บงานโดยทีมงานของเราเอง"
    },
    cover: "images/tomi-curved-corridor.jpg",
    images: [
      { src: "images/tomi-curved-corridor.jpg",   caption: { en: "Curved Fluted-Oak Corridor", th: "ทางเดินไม้โอ๊คโค้งเซาะร่อง" } },
      { src: "images/tomi-omakase-table.jpg",      caption: { en: "Live-Edge Dining Counter",   th: "เคาน์เตอร์ไม้ขอบธรรมชาติ" } },
      { src: "images/tomi-curved-wall-dining.jpg", caption: { en: "Curved Cove-Lit Wall",       th: "ผนังโค้งซ่อนไฟ" } },
      { src: "images/tomi-omakase-counter.jpg",    caption: { en: "Omakase Room",               th: "ห้องโอมากาเสะ" } },
      { src: "images/tomi-mirror-entry.jpg",       caption: { en: "Mirror Entry & Lit Niche",   th: "ทางเข้ากระจกและช่องไฟ" } },
      { src: "images/tomi-dressing-cane.jpg",      caption: { en: "Cane-Screen Dressing Area",  th: "มุมแต่งตัวผนังหวาย" } },
      { src: "images/tomi-bedroom-arch.jpg",       caption: { en: "Arched Private Suite",       th: "ห้องส่วนตัวซุ้มโค้ง" } },
      { src: "images/tomi-capsule-beds.jpg",       caption: { en: "Timber Capsule Nook",        th: "มุมนอนแคปซูลไม้" } },
      { src: "images/tomi-hallway-door.jpg",       caption: { en: "Concealed-Door Hallway",     th: "ทางเดินประตูซ่อน" } },
    ],
  },
];

// ── COPY ─────────────────────────────────────────────────────────────────────
const COPY = {
  en: {
    nav: ["Home", "About", "Projects", "Products", "Contact"],
    hero: {
      tagline: "Thailand's Leading Interior",
      headline: "Built-In & House\nProduct Company",
      sub: "More than 100 completed projects throughout Thailand",
      cta: "View Projects",
    },
    stats: [
      { n: "50+", label: "Years of Experience" },
      { n: "100+", label: "Completed Projects" },
      { n: "3", label: "Specialisations" },
      { n: "100%", label: "Client Satisfaction" },
    ],
    about: {
      title: "About Avanti Interni",
      body: "Avanti Interni Co., Ltd. is a Thai interior contracting company with more than 25 years of modern, high-quality work. Through a European-inspired work system, most clients are highly satisfied with our results. We specialize in residential projects, hotels, private condominiums and communities — with more than 50 completed projects throughout Thailand and overseas.",
      body2: "Through experience and the variety of projects we have undertaken, our company has become a trusted name in the interior field. Avanti Interni also provides customers with the best services both before and after project completion.",
      mission: "Craftsmanship guided by European standards, delivered across Thailand.",
    },
    services: {
      title: "Products & Services",
      items: [
        {
          num: "01",
          name: "Access Panel — ช่องเซอร์วิส (Pioneer in Thailand)",
          desc: "We are the first company creating high-functional, lightweight access panels in Thailand — installed in leading service companies, hotels and residential projects nationwide.",
          detail: "Avanti Interni is the pioneer of lightweight, high-performance access panels (ช่องเซอร์วิส) in Thailand. Our panels provide concealed access to plumbing, electrical and HVAC systems behind walls and ceilings — engineered for durability, seamless finish, and ease of use. Trusted by leading contractors, hotels and property developers across Thailand.",
          features: ["Waterproof", "Magnetic pull-to-open / close", "Custom sizes to order", "Used in 5-star hotels & condominiums"],
        },
        {
          num: "02",
          name: "Built-In Furniture",
          desc: "We implement a mix of CNC machines and handcraft within every project. With workers averaging more than 20 years of experience, our built-ins meet the highest standards.",
          detail: "Our built-in furniture is crafted using precision CNC machinery combined with traditional handcraft skills. From wardrobes and kitchen cabinets to full bedroom and living room installations, every piece is designed to maximise space, functionality, and aesthetic harmony.",
          features: ["CNC precision cutting", "Custom dimensions", "European hardware", "Pre-assembly quality check", "On-site installation", "After-sales service"],
        },
      ],
    },
    specialisations: {
      title: "Our Specialisations",
      items: [
        { name: "Residences", desc: "Private homes and condominiums designed and built with European-standard craftsmanship. From bespoke built-ins to full interior delivery, our work serves Bangkok's most discerning homeowners." },
        { name: "Wellness Spaces", desc: "Specialised in Onsen, Sauna and Spa interiors — combining waterproofing engineering, premium stone and timber finishes, and a calm sensory atmosphere built to last." },
        { name: "Craftsmanship", desc: "With more than 25 years of work our craftsmanship far exceeds most client expectations. Pre-assembly to on-site installation — some projects completed ahead of schedule." },
      ],
    },
    craft: {
      label: "Craftsmanship",
      title: "In the Workshop",
      intro: "Every curve begins on our factory floor. From engineered framework to hand-fitted timber cladding, our team shapes complex forms in-house — built to European standards long before they reach a site.",
      steps: ["Structural frame", "Shell assembly", "Interior forming", "Timber cladding", "Finished form"],
    },
    projects: {
      title: "Project References",
      subtitle: "A selection of completed works across Thailand",
      categories: ["All", "Residential", "Hotel", "Community", "Commercial"],
      items: [
        { title: "Private Residence S59 — Living Lounge",     cat: "Residential", image: "images/s59-living-curtain.jpg" },
        { title: "Private Residence S59 — Bronze Feature",     cat: "Residential", image: "images/s59-living-wide.jpg" },
        { title: "Private Residence S59 — Reading Corner",     cat: "Residential", image: "images/s59-living-bronze.jpg" },
        { title: "Private Residence S59 — Grand Dining",       cat: "Residential", image: "images/s59-dining-portrait.jpg" },
        { title: "Private Residence S59 — Dining & Bar",        cat: "Residential", image: "images/s59-dining-bar-wide.jpg" },
        { title: "Private Residence S59 — Whisky Bar",          cat: "Residential", image: "images/s59-whisky-bar.jpg" },
        { title: "Private Residence S59 — Master Bedroom",      cat: "Residential", image: "images/s59-bedroom.jpg" },
        { title: "Private Residence S59 — Marble Bathroom",     cat: "Residential", image: "images/s59-bathroom-marble.jpg" },
        { title: "Private Residence S59 — Dining from Mezzanine", cat: "Residential", image: "images/s59-dining-mezzanine.jpg" },
      ],
    },
    contact: {
      title: "Contact Us",
      subtitle: "We'd love to discuss your project",
      address: "73/5 Soi NangSanit, Tambon Bang Phli Yai,\nAmphoe Bang Phli, Samut Prakan 10540",
      firmEmail: "avantiinterni@gmail.com",
      facebook: "https://www.facebook.com/Avanti.interni/",
      line: "@avanti.interni",
      mapUrl: "https://share.google/3KAV2G8alPOu9ly51",
      persons: [
        { name: "Chanuti Sukhumcharoenchit", email: "cj.sukhum@gmail.com", phone: "(+66) 87-823-5525" },
        { name: "Thadaporn Suksukont", email: "Jibthadaporn@gmail.com", phone: "(+66) 89-939-4745" },
      ],
    },
    footer: "© 2024 Avanti Interni Co., Ltd. All rights reserved.",
  },
  th: {
    nav: ["หน้าแรก", "เกี่ยวกับ", "ผลงาน", "สินค้า", "ติดต่อ"],
    hero: {
      tagline: "ผู้นำด้านการตกแต่งภายใน",
      headline: "บริษัทรับเหมา\nตกแต่งภายใน",
      sub: "ประสบการณ์กว่า 100 โครงการทั่วประเทศไทย",
      cta: "ดูผลงาน",
    },
    stats: [
      { n: "50+", label: "ปีประสบการณ์" },
      { n: "100+", label: "โครงการสำเร็จ" },
      { n: "3", label: "ความเชี่ยวชาญ" },
      { n: "100%", label: "ความพึงพอใจของลูกค้า" },
    ],
    about: {
      title: "เกี่ยวกับอแวนติ เอนเตอร์นี",
      body: "บริษัท อแวนติ เป็นบริษัทดำเนินงานทางด้านรับเหมาตกแต่งภายใน มากว่า 25 ปีที่ทันสมัยและคุณภาพดี ด้วยการทำงานของระบบจากยุโรปทำให้ลูกค้าส่วนใหญ่พึงพอใจต่อผลงานเรา เราเชี่ยวชาญด้านโครงการที่อยู่อาศัย โรงแรม คอนโดมิเนียมส่วนตัว และชุมชน พร้อมด้วยโครงการที่เสร็จสมบูรณ์มากกว่า 100 โครงการทั่วประเทศและต่างประเทศ",
      body2: "ด้วยประสบการณ์และความหลากหลายของโครงการ บริษัทของเราได้กลายเป็นบริษัทที่น่าเชื่อถือในสาขาการตกแต่งภายใน อแวนติ เอนเตอร์นี ยังมอบบริการที่ดีที่สุดแก่ลูกค้าทั้งก่อนและหลังโครงการ",
      mission: "งานฝีมือตามมาตรฐานยุโรป ส่งมอบทั่วประเทศไทย",
    },
    services: {
      title: "สินค้าและบริการ",
      items: [
        { num: "01", name: "Access Panel — ช่องเซอร์วิส", desc: "เราเป็นบริษัทแรกในไทยที่สร้าง access panel น้ำหนักเบาและใช้งานได้หลากหลาย ติดตั้งในบริษัทชั้นนำทั่วประเทศ", detail: "Avanti Interni เป็นผู้บุกเบิกผลิต access panel (ช่องเซอร์วิส) น้ำหนักเบาสมรรถภาพสูงในไทย ใช้ในโรงแรมชั้นนำ คอนโด และโครงการอสังหาริมทั่วประเทศ", features: ["กันน้ำ", "เปิด-ปิดด้วยแม่เหล็ก", "สั่งทำขนาดพิเศษ", "ใช้ในโรงแรม 5 ดาว"] },
        { num: "02", name: "เฟอร์นิเจอร์บิลท์อิน", desc: "เราใช้เครื่อง CNC ผสมผสานกับงานฝีมือในทุกโครงการ ด้วยช่างที่มีประสบการณ์กว่า 20 ปี", detail: "ผลิตเฟอร์นิเจอร์บิ้วอินด้วยเครื่อง CNC ความแม่นยำ ตั้งแต่ตู้เสื้อผ้า ตู้ครัว ไปจนถึงห้องนอนและห้องนั่งเล่นครบวงจร", features: ["CNC precision", "ขนาดทำตามสั่ง", "FITTING HAFELE & BLUM", "ตรวจก่อนส่ง", "ติดตั้ง on-site", "บริการหลังการขาย"] },
      ],
    },
    specialisations: {
      title: "ความเชี่ยวชาญของเรา",
      items: [
        { name: "บ้านพักอาศัย", desc: "บ้านส่วนตัวและคอนโดมิเนียมแบบ hi-end ได้รับงานฝีมือมาตรฐานยุโรป ตั้งแต่บิลท์อินจนถึงตกแต่งภายในครบวงจร" },
        { name: "ออนเซ็น & สปา", desc: "เชี่ยวชาญงานตกแต่ง Onsen ซาวน่า และ Spa ผสมผสานระบบกันซึมของยุโรป วัสดุหินและไม้ระดับพรีเมียม สร้างบรรยากาศแห่งการผ่อนคลายที่ยั่งยืน" },
        { name: "งานฝีมือ", desc: "ด้วยประสบการณ์กว่า 25 ปี งานของเราเกินความคาดหวังของลูกค้า ตั้งแต่การประกอบล่วงหน้าจนถึงการติดตั้งในสถานที่" },
      ],
    },
    craft: {
      label: "งานฝีมือ",
      title: "เบื้องหลังงานคราฟต์",
      intro: "ทุกเส้นโค้งเริ่มต้นที่โรงงานของเรา ตั้งแต่งานโครงสร้างวิศวกรรมไปจนถึงการกรุไม้ด้วยมือ ทีมช่างขึ้นรูปงานที่ซับซ้อนเองทุกขั้นตอน ตามมาตรฐานยุโรปก่อนส่งถึงหน้างานจริง",
      steps: ["งานโครงสร้าง", "ประกอบเปลือกผนัง", "ขึ้นรูปภายใน", "กรุไม้", "งานสำเร็จ"],
    },
    projects: {
      title: "ผลงานอ้างอิง",
      subtitle: "ตัวอย่างผลงานที่เสร็จสมบูรณ์ทั่วประเทศไทย",
      categories: ["ทั้งหมด", "ที่อยู่อาศัย", "โรงแรม", "ชุมชน", "พาณิชยกรรม"],
      items: [
        { title: "บ้านพักอาศัย S59 — ห้องนั่งเล่น",     cat: "ที่อยู่อาศัย", image: "images/s59-living-curtain.jpg" },
        { title: "บ้านพักอาศัย S59 — ผนังสเตนเลส",       cat: "ที่อยู่อาศัย", image: "images/s59-living-wide.jpg" },
        { title: "บ้านพักอาศัย S59 — มุมพักผ่อน",      cat: "ที่อยู่อาศัย", image: "images/s59-living-bronze.jpg" },
        { title: "บ้านพักอาศัย S59 — ห้องรับประทานหลัก", cat: "ที่อยู่อาศัย", image: "images/s59-dining-portrait.jpg" },
        { title: "บ้านพักอาศัย S59 — ทานอาหาร & บาร์",  cat: "ที่อยู่อาศัย", image: "images/s59-dining-bar-wide.jpg" },
        { title: "บ้านพักอาศัย S59 — บาร์วิสกี้",       cat: "ที่อยู่อาศัย", image: "images/s59-whisky-bar.jpg" },
        { title: "บ้านพักอาศัย S59 — ห้องนอนใหญ่",     cat: "ที่อยู่อาศัย", image: "images/s59-bedroom.jpg" },
        { title: "บ้านพักอาศัย S59 — ห้องน้ำหินอ่อน",    cat: "ที่อยู่อาศัย", image: "images/s59-bathroom-marble.jpg" },
        { title: "บ้านพักอาศัย S59 — ห้องอาหารมองจากชั้นลอย", cat: "ที่อยู่อาศัย", image: "images/s59-dining-mezzanine.jpg" },
      ],
    },
    contact: {
      title: "ติดต่อเรา",
      subtitle: "ยินดีรับฟังโครงการของคุณ",
      address: "73/5 ซอยนางสาวนิต ตำบลบางพลีใหญ่\nอำเภอบางพลี จังหวัดสมุทรปราการ 10540",
      firmEmail: "avantiinterni@gmail.com",
      facebook: "https://www.facebook.com/Avanti.interni/",
      line: "@avanti.interni",
      mapUrl: "https://share.google/3KAV2G8alPOu9ly51",
      persons: [
        { name: "Chanuti Sukhumcharoenchit", email: "cj.sukhum@gmail.com", phone: "(+66) 87-823-5525" },
        { name: "Thadaporn Suksukont", email: "Jibthadaporn@gmail.com", phone: "(+66) 89-939-4745" },
      ],
    },
    footer: "© 2024 Avanti Interni Co., Ltd. สงวนลิขสิทธิ์",
  },
};

// ── SHARED STYLES ─────────────────────────────────────────────────────────────
const siteStyles = `
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes lineGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  .anim-fadeUp   { animation: fadeUp   0.8s cubic-bezier(.22,.68,0,1.1) both; }
  .anim-fadeIn   { animation: fadeIn   0.6s ease both; }
  .anim-delay-1  { animation-delay: 0.12s; }
  .anim-delay-2  { animation-delay: 0.24s; }
  .anim-delay-3  { animation-delay: 0.36s; }
  .anim-delay-4  { animation-delay: 0.48s; }
  .anim-delay-5  { animation-delay: 0.60s; }

  /* NAV */
  .nav-root {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    transition: background 0.4s, box-shadow 0.4s;
  }
  .nav-root.scrolled {
    background: rgba(245,240,235,0.97);
    box-shadow: 0 1px 0 rgba(26,23,20,0.08);
    backdrop-filter: blur(8px);
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    max-width: 1280px; margin: 0 auto; padding: 0 48px;
    height: 72px;
  }
  .nav-logo {
    font-family: var(--font-display);
    font-weight: 500; font-size: 20px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ink); text-decoration: none;
    line-height: 1;
  }
  .nav-logo span { color: var(--gold); }
  .nav-right { display: flex; align-items: center; gap: 20px; }
  .nav-burger {
    display: none;
    flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 8px;
    background: transparent; border: none; cursor: pointer;
  }
  .nav-burger span {
    display: block; height: 1.5px; width: 100%;
    background: var(--ink); transition: transform 0.3s, opacity 0.2s;
  }
  .nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .mobile-menu {
    overflow: hidden; max-height: 0;
    background: rgba(245,240,235,0.98);
    backdrop-filter: blur(8px);
    transition: max-height 0.4s ease;
    border-top: 1px solid transparent;
  }
  .mobile-menu.open { max-height: 70vh; border-top-color: rgba(26,23,20,0.08); }
  .mobile-menu-links { list-style: none; padding: 8px 24px 24px; }
  .mobile-menu-links li { border-bottom: 1px solid rgba(26,23,20,0.07); }
  .mobile-menu-links li:last-child { border-bottom: none; }
  .mobile-menu-links a {
    display: block; padding: 18px 4px;
    font-family: var(--font-body); font-size: 13px; font-weight: 400;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
    text-decoration: none; cursor: pointer; transition: color 0.2s;
  }
  .mobile-menu-links a.active, .mobile-menu-links a:hover { color: var(--gold); }
  .nav-links {
    display: flex; align-items: center; gap: 40px; list-style: none;
  }
  .nav-links a {
    font-family: var(--font-body); font-size: 11px; font-weight: 400;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
    text-decoration: none; transition: color 0.2s; cursor: pointer;
  }
  .nav-links a:hover, .nav-links a.active { color: var(--gold); }
  .lang-toggle {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  }
  .lang-btn {
    background: none; border: none; cursor: pointer; padding: 4px 8px;
    font-family: var(--font-body); font-size: 10px; letter-spacing: 0.15em;
    text-transform: uppercase; transition: color 0.2s;
  }
  .lang-btn.active { color: var(--gold); font-weight: 500; }
  .lang-btn:not(.active) { color: var(--muted); }
  .lang-divider { color: var(--muted); font-size: 10px; }

  /* SECTION LABEL */
  .section-label {
    font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--gold); font-weight: 400; margin-bottom: 20px;
    display: flex; align-items: center; gap: 12px;
  }
  .section-label::before {
    content: ''; display: block; width: 32px; height: 1px; background: var(--gold);
    flex-shrink: 0;
  }
  /* Banner label (centered hero band): shrink to content so the gold line
     stays beside the text instead of being pushed to the far left when the
     text wraps to multiple lines on narrow screens. */
  .banner-label {
    display: inline-flex; width: auto; max-width: 90%;
    margin-left: auto; margin-right: auto;
  }
  .banner-label span { display: inline-block; }

  /* SECTION TITLE */
  .section-title {
    font-family: var(--font-display); font-size: clamp(36px, 4vw, 58px);
    font-weight: 300; line-height: 1.15; letter-spacing: 0.01em;
    color: var(--ink);
  }

  /* DIVIDER */
  .gold-line {
    width: 48px; height: 1px; background: var(--gold); margin: 28px 0;
  }

  /* HERO */
  .hero {
    min-height: 100vh; display: flex; align-items: flex-end;
    padding-bottom: 100px; position: relative; overflow: hidden;
    background: var(--ink);
  }
  /* ── Hero slideshow ── */
  .hero-slides { position: absolute; inset: 0; overflow: hidden; }
  .hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1.1s ease;
    transform: scale(1.04);
  }
  .hero-slide.active { opacity: 1; transform: scale(1); transition: opacity 1.1s ease, transform 7s ease-out; }
  .hero-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5; width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(26,23,20,0.32); backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(253,250,247,0.35); color: var(--white);
    cursor: pointer; transition: background 0.25s, border-color 0.25s, color 0.25s;
  }
  .hero-nav:hover { background: var(--gold); border-color: transparent; color: var(--ink); }
  .hero-nav-prev { left: 32px; }
  .hero-nav-next { right: 32px; }
  .hero-dots {
    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
    z-index: 5; display: flex; gap: 9px; align-items: center;
  }
  .hero-dot {
    width: 8px; height: 8px; border-radius: 50%; padding: 0; border: none;
    background: rgba(253,250,247,0.4); cursor: pointer; transition: all 0.3s;
  }
  .hero-dot:hover { background: rgba(253,250,247,0.7); }
  .hero-dot.active { background: var(--gold); width: 26px; border-radius: 4px; }
  /* legacy single-image layers (unused by slideshow) */
  .hero-bg-blur {
    position: absolute; inset: -20px;
    background-size: cover; background-position: center;
    filter: blur(40px) brightness(0.55) saturate(1.1);
    transform: scale(1.1);
  }
  .hero-bg-sharp {
    position: absolute; inset: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.95;
  }
  .hero-bg {
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(
      45deg, transparent, transparent 12px,
      rgba(255,255,255,0.018) 12px, rgba(255,255,255,0.018) 13px
    );
  }
  .hero-bg-label {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; pointer-events: none;
  }
  .hero-bg-label span {
    font-family: 'Courier New', monospace; font-size: 11px;
    color: rgba(255,255,255,0.15); letter-spacing: 0.1em; text-transform: uppercase;
    text-align: center; line-height: 2;
  }
  .hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(26,23,20,0.88) 0%, rgba(26,23,20,0.3) 60%, transparent 100%);
  }
  .hero-content {
    position: relative; z-index: 2;
    max-width: 1280px; margin: 0 auto; padding: 0 48px; width: 100%;
  }
  .hero-tagline {
    font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--gold); font-weight: 400; margin-bottom: 24px;
  }
  .hero-headline {
    font-family: var(--font-display);
    font-weight: 300; line-height: 1.05; white-space: pre-line;
    color: var(--white); margin-bottom: 28px;
  }
  .hero-sub {
    font-size: 14px; letter-spacing: 0.08em; color: rgba(253,250,247,0.65);
    margin-bottom: 48px; font-weight: 300;
  }
  .hero-cta {
    display: inline-flex; align-items: center; gap: 16px;
    font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; font-weight: 400;
    color: var(--white); text-decoration: none; cursor: pointer;
    border: none; background: none; padding: 0; transition: gap 0.3s;
  }
  .hero-cta:hover { gap: 24px; }
  .hero-cta-arrow {
    width: 40px; height: 1px; background: var(--gold); position: relative; transition: width 0.3s;
  }
  .hero-cta:hover .hero-cta-arrow { width: 56px; }
  .hero-cta-arrow::after {
    content: ''; position: absolute; right: 0; top: -3px;
    width: 6px; height: 6px; border-right: 1px solid var(--gold);
    border-top: 1px solid var(--gold); transform: rotate(45deg);
  }
  .hero-scroll-hint {
    position: absolute; right: 48px; bottom: 40px; z-index: 2;
    writing-mode: vertical-rl; font-size: 9px; letter-spacing: 0.3em;
    text-transform: uppercase; color: rgba(253,250,247,0.35);
    display: flex; align-items: center; gap: 14px;
  }
  .hero-scroll-hint::after {
    content: ''; width: 1px; height: 48px; background: rgba(253,250,247,0.2);
  }

  /* STATS */
  .stats-section {
    background: var(--ink); padding: 64px 0; border-bottom: 1px solid rgba(200,169,122,0.15);
  }
  .stats-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 48px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  }
  .stat-item {
    padding: 24px 0; text-align: center; border-right: 1px solid rgba(255,255,255,0.08);
  }
  .stat-item:last-child { border-right: none; }
  .stat-n {
    font-family: var(--font-display); font-size: 52px; font-weight: 300;
    color: var(--gold); line-height: 1; margin-bottom: 10px;
  }
  .stat-label {
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(253,250,247,0.5); font-weight: 400;
  }

  /* ABOUT */
  .about-section {
    padding: 120px 0; background: var(--cream);
  }
  .about-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 48px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center;
  }
  .about-text p {
    font-size: 15px; color: var(--ink-soft); line-height: 1.8; margin-bottom: 20px;
  }
  .about-mission {
    font-family: var(--font-display); font-size: 22px; font-weight: 300;
    font-style: italic; color: var(--gold); line-height: 1.4; margin-top: 32px;
  }
  .about-image {
    aspect-ratio: 4/5;
  }

  /* SPECIALISATIONS */
  .spec-section {
    padding: 100px 0; background: var(--cream-dark);
  }
  .spec-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 48px;
  }
  .spec-header { margin-bottom: 64px; }
  .spec-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  }
  .spec-card {
    background: var(--cream); padding: 48px 40px; position: relative; overflow: hidden;
    transition: transform 0.35s cubic-bezier(.22,.68,0,1.1);
  }
  .spec-card:hover { transform: translateY(-4px); }
  .spec-card-img {
    width: 100%; aspect-ratio: 4/3; margin-bottom: 32px;
  }
  .spec-card-num {
    font-family: var(--font-display); font-size: 80px; font-weight: 300;
    color: rgba(200,169,122,0.12); position: absolute; top: 20px; right: 28px;
    line-height: 1; pointer-events: none; user-select: none;
  }
  .spec-card-title {
    font-family: var(--font-display); font-size: 28px; font-weight: 400;
    letter-spacing: 0.02em; color: var(--ink); margin-bottom: 16px;
  }
  .spec-card-desc {
    font-size: 13px; color: var(--muted); line-height: 1.75; font-weight: 300;
  }

  /* PROJECTS */
  .projects-section {
    padding: 120px 0; background: var(--cream);
  }
  .projects-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 48px;
  }
  .projects-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 16px;
  }
  .filter-bar {
    display: flex; gap: 0; margin-bottom: 56px;
    border-bottom: 1px solid rgba(26,23,20,0.1);
  }
  .filter-btn {
    background: none; border: none; cursor: pointer; padding: 12px 20px;
    font-family: var(--font-body); font-size: 11px; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
  }
  .filter-btn:hover { color: var(--ink); }
  .filter-btn.active { color: var(--ink); border-bottom-color: var(--gold); }
  .projects-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  }
  .project-card {
    position: relative; overflow: hidden; cursor: pointer; aspect-ratio: 4/3;
  }
  .project-card-img { width: 100%; height: 100%; object-fit: cover; }
  .project-card-overlay {
    position: absolute; inset: 0;
    background: rgba(26,23,20,0); transition: background 0.35s;
    display: flex; align-items: flex-end;
    padding: 24px;
  }
  .project-card:hover .project-card-overlay { background: rgba(26,23,20,0.72); }
  .project-card-info {
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.3s, transform 0.3s;
  }
  .project-card:hover .project-card-info { opacity: 1; transform: translateY(0); }
  .project-card-title {
    font-family: var(--font-display); font-size: 18px; font-weight: 400;
    color: var(--white); margin-bottom: 4px;
  }
  .project-card-cat {
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gold);
  }
  .view-all-wrap { text-align: center; margin-top: 56px; }
  .view-all-btn {
    display: inline-flex; align-items: center; gap: 16px;
    font-family: var(--font-body); font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; font-weight: 400; color: var(--ink);
    background: none; border: 1px solid rgba(26,23,20,0.25); cursor: pointer;
    padding: 16px 36px; transition: all 0.3s;
  }
  .view-all-btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

  /* SERVICES */
  .services-section {
    padding: 120px 0; background: var(--ink);
  }
  .services-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 48px;
  }
  .services-top {
    display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: end;
    margin-bottom: 72px;
  }
  .services-title {
    font-family: var(--font-display); color: var(--white);
    font-size: clamp(36px, 4vw, 58px); font-weight: 300;
  }
  .services-intro {
    font-size: 14px; color: rgba(253,250,247,0.55); line-height: 1.8;
    align-self: end; max-width: 540px;
  }
  .services-list { display: flex; flex-direction: column; gap: 0; }
  .service-row {
    display: grid; grid-template-columns: 80px 1fr auto;
    align-items: start; gap: 40px;
    padding: 40px 0; border-top: 1px solid rgba(255,255,255,0.08);
    transition: background 0.2s;
  }
  .service-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .service-num {
    font-family: var(--font-display); font-size: 20px; font-weight: 300;
    color: var(--gold); padding-top: 4px;
  }
  .service-name {
    font-family: var(--font-display); font-size: 28px; font-weight: 400;
    color: var(--white); margin-bottom: 12px;
  }
  .service-desc {
    font-size: 13px; color: rgba(253,250,247,0.5); line-height: 1.75; font-weight: 300;
    max-width: 480px;
  }
  .service-arrow {
    width: 32px; height: 32px; border: 1px solid rgba(200,169,122,0.3);
    display: flex; align-items: center; justify-content: center;
    margin-top: 6px; transition: border-color 0.2s, background 0.2s;
  }
  .service-row:hover .service-arrow { border-color: var(--gold); background: var(--gold); }
  .service-arrow svg { transition: stroke 0.2s; }
  .service-row:hover .service-arrow svg { stroke: var(--ink) !important; }

  /* PRODUCTS GRID */
  .products-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px;
  }
  .product-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex; flex-direction: column;
    transition: border-color 0.25s, background 0.25s, transform 0.25s;
  }
  .product-card:hover {
    border-color: rgba(200,169,122,0.35);
    background: rgba(255,255,255,0.05);
  }
  .product-card-body {
    padding: 32px 32px 36px; display: flex; flex-direction: column; gap: 18px;
  }
  .product-card-head {
    display: flex; align-items: baseline; gap: 18px;
  }
  .product-card-num {
    font-family: var(--font-display); font-size: 18px; font-weight: 300;
    color: var(--gold); letter-spacing: 0.04em;
  }
  .product-card-name {
    font-family: var(--font-display); font-size: 26px; font-weight: 400;
    color: var(--white); margin: 0; line-height: 1.2;
  }
  .product-card-desc {
    font-size: 13.5px; color: rgba(253,250,247,0.6); line-height: 1.8;
    font-weight: 300; margin: 0;
  }
  .product-card-features {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
  }
  .product-card-chip {
    font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--gold); border: 1px solid rgba(200,169,122,0.3);
    padding: 6px 12px;
  }
  @media (max-width: 900px) {
    .products-grid { grid-template-columns: 1fr; gap: 32px; }
    .product-card-body { padding: 24px 24px 28px; }
    /* keep the clients panel directly under the Access Panel card */
    .product-card-builtin { order: 2; }
  }

  .product-card-clickable { transition: border-color 0.25s, transform 0.25s; }
  .product-card-clickable:hover { transform: translateY(-3px); }
  .product-card-clienttoggle {
    margin-top: 6px; font-family: var(--font-body); font-size: 11px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  }

  /* OUR CLIENTS PANEL */
  .clients-panel {
    grid-column: 1 / -1; order: 1;
    margin-top: 0; padding: 56px 56px 60px;
    background: var(--ink); border: 1px solid rgba(200,169,122,0.25);
    animation: clientsIn 0.4s cubic-bezier(.22,.68,0,1.1);
  }
  @keyframes clientsIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .clients-panel-title {
    font-family: var(--font-display); font-size: 28px; font-weight: 400;
    color: var(--white); margin: 8px 0 36px; line-height: 1.3; max-width: 720px;
  }
  .clients-cardgrid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  }
  .client-card {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden; display: flex; flex-direction: column;
    transition: border-color 0.25s;
  }
  .client-card:hover { border-color: rgba(200,169,122,0.4); }
  .client-card-bldg { width: 100%; aspect-ratio: 4/3; display: block; }
  .client-card-foot {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 15px; border-top: 1px solid rgba(255,255,255,0.07);
  }
  .client-card-logo {
    width: 42px; height: 42px; flex: 0 0 auto; background: #ffffff;
  }
  .client-card-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .client-card-name {
    font-family: var(--font-body); font-size: 12px; font-weight: 400;
    color: rgba(253,250,247,0.9); line-height: 1.3;
  }
  .client-card-company {
    font-family: var(--font-body); font-size: 10.5px; font-weight: 300;
    color: var(--gold); letter-spacing: 0.04em; line-height: 1.3;
  }
  @media (max-width: 1100px) { .clients-cardgrid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 760px)  { .clients-cardgrid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 900px) {
    .clients-panel { padding: 36px 28px 40px; }
    .clients-panel-title { font-size: 22px; }
  }
  @media (max-width: 440px)  { .clients-cardgrid { grid-template-columns: 1fr; } }

  /* CONTACT */
  .contact-section {
    padding: 120px 0; background: var(--cream);
  }
  .contact-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 48px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 96px;
  }
  .contact-form-area {}
  .contact-info-area {}
  .contact-title {
    font-family: var(--font-display); font-size: clamp(36px, 4vw, 58px);
    font-weight: 300; color: var(--ink); margin-bottom: 12px;
  }
  .contact-sub { font-size: 13px; color: var(--muted); letter-spacing: 0.06em; margin-bottom: 48px; }
  .form-group { margin-bottom: 28px; }
  .form-label {
    display: block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 10px;
  }
  .form-input {
    width: 100%; border: none; border-bottom: 1px solid rgba(26,23,20,0.2);
    background: none; padding: 12px 0; font-family: var(--font-body);
    font-size: 14px; color: var(--ink); outline: none;
    transition: border-color 0.2s;
  }
  .form-input:focus { border-bottom-color: var(--gold); }
  .form-textarea { resize: vertical; min-height: 100px; }
  .form-submit {
    background: var(--ink); color: var(--white); border: none; cursor: pointer;
    padding: 16px 48px; font-family: var(--font-body);
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    transition: background 0.3s; margin-top: 8px;
  }
  .form-submit:hover { background: var(--gold); }
  .contact-detail {
    display: flex; flex-direction: column; gap: 36px; padding-top: 8px;
  }
  .cd-label {
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 8px;
  }
  .cd-value {
    font-size: 14px; color: var(--ink-soft); line-height: 1.7; white-space: pre-line;
  }
  .contact-map {
    width: 100%; aspect-ratio: 16/9; margin-top: 48px;
  }

  /* FOOTER */
  .footer {
    background: var(--ink); padding: 48px 0; border-top: 1px solid rgba(200,169,122,0.12);
  }
  .footer-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 48px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .footer-logo {
    font-family: var(--font-display); font-size: 16px; font-weight: 400;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--white);
  }
  .footer-logo span { color: var(--gold); }
  .footer-copy { font-size: 11px; color: rgba(253,250,247,0.3); letter-spacing: 0.1em; }
  .footer-links { display: flex; gap: 24px; }
  .footer-links a {
    font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
    color: rgba(253,250,247,0.4); text-decoration: none; transition: color 0.2s;
  }
  .footer-links a:hover { color: var(--gold); }

  /* PAGE SECTIONS (for SPA routing) */
  .page { display: none; }
  .page.active { display: block; }

  /* CRAFTSMANSHIP GALLERY */
  .craft-section { background: var(--ink); padding: 120px 0; }
  .craft-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
  .craft-header { text-align: center; margin-bottom: 52px; }
  .craft-intro {
    color: rgba(253,250,247,0.62); max-width: 62ch; margin: 18px auto 0;
    font-size: 15px; line-height: 1.85; text-wrap: pretty;
  }
  .craft-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
  .craft-tile {
    position: relative; overflow: hidden; margin: 0;
    background: #14110e;
  }
  .craft-tile.wide { grid-column: span 6; aspect-ratio: 16 / 10; }
  .craft-tile.tall { grid-column: span 4; aspect-ratio: 3 / 4; }
  .craft-tile img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.7s cubic-bezier(0.2,0.6,0.2,1);
  }
  .craft-tile:hover img { transform: scale(1.045); }
  .craft-tile::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(13,11,9,0.72) 0%, rgba(13,11,9,0.15) 38%, transparent 62%);
  }
  .craft-tile-cap {
    position: absolute; left: 18px; bottom: 16px; z-index: 2;
    display: flex; align-items: baseline; gap: 11px;
  }
  .craft-tile-num {
    font-family: var(--font-display); font-size: 22px; line-height: 1;
    color: var(--gold); font-weight: 500;
  }
  .craft-tile-label {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--white); font-weight: 400;
  }

  /* MOBILE */
  @media (max-width: 900px) {
    .nav-inner { padding: 0 24px; height: 64px; }
    .nav-links { display: none; }
    .nav-burger { display: flex; }
    .hero-content { padding: 0 24px; }
    .hero-scroll-hint { display: none; }
    .stats-inner { grid-template-columns: repeat(2, 1fr); }
    .stat-item { border-bottom: 1px solid rgba(255,255,255,0.08); }
    .about-inner, .contact-inner { grid-template-columns: 1fr; gap: 48px; }
    .spec-grid, .projects-grid { grid-template-columns: 1fr; }
    .services-top { grid-template-columns: 1fr; gap: 24px; }
    .service-row { grid-template-columns: 60px 1fr; }
    .service-arrow { display: none; }
    .footer-inner { flex-direction: column; gap: 20px; text-align: center; }
    .about-section, .spec-section, .projects-section, .services-section, .contact-section { padding: 72px 0; }
    .about-inner, .projects-inner, .services-inner, .contact-inner, .spec-inner { padding: 0 24px; }
    .filter-bar { flex-wrap: wrap; }
    /* craft gallery: 2-up landscapes, 2-up portraits */
    .craft-section { padding: 72px 0; }
    .craft-inner { padding: 0 24px; }
    .craft-tile.wide { grid-column: span 6; }
    .craft-tile.tall { grid-column: span 6; }
  }

  /* PHONE — fine-tune the home hero + density for narrow screens */
  @media (max-width: 600px) {
    .hero { min-height: 100svh; padding-bottom: 56px; align-items: flex-end; }
    /* override the inline heroSize (96px) so the headline fits the screen */
    .hero-headline { font-size: clamp(38px, 12vw, 60px) !important; line-height: 1.08; margin-bottom: 22px; }
    .hero-tagline { font-size: 10px; letter-spacing: 0.28em; margin-bottom: 18px; }
    .hero-sub { font-size: 13px; margin-bottom: 36px; max-width: 30ch; }
    .stats-inner { grid-template-columns: repeat(2, 1fr); }
    .stat-n { font-size: 40px; }
    .stat-label { font-size: 11px; }
    .section-title { font-size: 28px; line-height: 1.15; }
    .section-label { font-size: 11px; }
    .about-section, .spec-section, .projects-section, .services-section, .contact-section { padding: 56px 0; }
    /* craft gallery: full-width tiles on phones */
    .craft-tile.wide, .craft-tile.tall { grid-column: span 12; }
    .craft-tile.wide { aspect-ratio: 16 / 10; }
    .craft-tile.tall { aspect-ratio: 4 / 5; }
    /* keep banner gold-line beside the (wrapping) subtitle, centered as a group */
    .banner-label { max-width: 300px; }
    /* slideshow controls on phones */
    .hero-nav { width: 44px; height: 44px; }
    .hero-nav-prev { left: 12px; }
    .hero-nav-next { right: 12px; }
    .hero-dots { bottom: 18px; }
  }
`;

// ── COMPONENTS ────────────────────────────────────────────────────────────────

function ImgPlaceholder({ label, style, className, src, sharp, plain }) {
  if (src && plain) {
    // Plain mode: just the image on its own background — no blurred backdrop.
    return (
      <div className={"img-real " + (className || "")} style={{ ...style, position: "relative", overflow: "hidden" }}>
        <img src={src} alt={label || ""} loading="lazy"
          style={{
            width: "100%", height: "100%",
            objectFit: sharp ? "contain" : "cover",
            display: "block",
          }} />
      </div>
    );
  }
  if (src) {
    // Dual-layer: blurred backdrop + crisp original — handles low-res uploads gracefully
    return (
      <div className={"img-real " + (className || "")} style={{ ...style, position: "relative", overflow: "hidden", background: "#1a1714" }}>
        <div style={{
          position: "absolute", inset: -8,
          backgroundImage: `url('${src}')`,
          backgroundSize: "cover", backgroundPosition: "center",
          filter: "blur(20px) brightness(0.7) saturate(1.1)",
          transform: "scale(1.1)",
        }}></div>
        <img src={src} alt={label || ""} loading="lazy"
          style={{
            position: "relative", zIndex: 1,
            width: "100%", height: "100%",
            objectFit: sharp ? "contain" : "cover",
            display: "block",
          }} />
      </div>
    );
  }
  return (
    <div className={"img-placeholder " + (className || "")} style={style}>
      <span>{label || "project photo"}</span>
    </div>
  );
}

function Nav({ page, setPage, lang, setLang, c, scrolled }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const pages = ["home", "about", "projects", "products", "contact"];

  // Lock body scroll while the mobile menu is open
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  function go(p) {
    setPage(p);
    setMenuOpen(false);
    window.scrollTo({ top: 0, behavior: "auto" });
  }

  return (
    <nav className={"nav-root" + (scrolled || menuOpen ? " scrolled" : "")}>
      <div className="nav-inner">
        <a className="nav-logo" onClick={() => go("home")} style={{ cursor: "pointer" }}>
          AVANTI <span>INTERNI</span>
        </a>
        <ul className="nav-links">
          {c.nav.map((label, i) => (
            <li key={i}>
              <a
                className={page === pages[i] ? "active" : ""}
                onClick={() => go(pages[i])}
              >
                {label}
              </a>
            </li>
          ))}
        </ul>
        <div className="nav-right">
          <div className="lang-toggle">
            <button className={"lang-btn" + (lang === "en" ? " active" : "")} onClick={() => setLang("en")}>EN</button>
            <span className="lang-divider">|</span>
            <button className={"lang-btn" + (lang === "th" ? " active" : "")} onClick={() => setLang("th")}>TH</button>
          </div>
          <button
            className={"nav-burger" + (menuOpen ? " open" : "")}
            aria-label="Menu"
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(o => !o)}
          >
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </div>

      <div className={"mobile-menu" + (menuOpen ? " open" : "")}>
        <ul className="mobile-menu-links">
          {c.nav.map((label, i) => (
            <li key={i}>
              <a
                className={page === pages[i] ? "active" : ""}
                onClick={() => go(pages[i])}
              >
                {label}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </nav>
  );
}

function Footer({ c }) {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-logo">AVANTI <span>INTERNI</span></div>
        <p className="footer-copy">{c.footer}</p>
        <div className="footer-links">
          <a href="https://www.facebook.com/Avanti.interni/" target="_blank" rel="noopener noreferrer">Facebook</a>
          <a href="#" onClick={e => e.preventDefault()} style={{ cursor: "default" }}>LINE: @avanti.interni</a>
        </div>
      </div>
    </footer>
  );
}

// ── HOME PAGE ─────────────────────────────────────────────────────────────────
const HERO_SLIDES = [
  "images/s59-living-curtain.jpg",
  "images/s59-living-wide.jpg",
  "images/s59-dining-bar-wide.jpg",
  "images/r185-living-cityview.jpg",
  "images/r185-dining-wide.jpg",
];

function HomePage({ c, setPage, tweaks, lang }) {
  const heroFontSize = tweaks.heroSize || 96;
  const [heroIdx, setHeroIdx] = React.useState(0);

  const heroNext = React.useCallback(() => setHeroIdx(i => (i + 1) % HERO_SLIDES.length), []);
  const heroPrev = React.useCallback(() => setHeroIdx(i => (i - 1 + HERO_SLIDES.length) % HERO_SLIDES.length), []);

  // Gentle autoplay — pauses while the tab is hidden; resets on manual nav
  React.useEffect(() => {
    const t = setInterval(() => {
      if (!document.hidden) setHeroIdx(i => (i + 1) % HERO_SLIDES.length);
    }, 6000);
    return () => clearInterval(t);
  }, [heroIdx]);

  return (
    <div>
      {/* HERO */}
      <section className="hero">
        <div className="hero-slides">
          {HERO_SLIDES.map((src, i) => (
            <div
              key={src}
              className={"hero-slide" + (i === heroIdx ? " active" : "")}
              style={{ backgroundImage: `url('${src}')` }}
            ></div>
          ))}
        </div>
        <div className="hero-overlay" style={{
          background: "linear-gradient(to top, rgba(26,23,20,0.85) 0%, rgba(26,23,20,0.25) 50%, rgba(26,23,20,0.5) 100%)"
        }}></div>
        <div className="hero-content">
          <p className="hero-tagline anim-fadeUp">{c.hero.tagline}</p>
          <h1 className="hero-headline anim-fadeUp anim-delay-1" style={{ fontSize: heroFontSize }}>
            {c.hero.headline}
          </h1>
          <p className="hero-sub anim-fadeUp anim-delay-2">{c.hero.sub}</p>
          <button className="hero-cta anim-fadeUp anim-delay-3" onClick={() => setPage("projects")}>
            {c.hero.cta}
            <span className="hero-cta-arrow"></span>
          </button>
        </div>
        <div className="hero-scroll-hint">Scroll</div>

        {/* Slideshow controls */}
        <button className="hero-nav hero-nav-prev" onClick={heroPrev} aria-label={lang === "th" ? "รูปก่อนหน้า" : "Previous image"}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M15 5l-7 7 7 7" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
        <button className="hero-nav hero-nav-next" onClick={heroNext} aria-label={lang === "th" ? "รูปถัดไป" : "Next image"}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M9 5l7 7-7 7" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
        <div className="hero-dots">
          {HERO_SLIDES.map((_, i) => (
            <button
              key={i}
              className={"hero-dot" + (i === heroIdx ? " active" : "")}
              onClick={() => setHeroIdx(i)}
              aria-label={(lang === "th" ? "ไปยังรูปที่ " : "Go to image ") + (i + 1)}
            ></button>
          ))}
        </div>
      </section>

      {/* STATS */}
      {tweaks.showStats && (
        <section className="stats-section">
          <div className="stats-inner">
            {c.stats.map((s, i) => (
              <div className="stat-item" key={i}>
                <div className="stat-n">{s.n}</div>
                <div className="stat-label">{s.label}</div>
              </div>
            ))}
          </div>
        </section>
      )}

      {/* ABOUT PREVIEW */}
      <section className="about-section">
        <div className="about-inner">
          <div className="about-text">
            <p className="section-label">{c.about.title}</p>
            <h2 className="section-title">{c.specialisations.title}</h2>
            <div className="gold-line"></div>
            <p style={{ fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.8, marginBottom: 20 }}>{c.about.body}</p>
            <p style={{ fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.8, marginBottom: 20 }}>{c.about.body2}</p>
            {/* Thai original text — always shown */}
            <p style={{
              fontSize: 14, color: "var(--muted)", lineHeight: 1.9, marginBottom: 28,
              fontStyle: "italic", borderLeft: "2px solid var(--gold)",
              paddingLeft: 20, marginTop: 8
            }}>
              บริษัท อแวนติ เป็นบริษัทดำเนินงานทางด้านรับเหมาตกแต่งภายใน มากว่า 25 ปีที่ทันสมัยและคุณภาพดี ด้วยการทำงานของระบบจากยุโรปทำให้ลูกค้าส่วนใหญ่พึงพอใจต่อผลงานเรา
            </p>
            <p className="about-mission">"{c.about.mission}"</p>
          </div>
          <ImgPlaceholder
            src="images/factory-workshop.jpg"
            label="Avanti Interni Workshop"
            className="about-image"
          />
        </div>
      </section>

      {/* SPECIALISATIONS */}
      <section className="spec-section">
        <div className="spec-inner">
          <div className="spec-header">
            <p className="section-label">{c.specialisations.title}</p>
            <h2 className="section-title" style={{ maxWidth: 480 }}>{c.specialisations.title}</h2>
          </div>
          <div className="spec-grid">
            {c.specialisations.items.map((item, i) => {
              const specImages = ["images/s59-living-curtain.jpg", "images/ichirin-pool.jpg", "images/factory-detail.jpg"];
              return (
                <div className="spec-card" key={i}>
                  <div className="spec-card-num">{String(i + 1).padStart(2, "0")}</div>
                  <ImgPlaceholder
                    src={specImages[i]}
                    label={item.name}
                    className="spec-card-img"
                  />
                  <h3 className="spec-card-title">{item.name}</h3>
                  <p className="spec-card-desc">{item.desc}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* PROJECT PREVIEW */}
      <section className="projects-section">
        <div className="projects-inner">
          <div className="projects-header">
            <div>
              <p className="section-label">{c.projects.title}</p>
              <h2 className="section-title">{c.projects.title}</h2>
            </div>
            <p style={{ fontSize: 13, color: "var(--muted)", maxWidth: 300, textAlign: "right", lineHeight: 1.7 }}>
              {c.projects.subtitle}
            </p>
          </div>
          <div style={{ marginTop: 40 }} className="projects-grid">
            {[
              { p: PROJECTS[0], idx: 0 },
              { p: PROJECTS[3], idx: 0 },
              { p: PROJECTS[1], idx: 0 },
              { p: PROJECTS[2], idx: 1 },
              { p: PROJECTS[0], idx: 4 },
              { p: PROJECTS[3], idx: 4 },
            ].map(({ p, idx }, i) => {
              const img = p.images[idx];
              return (
                <div className="project-card" key={i}>
                  <ImgPlaceholder
                    src={img.src}
                    label={img.caption.en}
                    style={{ width: "100%", height: "100%", position: "absolute", inset: 0 }}
                  />
                  <div className="project-card-overlay">
                    <div className="project-card-info">
                      <div className="project-card-title">{img.caption[lang] || img.caption.en}</div>
                      <div className="project-card-cat">{p.title[lang] || p.title.en}</div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          <div className="view-all-wrap">
            <button className="view-all-btn" onClick={() => setPage("projects")}>
              {c.hero.cta}
            </button>
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="services-section">
        <div className="services-inner">
          <div className="services-top">
            <h2 className="services-title">{c.services.title}</h2>
            <p className="services-intro">{c.about.body2}</p>
          </div>
          <div className="services-list">
            {c.services.items.map((s, i) => (
              <div className="service-row" key={i}>
                <div className="service-num">{s.num}</div>
                <div>
                  <div className="service-name">{s.name}</div>
                  <div className="service-desc">{s.desc}</div>
                </div>
                <div className="service-arrow">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="var(--gold)" strokeWidth="1.5">
                    <line x1="2" y1="10" x2="10" y2="2" /><polyline points="4,2 10,2 10,8" />
                  </svg>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ── ABOUT PAGE ────────────────────────────────────────────────────────────────
function AboutPage({ c }) {
  return (
    <div style={{ paddingTop: 72 }}>
      {/* Hero banner */}
      <div style={{ background: "var(--ink)", padding: "100px 0 80px", textAlign: "center" }}>
        <p className="section-label" style={{ justifyContent: "center" }}>{c.about.title}</p>
        <h1 className="section-title" style={{ color: "var(--white)", textAlign: "center" }}>About Us</h1>
      </div>

      {/* About body */}
      <section className="about-section">
        <div className="about-inner">
          <div className="about-text">
            <p className="section-label">{c.about.title}</p>
            <h2 className="section-title">Our Story</h2>
            <div className="gold-line"></div>
            <p style={{ fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.8, marginBottom: 20 }}>{c.about.body}</p>
            <p style={{ fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.8, marginBottom: 20 }}>{c.about.body2}</p>
            <p className="about-mission">"{c.about.mission}"</p>
          </div>
          <ImgPlaceholder src="images/factory-workshop.jpg" label="Avanti Interni Workshop" className="about-image" />
        </div>
      </section>

      {/* Values */}
      <section className="spec-section">
        <div className="spec-inner">
          <div className="spec-header">
            <p className="section-label">What We Do</p>
            <h2 className="section-title">{c.specialisations.title}</h2>
          </div>
          <div className="spec-grid">
            {c.specialisations.items.map((item, i) => {
              const specImages = ["images/s59-living-curtain.jpg", "images/ichirin-pool.jpg", "images/factory-detail.jpg"];
              return (
                <div className="spec-card" key={i}>
                  <div className="spec-card-num">{String(i + 1).padStart(2, "0")}</div>
                  <ImgPlaceholder src={specImages[i]} label={item.name} className="spec-card-img" />
                  <h3 className="spec-card-title">{item.name}</h3>
                  <p className="spec-card-desc">{item.desc}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* In the Workshop — craftsmanship gallery */}
      <section className="craft-section">
        <div className="craft-inner">
          <div className="craft-header">
            <p className="section-label" style={{ justifyContent: "center", color: "var(--gold)" }}>{c.craft.label}</p>
            <h2 className="section-title" style={{ color: "var(--white)" }}>{c.craft.title}</h2>
            <p className="craft-intro">{c.craft.intro}</p>
          </div>
          <div className="craft-gallery">
            {[
              { src: "images/craft-frame.jpg",          n: "01", label: c.craft.steps[0], cls: "wide" },
              { src: "images/craft-shell.jpg",          n: "02", label: c.craft.steps[1], cls: "wide" },
              { src: "images/craft-shell-interior.jpg", n: "03", label: c.craft.steps[2], cls: "tall" },
              { src: "images/craft-cladding.jpg",       n: "04", label: c.craft.steps[3], cls: "tall" },
              { src: "images/craft-finished.jpg",       n: "05", label: c.craft.steps[4], cls: "tall" },
            ].map((t, i) => (
              <figure className={"craft-tile " + t.cls} key={i}>
                <img src={t.src} alt={t.label} loading="lazy" />
                <figcaption className="craft-tile-cap">
                  <span className="craft-tile-num">{t.n}</span>
                  <span className="craft-tile-label">{t.label}</span>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ── PROJECTS PAGE ─────────────────────────────────────────────────────────────
function ProjectsPage({ c, lang }) {
  const [activeProject, setActiveProject] = React.useState(null);
  const [lightboxIdx, setLightboxIdx] = React.useState(null);

  // Lock scroll when an overlay is open
  React.useEffect(() => {
    if (activeProject || lightboxIdx !== null) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => { document.body.style.overflow = ""; };
  }, [activeProject, lightboxIdx]);

  // Keyboard navigation
  React.useEffect(() => {
    function onKey(e) {
      if (lightboxIdx !== null && activeProject) {
        if (e.key === "Escape") setLightboxIdx(null);
        if (e.key === "ArrowRight") setLightboxIdx((idx) => (idx + 1) % activeProject.images.length);
        if (e.key === "ArrowLeft")  setLightboxIdx((idx) => (idx - 1 + activeProject.images.length) % activeProject.images.length);
      } else if (activeProject && e.key === "Escape") {
        setActiveProject(null);
      }
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [activeProject, lightboxIdx]);

  return (
    <div style={{ paddingTop: 72 }}>
      <div style={{ background: "var(--ink)", padding: "100px 0 80px", textAlign: "center" }}>
        <p className="section-label banner-label" style={{ justifyContent: "center" }}><span>{c.projects.subtitle}</span></p>
        <h1 className="section-title" style={{ color: "var(--white)", textAlign: "center" }}>{c.projects.title}</h1>
      </div>

      <section className="projects-section" style={{ paddingTop: 72 }}>
        <div className="projects-inner">
          {/* Project cards grid */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(min(380px, 100%), 1fr))", gap: 32 }}>
            {PROJECTS.map((proj) => (
              <article key={proj.id}
                onClick={() => { setActiveProject(proj); setLightboxIdx(null); }}
                style={{ cursor: "pointer", background: "var(--cream-dark)", display: "flex", flexDirection: "column" }}
              >
                <div style={{ position: "relative", width: "100%", aspectRatio: "4/3", overflow: "hidden", background: "var(--ink)" }}>
                  <img src={proj.cover} alt={proj.title.en} loading="lazy"
                    style={{
                      width: "100%", height: "100%", objectFit: "cover", display: "block",
                      transition: "transform 0.6s cubic-bezier(.22,.68,0,1.1)"
                    }}
                    onMouseEnter={e => e.currentTarget.style.transform = "scale(1.04)"}
                    onMouseLeave={e => e.currentTarget.style.transform = "scale(1)"}
                  />
                  <div style={{
                    position: "absolute", top: 16, left: 16,
                    fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase",
                    background: "rgba(26,23,20,0.85)", color: "var(--gold)",
                    padding: "6px 12px"
                  }}>{proj.images.length} {lang === "th" ? "ภาพ" : "Photos"}</div>
                </div>
                <div style={{ padding: "28px 32px 32px", display: "flex", flexDirection: "column", gap: 8 }}>
                  <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--gold)" }}>
                    {proj.type[lang] || proj.type.en}{proj.designer ? ` · ${lang === "th" ? "ออกแบบโดย" : "Designer"} ${proj.designer}` : ""}
                  </div>
                  <h3 style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 400, color: "var(--ink)", lineHeight: 1.2 }}>
                    {proj.title[lang] || proj.title.en}
                  </h3>
                  <p style={{ fontSize: 13, color: "var(--muted)", letterSpacing: "0.05em" }}>
                    {proj.location[lang] || proj.location.en}
                  </p>
                  <div style={{ marginTop: 12, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--ink)", display: "flex", alignItems: "center", gap: 12 }}>
                    {lang === "th" ? "ดูโครงการ" : "View Project"}
                    <span style={{ width: 24, height: 1, background: "var(--gold)" }}></span>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* PROJECT DETAIL OVERLAY */}
      {activeProject && (
        <div
          style={{
            position: "fixed", inset: 0, zIndex: 200,
            background: "var(--cream)", overflowY: "auto",
            animation: "fadeIn 0.3s ease",
          }}
        >
          {/* Top bar */}
          <div style={{
            position: "sticky", top: 0, zIndex: 10,
            background: "rgba(245,240,235,0.97)", backdropFilter: "blur(8px)",
            borderBottom: "1px solid rgba(26,23,20,0.08)",
            padding: "20px clamp(16px, 5vw, 48px)",
            display: "flex", alignItems: "center", justifyContent: "space-between",
          }}>
            <div>
              <div style={{ fontSize: 10, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--gold)", marginBottom: 4 }}>
                {activeProject.type[lang] || activeProject.type.en}{activeProject.designer ? ` · ${lang === "th" ? "ออกแบบโดย" : "Designer"} ${activeProject.designer}` : ""}
              </div>
              <h2 style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 400, color: "var(--ink)" }}>
                {activeProject.title[lang] || activeProject.title.en}
              </h2>
            </div>
            <button onClick={() => setActiveProject(null)}
              style={{
                background: "none", border: "1px solid rgba(26,23,20,0.2)",
                width: 44, height: 44, cursor: "pointer", fontSize: 18, color: "var(--ink)",
                display: "flex", alignItems: "center", justifyContent: "center",
                transition: "all 0.2s",
              }}
              onMouseEnter={e => { e.currentTarget.style.background = "var(--ink)"; e.currentTarget.style.color = "var(--white)"; }}
              onMouseLeave={e => { e.currentTarget.style.background = "none"; e.currentTarget.style.color = "var(--ink)"; }}
              aria-label="Close"
            >✕</button>
          </div>

          {/* Project meta */}
          <div style={{ maxWidth: 880, margin: "0 auto", padding: "clamp(40px, 8vw, 64px) clamp(16px, 5vw, 48px) 32px" }}>
            <p style={{ fontSize: 16, color: "var(--ink-soft)", lineHeight: 1.85, textAlign: "center" }}>
              {activeProject.summary[lang] || activeProject.summary.en}
            </p>
            <div style={{ width: 48, height: 1, background: "var(--gold)", margin: "32px auto" }}></div>
            <p style={{ textAlign: "center", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--muted)" }}>
              {activeProject.location[lang] || activeProject.location.en} · {activeProject.images.length} {lang === "th" ? "ภาพ" : "Photos"}
            </p>
          </div>

          {/* Image grid */}
          <div style={{ maxWidth: 1400, margin: "0 auto", padding: "32px clamp(16px, 5vw, 48px) 96px",
                        display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(min(320px, 100%), 1fr))", gap: 16 }}>
            {activeProject.images.map((img, i) => (
              <div key={i} onClick={() => setLightboxIdx(i)}
                style={{ position: "relative", aspectRatio: "4/3", overflow: "hidden", cursor: "zoom-in", background: "var(--ink)" }}
              >
                <img src={img.src} alt={img.caption[lang] || img.caption.en} loading="lazy"
                  style={{ width: "100%", height: "100%", objectFit: "cover", display: "block",
                           transition: "transform 0.5s cubic-bezier(.22,.68,0,1.1)" }}
                  onMouseEnter={e => e.currentTarget.style.transform = "scale(1.05)"}
                  onMouseLeave={e => e.currentTarget.style.transform = "scale(1)"}
                />
                <div style={{
                  position: "absolute", bottom: 0, left: 0, right: 0,
                  padding: 16, background: "linear-gradient(to top, rgba(26,23,20,0.7), transparent)",
                  color: "var(--white)", fontSize: 12, letterSpacing: "0.05em",
                  opacity: 0, transition: "opacity 0.3s",
                }}
                  onMouseEnter={e => e.currentTarget.style.opacity = "1"}
                >
                  {img.caption[lang] || img.caption.en}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* LIGHTBOX */}
      {activeProject && lightboxIdx !== null && (
        <div
          onClick={() => setLightboxIdx(null)}
          style={{
            position: "fixed", inset: 0, zIndex: 300,
            background: "rgba(13,11,9,0.96)",
            display: "flex", alignItems: "center", justifyContent: "center",
            animation: "fadeIn 0.25s ease",
          }}
        >
          {/* Close */}
          <button onClick={(e) => { e.stopPropagation(); setLightboxIdx(null); }}
            style={{
              position: "absolute", top: 24, right: 24, zIndex: 2,
              background: "none", border: "1px solid rgba(253,250,247,0.3)",
              width: 44, height: 44, cursor: "pointer", color: "var(--white)", fontSize: 18,
              display: "flex", alignItems: "center", justifyContent: "center",
            }}
            aria-label="Close"
          >✕</button>

          {/* Prev */}
          <button onClick={(e) => { e.stopPropagation(); setLightboxIdx((idx) => (idx - 1 + activeProject.images.length) % activeProject.images.length); }}
            style={{
              position: "absolute", left: 24, top: "50%", transform: "translateY(-50%)", zIndex: 2,
              background: "none", border: "1px solid rgba(253,250,247,0.3)",
              width: 48, height: 48, cursor: "pointer", color: "var(--white)", fontSize: 24,
              display: "flex", alignItems: "center", justifyContent: "center",
            }}
            aria-label="Previous"
          >‹</button>

          {/* Next */}
          <button onClick={(e) => { e.stopPropagation(); setLightboxIdx((idx) => (idx + 1) % activeProject.images.length); }}
            style={{
              position: "absolute", right: 24, top: "50%", transform: "translateY(-50%)", zIndex: 2,
              background: "none", border: "1px solid rgba(253,250,247,0.3)",
              width: 48, height: 48, cursor: "pointer", color: "var(--white)", fontSize: 24,
              display: "flex", alignItems: "center", justifyContent: "center",
            }}
            aria-label="Next"
          >›</button>

          {/* Image */}
          <div onClick={(e) => e.stopPropagation()}
            style={{ maxWidth: "92vw", maxHeight: "88vh", display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}
          >
            <img src={activeProject.images[lightboxIdx].src}
                 alt={activeProject.images[lightboxIdx].caption[lang] || activeProject.images[lightboxIdx].caption.en}
                 style={{ maxWidth: "100%", maxHeight: "78vh", objectFit: "contain", boxShadow: "0 24px 64px rgba(0,0,0,0.6)" }} />
            <div style={{ textAlign: "center", color: "var(--white)" }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 400, marginBottom: 4 }}>
                {activeProject.images[lightboxIdx].caption[lang] || activeProject.images[lightboxIdx].caption.en}
              </div>
              <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(253,250,247,0.5)" }}>
                {lightboxIdx + 1} / {activeProject.images.length}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ── PRODUCTS PAGE ─────────────────────────────────────────────────────────────
const ACCESS_PANEL_CLIENTS = [
  { building: "InterContinental Mae Ping", company: "Aumnajchaiyakij Interior", img: "images/client-intercon-maeping.jpg", logo: "images/logo-acb.jpg" },
  { building: "True Headquarter (Ratchada)", company: "PIA Interior", img: "images/client-true-hq.jpg", logo: "images/logo-pia.jpg" },
  { building: "Chalermnit by Areeya (Sukhumvit 53)", company: "Areeya Property", img: "images/client-chalermnit-areeya.jpg", logo: "images/logo-areeya.png" },
  { building: "Samyan Mitrtown Office", company: "Thai Obayashi", img: "images/client-samyan-mitrtown.jpg", logo: "images/logo-thai-obayashi.png" },
  { building: "Mahanakhon Tower", company: "Madi Collaborative", img: "images/client-mahanakhon.png", logo: "images/logo-naldi.jpg" },
  { building: "Walton (Sukhumvit 49)", company: "Drafting & Steel", img: "images/client-walton.jpg", logo: "images/logo-drafting.png" },
  { building: "Chia Tai (Sukhumvit 60)", company: "Bungerd Infinite", img: "images/client-chiatai.jpg", logo: "images/logo-bunjerd.jpg" },
  { building: "Centara Grand", company: "Aumnajchaiyakij Interior", img: "images/client-centara-grand.jpg", logo: "images/logo-acb.jpg" },
  { building: "Meliá Chiang Mai", company: "Bangkok-Decon", img: "images/client-melia-chiangmai.jpg", logo: "images/logo-bkd.png" },
  { building: "Suvarnabhumi Airport", company: "V and W Corporation", img: "images/client-suvarnabhumi.jpg", logo: "images/logo-vandw.jpg" },
];

function ProductsPage({ c, lang }) {
  const [openIdx, setOpenIdx] = React.useState(null);
  const clientsLabel = lang === "th" ? "ลูกค้าของเรา" : "Our Clients";
  const clientsTitle = lang === "th" ? "10 โครงการชั้นนำที่เลือกใช้ช่องเซอร์วิสของเรา" : "Projects across Thailand fitted with our access panels";

  return (
    <div style={{ paddingTop: 72 }}>
      <div style={{ background: "var(--ink)", padding: "100px 0 80px", textAlign: "center" }}>
        <p className="section-label" style={{ justifyContent: "center" }}>{c.services.title}</p>
        <h1 className="section-title" style={{ color: "var(--white)", textAlign: "center" }}>{c.services.title}</h1>
      </div>

      <section className="services-section">
        <div className="services-inner">
          <div className="products-grid">
            {c.services.items.map((s, i) => {
              const isAccess = i === 0;
              const open = openIdx === i;
              return (
                <article
                  className={"product-card" + (isAccess ? " product-card-clickable" : "") + (i === 1 ? " product-card-builtin" : "")}
                  key={i}
                  onClick={isAccess ? () => setOpenIdx(open ? null : i) : undefined}
                  style={isAccess ? { cursor: "pointer" } : undefined}
                >
                  <ImgPlaceholder
                    src={i === 0 ? "images/access-panel-open.jpg" : i === 1 ? "images/s59-bedroom.jpg" : null}
                    sharp={i === 0}
                    plain={i === 0}
                    label={s.name + "\ninstallation / product photo\n800 × 500"}
                    style={{ width: "100%", aspectRatio: "4/3", background: i === 0 ? "#ffffff" : undefined }}
                  />
                  <div className="product-card-body">
                    <div className="product-card-head">
                      <span className="product-card-num">{s.num}</span>
                      <h3 className="product-card-name">{s.name}</h3>
                    </div>
                    <p className="product-card-desc">{s.detail || s.desc}</p>
                    {s.features && (
                      <div className="product-card-features">
                        {s.features.map((f, fi) => (
                          <span key={fi} className="product-card-chip">{f}</span>
                        ))}
                      </div>
                    )}
                    {isAccess && (
                      <span className="product-card-clienttoggle">
                        {open
                          ? (lang === "th" ? "ซ่อนรายชื่อลูกค้า ↑" : "Hide clients ↑")
                          : (lang === "th" ? "ดูลูกค้าของเรา →" : "See our clients →")}
                      </span>
                    )}
                  </div>
                </article>
              );
            })}

            {openIdx === 0 && (
            <div className="clients-panel">
              <p className="section-label" style={{ color: "var(--gold)" }}>{clientsLabel}</p>
              <h3 className="clients-panel-title">{clientsTitle}</h3>
              <div className="clients-cardgrid">
                {ACCESS_PANEL_CLIENTS.map((cl, ci) => (
                  <div key={ci} className="client-card">
                    <img
                      className="client-card-bldg"
                      src={cl.img}
                      alt={cl.building}
                      loading="lazy"
                      style={{ objectFit: "cover" }}
                    />
                    <div className="client-card-foot">
                      {cl.logo ? (
                        <img
                          className="client-card-logo"
                          src={cl.logo}
                          alt={cl.company}
                          loading="lazy"
                          style={{ objectFit: "contain", padding: 4 }}
                        />
                      ) : (
                        <span className="client-card-logo" style={{
                          display: "flex", alignItems: "center", justifyContent: "center",
                          background: "var(--gold)", color: "var(--ink)",
                          fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 500,
                        }}>{cl.building.charAt(0)}</span>
                      )}
                      <span className="client-card-names">
                        <span className="client-card-name">{cl.building}</span>
                        {cl.company && <span className="client-card-company">{cl.company}</span>}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
          </div>
        </div>
      </section>
    </div>
  );
}

// ── CONTACT PAGE ──────────────────────────────────────────────────────────────
function ContactPage({ c }) {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: "", email: "", phone: "", message: "" });

  function handleSubmit(e) {
    e.preventDefault();
    setSent(true);
  }

  return (
    <div style={{ paddingTop: 72 }}>
      <div style={{ background: "var(--ink)", padding: "100px 0 80px", textAlign: "center" }}>
        <p className="section-label" style={{ justifyContent: "center" }}>{c.contact.subtitle}</p>
        <h1 className="section-title" style={{ color: "var(--white)", textAlign: "center" }}>{c.contact.title}</h1>
      </div>

      <section className="contact-section">
        <div className="contact-inner">
          {/* FORM */}
          <div className="contact-form-area">
            <p className="section-label">{c.contact.title}</p>
            <h2 className="contact-title">{c.contact.title}</h2>
            <p className="contact-sub">{c.contact.subtitle}</p>
            {sent ? (
              <div style={{ padding: "40px 0" }}>
                <p className="section-label" style={{ color: "var(--gold)" }}>✓ Message Sent</p>
                <p style={{ fontSize: 14, color: "var(--muted)", marginTop: 8 }}>
                  Thank you. We will be in touch shortly.
                </p>
              </div>
            ) : (
              <form onSubmit={handleSubmit}>
                <div className="form-group">
                  <label className="form-label">Name</label>
                  <input className="form-input" value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} required />
                </div>
                <div className="form-group">
                  <label className="form-label">Email</label>
                  <input type="email" className="form-input" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} required />
                </div>
                <div className="form-group">
                  <label className="form-label">Phone / LINE</label>
                  <input className="form-input" value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} />
                </div>
                <div className="form-group">
                  <label className="form-label">Message</label>
                  <textarea className="form-input form-textarea" value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} required></textarea>
                </div>
                <button type="submit" className="form-submit">Send Message</button>
              </form>
            )}
          </div>

          {/* INFO */}
          <div className="contact-info-area">
            <div className="contact-detail">

              {/* Firm email */}
              <div>
                <p className="cd-label">General Enquiries</p>
                <p className="cd-value">
                  <a href={"mailto:" + c.contact.firmEmail} style={{ color: "var(--gold)", textDecoration: "none" }}>
                    {c.contact.firmEmail}
                  </a>
                </p>
              </div>

              {/* Individual contacts */}
              <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
                <p className="cd-label">Contacts</p>
                {c.contact.persons.map((p, i) => (
                  <div key={i} style={{ paddingLeft: 0 }}>
                    <p style={{ fontSize: 13, fontWeight: 500, color: "var(--ink)", marginBottom: 4 }}>{p.name}</p>
                    <p style={{ fontSize: 13, color: "var(--muted)", marginBottom: 2 }}>
                      <a href={"mailto:" + p.email} style={{ color: "var(--gold)", textDecoration: "none" }}>{p.email}</a>
                    </p>
                    <p style={{ fontSize: 13, color: "var(--muted)" }}>
                      <a href={"tel:" + p.phone.replace(/[\s\-()]/g, "")} style={{ color: "var(--ink-soft)", textDecoration: "none" }}>{p.phone}</a>
                    </p>
                  </div>
                ))}
              </div>

              {/* Address */}
              <div>
                <p className="cd-label">Address</p>
                <p className="cd-value">{c.contact.address}</p>
              </div>

              {/* Social / LINE */}
              <div>
                <p className="cd-label">Social & LINE</p>
                <p className="cd-value" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  <a href={c.contact.facebook} target="_blank" rel="noopener noreferrer"
                    style={{ color: "var(--gold)", textDecoration: "none" }}>
                    Facebook — Avanti Interni
                  </a>
                  <span style={{ color: "var(--ink-soft)" }}>LINE: {c.contact.line}</span>
                </p>
              </div>

              {/* Map */}
              <div>
                <p className="cd-label">Location</p>
                <a href={c.contact.mapUrl} target="_blank" rel="noopener noreferrer"
                  style={{ display: "block", textDecoration: "none" }}>
                  <div style={{
                    width: "100%", aspectRatio: "16/9", background: "var(--cream-dark)",
                    border: "1px solid rgba(200,169,122,0.25)", position: "relative",
                    overflow: "hidden", display: "flex", flexDirection: "column",
                    justifyContent: "space-between", padding: "24px", cursor: "pointer"
                  }}>
                    <div style={{
                      position: "absolute", inset: 0,
                      backgroundImage: "repeating-linear-gradient(0deg,transparent,transparent 22px,rgba(0,0,0,0.04) 22px,rgba(0,0,0,0.04) 23px),repeating-linear-gradient(90deg,transparent,transparent 22px,rgba(0,0,0,0.04) 22px,rgba(0,0,0,0.04) 23px)"
                    }}></div>
                    <div style={{
                      position: "absolute", left: "50%", top: "44%", transform: "translate(-50%,-50%)",
                      width: 16, height: 16, borderRadius: "50% 50% 50% 0",
                      background: "var(--gold)", rotate: "-45deg",
                      boxShadow: "0 0 0 6px rgba(200,169,122,0.18)"
                    }}></div>
                    <div style={{ position: "relative" }}></div>
                    <div style={{ position: "relative" }}>
                      <p style={{ fontFamily: "var(--font-body)", fontSize: 12.5, lineHeight: 1.7, color: "var(--ink)", whiteSpace: "pre-line", marginBottom: 10 }}>
                        {c.contact.address}
                      </p>
                      <span style={{ fontFamily: "var(--font-body)", fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--gold)" }}>
                        Get directions →
                      </span>
                    </div>
                  </div>
                </a>
              </div>

            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ── APP ROOT ──────────────────────────────────────────────────────────────────
function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const [lang, setLang] = React.useState(TWEAK_DEFAULTS.lang || "en");
  const [page, setPage] = React.useState("home");
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [page]);

  React.useEffect(() => {
    setTweak("lang", lang);
  }, [lang]);

  const c = COPY[lang];
  const pages = { home: HomePage, about: AboutPage, projects: ProjectsPage, products: ProductsPage, contact: ContactPage };
  const PageComponent = pages[page] || HomePage;

  // accent color CSS var
  React.useEffect(() => {
    document.documentElement.style.setProperty("--gold", tweaks.accentColor || "#C8A97A");
  }, [tweaks.accentColor]);

  return (
    <>
      <style>{siteStyles}</style>
      <Nav page={page} setPage={setPage} lang={lang} setLang={setLang} c={c} scrolled={scrolled} />
      <main>
        <PageComponent c={c} setPage={setPage} tweaks={tweaks} lang={lang} />
      </main>
      <Footer c={c} />

      <TweaksPanel>
        <TweakSection label="Brand">
          <TweakColor label="Accent / Gold" value={tweaks.accentColor} onChange={v => setTweak("accentColor", v)} />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakSlider label="Headline size (px)" value={tweaks.heroSize} min={56} max={140} step={4} onChange={v => setTweak("heroSize", v)} />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakToggle label="Show stats bar" value={tweaks.showStats} onChange={v => setTweak("showStats", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);