// Sections: About, Exhibitions, Collection, Gallery, Visit, Footer

function Ticker() {
  const items = [
  '观帽 · A Reading of Crowns',
  'New · 富美帽饰博物馆 V1',
  '6,000+ pieces in collection',
  'Mon – Sun · 09:00 – 17:00',
  'Nantong, Jiangsu',
  'Spring 2026 Programme'];

  const items2 = [
  '观帽 · A Reading of Crowns',
  'New · 富美帽饰博物馆 ',
  '6,200+ pieces in collection',
  'Mon – Sun · 09:00 – 17:00',
  'Nantong, Jiangsu',
  'Spring 2026 Programme'];

  const all = [...items, ...items2];
  return (
    <div className="ticker" aria-hidden>
      <div className="ticker-track">
        {all.map((t, i) => <span key={i}>{t}</span>)}
      </div>
    </div>);

}

function About() {
  return (
    <section className="section about" id="about" data-screen-label="02 About">
      <div className="about-bleed">
        <img src="assets/about-bg.jpg" alt="Fumei Hat Museum exterior" />
        <div className="vignette"></div>
        <div className="caption">
          <h3>A house for the things we wear above the head, and the worlds they hold below.</h3>
          <div className="meta">
            Nantong · Jiangsu<br />
            Architect of record<br />
            Opened 2024
          </div>
        </div>
      </div>

      <div className="section-head" style={{ marginTop: 120 }}>
        <div className="num">02 / About</div>
        <h2>A private<br />collection,<br />turned <span className="em">public</span>.</h2>
      </div>

      <div className="about-prose">
        <p className="lead">
          <span className="drop">F</span>ounded by collector and patron Sun, the Fumei Hat Museum gathers
          more than a thousand years of headwear from across China and the wider world — coronets, helmets,
          straw boaters, opera headpieces, ritual crowns — and gives them, at last, a single roof.
        </p>
        <div>
          <p>
            南通富美帽饰博物馆位于江苏南通，由企业家孙先生历经三十余年私人收藏发起，
            于二零二四年正式对公众开放。馆藏涵盖唐代命妇花树冠、明清官帽、近代草编礼帽，
            以及来自欧亚多国的礼仪头饰。
          </p>
          <p>
            The building — a glass and steel pavilion ringed by a reflecting pool —
            was conceived as a quiet vessel: rounded, low, and almost archival in its
            restraint, so the objects inside can speak.
          </p>
        </div>
        <div>
          <p>
            We collect, conserve, and stage exhibitions; we work with scholars,
            craftspeople and contemporary designers; and we license the museum's archive
            to brands who want to think seriously about the line between dress and ceremony.
          </p>
          <p>
            From hatmaker to historian, from courtier to commuter — the museum is for
            anyone who has ever paused, in front of a mirror, to put something on their head.
          </p>
        </div>
      </div>
    </section>);

}

function Exhibitions() {
  return (
    <section className="section exhibitions" id="exhibitions" data-screen-label="03 Exhibitions">
      <div className="section-head">
        <div className="num">03 / Exhibitions</div>
        <h2>What is on,<br />and what is <span className="em">coming</span>.</h2>
      </div>

      <div className="exh-grid">
        <div className="exh-card wide">
          <img src="assets/interior-arch.jpg" alt="观帽 exhibition arch" />
          <div className="info">
            <span className="status live">Now showing</span>
            <h3>观帽 — A Reading of Crowns</h3>
            <div className="dates">12 Mar 2026 — 31 Aug 2026 · Hall A</div>
          </div>
        </div>
        <div className="exh-card">
          <img src="assets/interior-figures.jpg" alt="Figures suspended above 帽 character" />
          <div className="info">
            <span className="status">Up next</span>
            <h3>巾帽千年 — A Millennium Above the Head</h3>
            <div className="dates">15 Sep 2026 — 28 Feb 2027 · Hall B</div>
          </div>
        </div>
        <div className="exh-card">
          <img src="assets/interior-red.jpg" alt="Red gallery interior" />
          <div className="info">
            <span className="status">Permanent</span>
            <h3>朱阁 — The Red Gallery</h3>
            <div className="dates">From 2024 · Long-term display</div>
          </div>
        </div>
      </div>

      <div className="exh-list">
        <div><span className="label mono">Curator's Tour</span>Wednesdays · 14:00 · Free with admission</div>
        <div><span className="label mono">Symposium</span>The Hat in Translation · 18 May 2026</div>
        <div><span className="label mono">Workshop</span>Straw weaving with master Li · monthly</div>
        <div><span className="label mono">After Hours</span>Last Friday of each month · 19–22:00</div>
      </div>
    </section>);

}

function Collection() {
  return (
    <section className="section collection" id="collection" data-screen-label="04 Collection">
      <div className="section-head">
        <div className="num">04 / Collection</div>
        <h2>Selected <span className="em">objects</span><br />from the archive.</h2>
      </div>

      <div className="coll-mag">
        <div className="lead-img">
          <img src="assets/hat-2.jpg" alt="珊瑚珠冠 — coral and gold ceremonial coronet" />
        </div>
        <div className="lead-text">
          <div className="kicker mono">№ 0142 · Featured Object</div>
          <h3>珊瑚之冠 — A coronet of <span className="em">coral and gold</span></h3>
          <p>
            A 19th-century court headpiece woven from gilt filigree and inset with red coral
            beads from the South China Sea. Worn during winter audiences; the lower band of
            black hair lacquer was added by a later hand, possibly Mongolian.
          </p>
          <dl>
            <dt>Era</dt><dd>Late Qing, c. 1880</dd>
            <dt>Origin</dt><dd>Beijing / Mongolia</dd>
            <dt>Materials</dt><dd>Gilt copper, coral, jade, lacquered hair</dd>
            <dt>Dimensions</dt><dd>H 32 cm · D 22 cm</dd>
          </dl>
        </div>

        <div className="side-text">
          <div className="quote">"A hat is the lid the body keeps on its history."</div>
          <p>
            The collection is organised in four arcs — Court, Folk, Foreign and Modern —
            and rotates through the galleries on a six-month cadence. A full digital index
            is in development; what follows is a preview of three pieces currently on view.
          </p>
        </div>
        <div className="right-img">
          <img src="assets/hat-1.jpg" alt="Tassel crown gallery view" />
        </div>
      </div>

      <div className="artifact-strip">
        <article className="artifact-card">
          <div className="frame"><img src="assets/hat-1.jpg" alt="" /></div>
          <div className="meta">
            <h4>朱缨之冠</h4>
            <span className="id">№ 0078</span>
          </div>
          <div className="meta-2"><span>Qing · 18c</span><span>Silk · gilt</span></div>
        </article>
        <article className="artifact-card">
          <div className="frame"><img src="assets/hat-3.jpg" alt="" /></div>
          <div className="meta">
            <h4>金羽草帽</h4>
            <span className="id">№ 0301</span>
          </div>
          <div className="meta-2"><span>Republic · 1928</span><span>Straw · ribbon</span></div>
        </article>
        <article className="artifact-card">
          <div className="frame"><img src="assets/hat-2.jpg" alt="" /></div>
          <div className="meta">
            <h4>珊瑚冠</h4>
            <span className="id">№ 0142</span>
          </div>
          <div className="meta-2"><span>Late Qing</span><span>Coral · jade</span></div>
        </article>
      </div>
    </section>);

}

function Gallery() {
  return (
    <section className="section gallery" data-screen-label="05 Gallery">
      <div className="section-head">
        <div className="num">05 / Inside</div>
        <h2>Walk the <span className="em">galleries</span>.</h2>
      </div>
      <div className="gallery-grid">
        <div className="left">
          <img src="assets/interior-red.jpg" alt="Red corridor gallery" />
          <img src="assets/interior-arch.jpg" alt="Arched gallery entrance" />
        </div>
        <div className="right">
          <img src="assets/interior-figures.jpg" alt="Suspended figures over 帽 character" />
        </div>
      </div>
      <p className="gallery-quote">
        "Restraint is the museum's <span className="em">first material</span>.
        Then comes the light, and only then the object."
        <span className="attr">— Field notes, opening week 2024</span>
      </p>
    </section>);

}

function Visit() {
  return (
    <section className="section visit" id="visit" data-screen-label="06 Visit">
      <div className="section-head">
        <div className="num">06 / Visit</div>
        <h2>Plan <span className="em">your</span><br />afternoon.</h2>
      </div>
      <div className="visit-grid">
        <div className="visit-info">
          <dl>
            <div><dt>Address</dt><dd>江苏省南通市崇川区<br />Fumei Hat Museum, Chongchuan District, Nantong, Jiangsu</dd></div>
            <div><dt>Hours</dt><dd>Tuesday – Sunday · 09:00 – 17:00<br />Closed Monday</dd></div>
            <div><dt>Admission</dt><dd>¥60 standard · ¥30 concession · Under 12 free</dd></div>
            <div><dt>Contact</dt><dd>+86 513 0000 0000<br />hello@fumei-museum.cn</dd></div>
          </dl>
          <div className="visit-cta">
            <a className="btn red" href="#">
              <span>Book a visit</span>
              <span className="arrow"></span>
            </a>
            <a className="btn" href="#">
              <span>Group enquiries</span>
              <span className="arrow"></span>
            </a>
          </div>
        </div>
        <div className="visit-map" aria-label="Map of Nantong, China">
          <svg className="map-svg" viewBox="0 0 1000 850" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
            <defs>
              <pattern id="hatch" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
                <line x1="0" y1="0" x2="0" y2="6" stroke="rgba(244,239,230,0.05)" strokeWidth="1"/>
              </pattern>
            </defs>
            <rect width="1000" height="850" fill="url(#hatch)"/>

            {/* China — recognizable silhouette derived from a simplified outline.
                Coordinate system: ~1000×850, viewport like a Mercator-cropped China.
                Key landmarks at: Beijing (665,310), Shanghai (790,510),
                Guangzhou (655,665), Hong Kong (665,690), Hainan (605,720),
                Taiwan (855,580), Nantong (805,495). */}
            <path
              d="M 110 380
                 C 120 360, 140 340, 165 330
                 C 180 310, 175 285, 190 270
                 C 210 255, 235 250, 250 235
                 C 245 215, 260 195, 285 188
                 C 310 180, 330 165, 355 158
                 C 380 152, 400 138, 425 132
                 C 450 128, 470 115, 495 112
                 C 520 110, 540 122, 560 130
                 C 580 132, 600 122, 620 118
                 C 645 116, 668 122, 690 132
                 C 712 138, 735 132, 758 138
                 C 780 145, 798 162, 812 182
                 C 825 198, 832 220, 845 238
                 C 860 252, 880 258, 895 275
                 C 905 295, 898 318, 888 335
                 C 875 348, 858 355, 842 360
                 C 825 365, 808 362, 792 358
                 C 778 360, 770 375, 768 390
                 C 770 408, 780 422, 792 432
                 C 802 445, 798 462, 788 472
                 C 780 480, 770 482, 758 478
                 C 760 490, 770 498, 778 508
                 C 790 510, 798 498, 805 488
                 C 815 488, 822 495, 825 505
                 L 818 520
                 L 802 528
                 C 790 530, 780 540, 775 552
                 C 770 568, 758 580, 745 590
                 C 728 602, 715 615, 700 628
                 C 685 642, 668 652, 650 660
                 C 638 672, 625 685, 615 700
                 C 600 705, 588 695, 578 685
                 C 565 678, 550 672, 538 665
                 C 528 655, 522 642, 518 628
                 C 510 615, 500 605, 488 598
                 C 472 595, 458 588, 448 575
                 C 438 562, 432 545, 425 530
                 C 415 518, 400 510, 388 498
                 C 378 485, 372 470, 368 455
                 C 360 442, 348 432, 335 425
                 C 320 418, 305 415, 290 412
                 C 275 410, 260 408, 245 402
                 C 230 395, 215 388, 202 378
                 C 188 372, 170 372, 155 380
                 C 138 388, 122 392, 110 380 Z"
              fill="rgba(244,239,230,0.07)"
              stroke="rgba(244,239,230,0.45)"
              strokeWidth="1.4"
              strokeLinejoin="round"
            />
            {/* Hainan island */}
            <ellipse cx="605" cy="720" rx="22" ry="14"
              fill="rgba(244,239,230,0.07)"
              stroke="rgba(244,239,230,0.45)" strokeWidth="1.2"/>
            {/* Taiwan island */}
            <path d="M 850 555 Q 868 575, 862 605 Q 855 615, 848 605 Q 842 580, 846 555 Z"
              fill="rgba(244,239,230,0.07)"
              stroke="rgba(244,239,230,0.45)" strokeWidth="1.2"/>

            {/* Yangtze River — flowing east through delta to Nantong/Shanghai */}
            <path
              d="M 320 470 Q 420 475, 520 482 T 720 495 Q 760 498, 800 500"
              fill="none"
              stroke="rgba(244,239,230,0.3)"
              strokeWidth="1.2"
              strokeDasharray="4 3"
            />
            {/* Yellow River — northern arc */}
            <path
              d="M 320 320 Q 420 295, 510 310 Q 590 330, 660 318"
              fill="none"
              stroke="rgba(244,239,230,0.18)"
              strokeWidth="1"
              strokeDasharray="2 3"
            />

            {/* Reference cities */}
            <g fontFamily="var(--font-mono), monospace" fontSize="13" letterSpacing="2" fill="rgba(244,239,230,0.55)">
              <circle cx="665" cy="310" r="2.5" fill="rgba(244,239,230,0.6)"/>
              <text x="675" y="314">BEIJING</text>
              <circle cx="655" cy="665" r="2.5" fill="rgba(244,239,230,0.6)"/>
              <text x="665" y="669">GUANGZHOU</text>
              <circle cx="500" cy="500" r="2.5" fill="rgba(244,239,230,0.5)"/>
              <text x="510" y="504">WUHAN</text>
            </g>

            {/* Nantong crosshairs */}
            <line x1="0" y1="495" x2="1000" y2="495" stroke="rgba(199,67,52,0.22)" strokeWidth="1" strokeDasharray="3 5"/>
            <line x1="805" y1="0" x2="805" y2="850" stroke="rgba(199,67,52,0.22)" strokeWidth="1" strokeDasharray="3 5"/>
          </svg>
          <span className="map-label">Nantong · 南通 · China</span>
          <span className="pin"></span>
          <span className="pin-label">南通市 NANTONG</span>
          <span className="map-label-coord">31.9802° N<br />120.8943° E</span>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer>
      <div className="foot-mega">
        <span className="em">F</span>UM<span className="em">EI</span>·<br />富美帽饰
      </div>
      <div className="foot-grid">
        <div>
          <h5>The Museum</h5>
          <div className="brand-block">
            南通市富美帽饰博物馆<br />
            Nantong Foremost Hats Museum<br />
            <span style={{ color: 'var(--mute)', fontSize: 13, fontFamily: 'JetBrains Mono, monospace', fontStyle: 'normal', letterSpacing: '0.1em' }}>EST. 2014</span>
          </div>
        </div>
        <div>
          <h5>Visit</h5>
          <ul>
            <li><a href="#">Hours & admission</a></li>
            <li><a href="#">Group bookings</a></li>
            <li><a href="#">Accessibility</a></li>
            <li><a href="#">Map & directions</a></li>
          </ul>
        </div>
        <div>
          <h5>Programme</h5>
          <ul>
            <li><a href="#">Current exhibitions</a></li>
            <li><a href="#">Coming soon</a></li>
            <li><a href="#">Academy</a></li>
            <li><a href="#">Partnerships</a></li>
          </ul>
        </div>
        <div>
          <h5>Follow</h5>
          <ul>
            <li><a href="#">Newsletter</a></li>
            <li><a href="#">微信 · WeChat</a></li>
            <li><a href="#">小红书</a></li>
            <li><a href="#">Instagram</a></li>
          </ul>
        </div>
      </div>
      <div className="foot-bottom">
        <span>© 2026 Fumei Hat Museum · 苏ICP备 0000000号</span>
        <span>Site v1.0 · Built in residence</span>
      </div>
    </footer>);

}

window.About = About;
window.Exhibitions = Exhibitions;
window.Collection = Collection;
window.Gallery = Gallery;
window.Visit = Visit;
window.Footer = Footer;
window.Ticker = Ticker;