// Variation A — "Classic Premium" : centered, symmetric, formal
const vaSection = { padding: '0 100px' };

const VariationA = () =>
<div className="wd-root">

    {/* Nav */}
    <div className="wd-nav" style={{ height: 84, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 100px', borderBottom: '1px solid var(--wd-line)', flexShrink: 0 }}>
      <LogoLockup size={62} />
      <div className="wd-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
        <a className="wd-nav-link" href="#">บริการ</a>
        <a className="wd-nav-link" href="#">ผลงาน</a>
        <a className="wd-nav-link" href="#">เกี่ยวกับเรา</a>
        <a className="wd-btn wd-btn--solid wd-nav-cta" href="ติดต่อเรา.html" style={{ padding: '10px 24px', fontSize: 15 }}>ติดต่อเรา</a>
      </div>
      {/* Mobile CTA only */}
      <a className="wd-btn wd-btn--solid wd-nav-mobile-cta" href="ติดต่อเรา.html" style={{ padding: '8px 16px', fontSize: 14, display: 'none' }}>ติดต่อเรา</a>
    </div>

    {/* Hero — centered */}
    <div className="wd-hero" style={{ height: 600, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', gap: 26, ...vaSection }}>
      <img className="wd-hero-logo" src="assets/logo-symbol.jpg" alt="Within A Day" style={{ height: 100, width: 'auto', mixBlendMode: 'multiply' }} />
      <Mono>EVENT ORGANIZER</Mono>
      <h1 style={{ fontSize: 60, fontWeight: 600, lineHeight: 1.25, letterSpacing: '-0.01em', maxWidth: 900 }}>
        เราอยู่เบื้องหลัง<br />ทุกงานที่คุณภูมิใจ
      </h1>
      <p style={{ fontSize: 20, lineHeight: 1.7, color: 'var(--wd-ink-soft)', maxWidth: 640 }}>ตั้งแต่การวางแผน ประสานงาน จนถึงวันงานจริง
พร้อมอุปกรณ์และของรางวัลที่จัดหาให้ครบ
    </p>
      <div className="wd-hero-btns" style={{ display: 'flex', gap: 16, marginTop: 8 }}>
        <a className="wd-btn wd-btn--solid" href="ส่งข้อมูล.html">ปรึกษาเรา</a>
        <a className="wd-btn wd-btn--ghost" href="https://www.facebook.com" target="_blank" rel="noopener">Facebook เรา</a>
      </div>
    </div>

    {/* Services — matched card style */}
    <div className="wd-services" style={{ height: 560, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 36, ...vaSection }}>
      <div className="wd-section-title" style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <Mono>OUR SERVICES</Mono>
        <h2 style={{ fontSize: 38, fontWeight: 600 }}>บริการของเรา</h2>
      </div>
      <div className="wd-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
        {[{
        tag: 'EVENT ORGANIZER',
        title: 'รับจัดงานอีเวนต์ครบวงจร',
        desc: 'งานพิธีการ งานเปิดตัว งานประชุมสัมมนา งานกีฬาและการแข่งขัน ดูแลตั้งแต่วางแผนจนถึงหน้างานจริง',
        items: ['วางแผนและออกแบบงาน', 'ประสานสถานที่ / เวที / แสงเสียง', 'ดูแลพิธีกรและลำดับงาน', 'ทีมงานดูแลหน้างานจริง']
      },
      {
        tag: 'PROCUREMENT & SUPPLIES',
        title: 'จัดซื้อ–จัดหาอุปกรณ์งาน',
        desc: 'จัดซื้อและจัดหาสินค้าครบวงจรสำหรับงาน Event ทั้งถ้วยรางวัล สิ่งพิมพ์ เครื่องแต่งกาย และอุปกรณ์กีฬา',
        items: ['จัดหาตามโจทย์และงบประมาณ', 'สั่งทำพร้อมโลโก้/ชื่องาน', 'ส่งครบตรงเวลา', 'รับทั้งงานเล็กและงานใหญ่']
      }].
      map(({ tag, title, desc, items }) =>
      <div key={tag} style={{ border: '1px solid var(--wd-line)', display: 'flex', flexDirection: 'column' }}>
            <div style={{ background: 'var(--wd-paper2)', padding: '32px 32px 24px', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <Mono style={{ fontSize: 11 }}>{tag}</Mono>
              <h3 style={{ fontSize: 26, fontWeight: 600 }}>{title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--wd-ink-soft)' }}>{desc}</p>
            </div>
            <div style={{ padding: '20px 32px 28px', display: 'flex', flexDirection: 'column', gap: 8 }}>
              {items.map((item) =>
          <div key={item} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 15, color: 'var(--wd-ink-soft)' }}>
                  <div style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--wd-gray)', flexShrink: 0 }}></div>
                  {item}
                </div>
          )}
            </div>
          </div>
      )}
      </div>
    </div>

    {/* Products */}
    <div className="wd-products" style={{ height: 680, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 36, ...vaSection }}>
      <div className="wd-section-title" style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <Mono>PRODUCTS & SUPPLIES</Mono>
        <h2 style={{ fontSize: 38, fontWeight: 600 }}>สินค้าและอุปกรณ์สำหรับงาน</h2>
        <p style={{ fontSize: 18, color: 'var(--wd-ink-soft)', maxWidth: 560, margin: '0 auto', lineHeight: 1.7 }}>
          จัดหาครบ สั่งทำได้ตามโจทย์ ส่งทันวันงาน
        </p>
      </div>
      <div className="wd-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
        {[
      {
        tag: 'TROPHY & AWARDS',
        title: 'รางวัลและของรางวัล',
        desc: 'ถ้วยรางวัล โล่เกียรติยศ เหรียญรางวัล โบว์รางวัล สั่งทำได้ตามแบบ พร้อมสลักชื่อและข้อความ',
        items: ['ถ้วยรางวัลโลหะ / อะคริลิก', 'โล่เกียรติยศ / คริสตัล', 'เหรียญรางวัลสั่งทำ', 'โบว์รางวัลทุกขนาด']
      },
      {
        tag: 'PRINT & STATIONERY',
        title: 'สิ่งพิมพ์และเครื่องเขียน',
        desc: 'บัตร AD Card บัตรประจำตัว สมุดโน้ต ดินสอ ปากกา ตรายาง สั่งพิมพ์โลโก้และชื่องานได้',
        items: ['บัตร AD Card / บัตรผู้ร่วมงาน', 'สมุดโน้ต / ดินสอ / ปากกา', 'ตรายางสั่งทำ', 'ป้าย / Banner / Roll Up']
      },
      {
        tag: 'APPAREL & SPORTS',
        title: 'เครื่องแต่งกายและกีฬา',
        desc: 'เสื้อโปโล เสื้อกีฬา หมวก ผ้าพันคอ สกรีนโลโก้หน่วยงาน เหมาะสำหรับงานกีฬาและงานองค์กร',
        items: ['เสื้อโปโลสกรีนโลโก้', 'เสื้อกีฬา / เสื้อวิ่ง', 'หมวก / ผ้าพันคอ', 'อุปกรณ์กีฬาของที่ระลึก']
      }].
      map(({ tag, title, desc, items }) =>
      <div key={tag} style={{ border: '1px solid var(--wd-line)', display: 'flex', flexDirection: 'column' }}>
            <div style={{ background: 'var(--wd-paper2)', padding: '32px 32px 24px', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <Mono style={{ fontSize: 11 }}>{tag}</Mono>
              <h3 style={{ fontSize: 24, fontWeight: 600 }}>{title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--wd-ink-soft)' }}>{desc}</p>
            </div>
            <div style={{ padding: '20px 32px 28px', display: 'flex', flexDirection: 'column', gap: 8 }}>
              {items.map((item) =>
          <div key={item} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 15, color: 'var(--wd-ink-soft)' }}>
                  <div style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--wd-gray)', flexShrink: 0 }}></div>
                  {item}
                </div>
          )}
            </div>
          </div>
      )}
      </div>
    </div>

    {/* Process */}
    <div className="wd-process" style={{ height: 500, borderTop: '1px solid var(--wd-line)', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 40, ...vaSection }}>
      <div className="wd-section-title" style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <Mono>HOW WE WORK</Mono>
        <h2 style={{ fontSize: 38, fontWeight: 600 }}>ขั้นตอนการทำงาน</h2>
      </div>
      <div className="wd-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
        {[
      ['01', 'คุยโจทย์', 'ฟังความต้องการ วันงาน และงบประมาณ เพื่อให้เราเข้าใจงานของคุณอย่างครบถ้วน', ['ระบุวันและสถานที่งาน', 'กำหนดงบประมาณคร่าวๆ', 'บอกจำนวนผู้เข้าร่วม']],
      ['02', 'เสนอแผนงาน', 'ส่งใบเสนอราคาพร้อมรายละเอียดครบภายใน 1–2 วันทำการ ไม่มีค่าใช้จ่ายในขั้นตอนนี้', ['แผนงานและ timeline', 'ใบเสนอราคาชัดเจน', 'ปรับแก้ได้จนพอใจ']],
      ['03', 'จัดเตรียม', 'ประสานงานทุกฝ่าย จัดหาอุปกรณ์ สินค้า และทีมงาน ให้พร้อมก่อนวันงาน', ['ประสานสถานที่และผู้ให้บริการ', 'จัดหาสินค้าและของรางวัล', 'ซักซ้อมและเตรียมทีมงาน']],
      ['04', 'วันงานจริง', 'ทีมงานอยู่หน้างานตลอด ดูแลทุกรายละเอียด จนงานจบอย่างเรียบร้อยและราบรื่น', ['ทีมงานประจำหน้างาน', 'แก้ไขเหตุการณ์เฉพาะหน้า', 'สรุปงานหลังเสร็จสิ้น']]].
      map(([n, t, d, items]) =>
      <div key={n} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, color: 'var(--wd-gray)' }}>{n}</div>
            <div style={{ fontSize: 20, fontWeight: 600 }}>{t}</div>
            <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--wd-ink-soft)' }}>{d}</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 5, borderTop: '1px solid var(--wd-line)', paddingTop: 12 }}>
              {items.map((item) =>
          <div key={item} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--wd-gray)' }}>
                  <div style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--wd-gray)', flexShrink: 0 }}></div>
                  {item}
                </div>
          )}
            </div>
          </div>
      )}
      </div>
    </div>

    {/* Contact — info only */}
    <div className="wd-contact" style={{ background: 'var(--wd-ink)', color: 'var(--wd-light)', display: 'flex', alignItems: 'center', paddingTop: 72, paddingBottom: 72, paddingLeft: 100, paddingRight: 100 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18, fontSize: 17, lineHeight: 1.7, color: '#C9C7C1' }}>
        <LogoLockup dark size={44} />
        <div>{CONTACT.companyTh}<br />1361 หมู่ 4 ตำบลสำโรงเหนือ อำเภอเมืองสมุทรปราการ <br />จังหวัดสมุทรปราการ 10270</div>
        <div>Email : {CONTACT.email}</div>
      </div>
    </div>

    {/* Footer */}
    <div className="wd-footer" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 100px', background: 'var(--wd-ink)', borderTop: '1px solid #33322F', color: 'var(--wd-gray)', fontSize: 14 }}>
      <div>© 2024 {CONTACT.companyEn}</div>
    </div>

  </div>;


window.VariationA = VariationA;