/* global React, PROJECTS, NEW_PROJECTS, AWARDS */
function Marquee() {
  const phrases = [
    'YUAN DEVELOPMENT', '苑建築', 'DESIGN MAKES LIFE BETTER',
    '設計讓生活更完美', 'PINGTUNG · KAOHSIUNG', 'EST. 2016',
    'YUAN DEVELOPMENT', '苑建築', 'AWARDED IF · BERLIN · NY · PARIS',
  ];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {[...phrases, ...phrases].map((p, i) => <span key={i}>{p}</span>)}
      </div>
    </div>
  );
}
window.Marquee = Marquee;

function SectionHead({ num, eyebrowEn, eyebrowZh, titleEn, titleZh, count, countLabel, ital }) {
  return (
    <div className="sec-head">
      <div className="sec-head-l">
        <div className="sec-eyebrow">
          {num && <span className="num">{num}</span>}
          {num && <span className="bar"></span>}
          <span>{eyebrowEn}</span>
          {eyebrowZh && <span className="zh-only" style={{ marginLeft: 12 }}>{eyebrowZh}</span>}
        </div>
        <h2 className="sec-title">{titleEn}{ital && <span className="ital"> {ital}</span>}</h2>
        {titleZh && <div className="sec-title-zh">{titleZh}</div>}
      </div>
      {count && (
        <div className="sec-head-r">
          <div className="count">{count}</div>
          <div>{countLabel}</div>
        </div>
      )}
    </div>
  );
}
window.SectionHead = SectionHead;

function NewProjects() {
  return (
    <section className="sec warm" id="section-new">
      <SectionHead
        num="01"
        eyebrowEn="NOW SELLING"
        eyebrowZh="熱銷建案"
        titleEn="On the"
        ital="Market."
        titleZh="現正銷售中"
        count="02"
        countLabel="Open Projects"
      />
      <div className="new-list">
        {NEW_PROJECTS.map((p, i) => (
          <article key={i} className="new-card">
            <div className="new-card-img">
              <img src={`assets/${p.image}`} alt="" />
              <div className="new-card-tag">{p.tag}</div>
              <div className="new-card-status">
                <span className="blink"></span> Reservations open
              </div>
            </div>
            <div className="new-card-foot">
              <div className="new-card-name">
                <span className="zh">{p.nameZh}</span>
                <span className="en">{p.nameEn}</span>
              </div>
              <div className="new-card-info">
                <span>{p.location}</span>
                <span>{p.year}</span>
                <span style={{ borderBottom: '1px solid currentColor', paddingBottom: 2, marginTop: 6, color: 'var(--ink-1)' }}>
                  Request Brochure
                </span>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}
window.NewProjects = NewProjects;

function Projects({ onView }) {
  return (
    <section className="sec" id="section-feature">
      <SectionHead
        num="02"
        eyebrowEn="FEATURE PROJECTS"
        eyebrowZh="經典建築"
        titleEn="Built"
        ital="Works,"
        titleZh="一棟一棟,慢慢來"
        count="07"
        countLabel="Completed · 2016—2025"
      />
      <div className="proj-list">
        {PROJECTS.map(p => (
          <article key={p.num} className="proj" onClick={() => onView(p)}>
            <div className="proj-num-col">
              <div className="proj-num">{p.num}</div>
              <div className="proj-num-label">Project · {p.year}</div>
            </div>
            <div className="proj-body">
              <div className="proj-headline">
                <h3 className="proj-name-en">{p.nameEn}</h3>
                <div className="proj-name-zh">{p.nameZh}</div>
                <div className="proj-meta">
                  <span><span className="key">Location</span>{p.location}</span>
                  <span><span className="key">Type</span>{p.typology}</span>
                  <span><span className="key">Units</span>{p.units}</span>
                </div>
                <p className="proj-blurb">{p.blurb}</p>
                <p className="proj-blurb-zh zh-only">{p.blurbZh}</p>
                {p.awards && (
                  <div className="proj-awards">
                    {p.awards.map((a, i) => <img key={i} src={`assets/${a}`} alt="" />)}
                  </div>
                )}
                <a className="proj-link" onClick={(e) => { e.stopPropagation(); onView(p); }}>
                  View Project →
                </a>
              </div>
              <div className="proj-image">
                <img src={`assets/${p.images[0]}`} alt={p.nameEn} />
                <div className="corner">{p.num} · {p.year}</div>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}
window.Projects = Projects;

function Awards() {
  return (
    <section className="sec dark" id="section-awards">
      <SectionHead
        num="03"
        eyebrowEn="AWARDS"
        eyebrowZh="獲獎紀錄"
        titleEn="Quietly"
        ital="Recognised."
        titleZh="安靜地被看見"
        count="12"
        countLabel="International Awards"
      />
      <div className="awards-grid">
        {AWARDS.map((a, i) => (
          <div key={i} className="award">
            <img src={`assets/${a.img}`} alt="" />
            <div className="award-body">
              <div className="award-year">{a.year}</div>
              <div className="award-en">{a.en}</div>
              <div className="award-zh zh-only">{a.zh}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
window.Awards = Awards;

function About() {
  return (
    <section className="sec warm" id="section-about">
      <SectionHead
        num="04"
        eyebrowEn="STUDIO"
        eyebrowZh="關於苑建築"
        titleEn="Yuan"
        ital="Architecture."
        titleZh="苑建築"
      />
      <div className="about">
        <div className="about-portrait">
          <img src="assets/about-portrait.jpg" alt="" />
          <div className="stat-stack">
            <div className="num">10</div>
            <div className="lab">Years of Practice</div>
          </div>
          <div className="caption">FOUNDER · 創辦人</div>
        </div>
        <div className="about-copy">
          <p className="about-statement">
            We design <span className="ital">slow houses</span> for the south —
            built around verandas, vertical light, and the rhythm of an afternoon.
          </p>
          <p className="about-statement-zh zh-only">
            我們為南方設計慢房子,在深陽台與垂直格柵之間,把生活還給一個緩慢的下午。
          </p>
          <p className="about-body">
            Yuan Development was founded in 2016, with its design arm formally
            established in 2019. The studio operates three sister brands —
            Dongyuan, Heyuan, and Xinyuan — under a single umbrella, designing
            and selling vacation homes in Pingtung and Kaohsiung.
          </p>
          <p className="about-body-zh zh-only">
            苑建築設計工作室成立於 2019 年,以「東苑、禾苑、欣苑」三個品牌
            在屏東與高雄推出度假透天住宅,專注於南方氣候下的居住經驗。
          </p>
          <div className="about-brands">
            <div className="about-brand">
              <span className="zh">東苑</span>
              <span className="en">Dongyuan</span>
              <span className="desc">Vacation homes</span>
            </div>
            <div className="about-brand">
              <span className="zh">禾苑</span>
              <span className="en">Heyuan</span>
              <span className="desc">Mid-density</span>
            </div>
            <div className="about-brand">
              <span className="zh">欣苑</span>
              <span className="en">Xinyuan</span>
              <span className="desc">Bespoke</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.About = About;

function Contact() {
  return (
    <section className="sec" id="section-contact">
      <SectionHead
        num="05"
        eyebrowEn="ENQUIRE"
        eyebrowZh="聯絡我們"
        titleEn="Visit a"
        ital="House."
        titleZh="預約看屋"
      />
      <div className="contact">
        <h3 className="contact-headline">
          Private viewings <span className="ital">by appointment.</span>
          <span className="zh zh-only">請預約一個安靜的下午,實地走一遍。</span>
        </h3>
        <dl className="contact-info">
          <div>
            <dt>Office</dt>
            <dd>Pingtung City
              <span className="small">屏東市建國路 · By Appointment</span>
            </dd>
          </div>
          <div>
            <dt>Telephone</dt>
            <dd>+886 8 — 7XX 7XX
              <span className="small">Mon–Sat · 10:00–18:00</span>
            </dd>
          </div>
          <div>
            <dt>Email</dt>
            <dd>hello@yuandevelopment.com
              <span className="small">Reply within 24 hours</span>
            </dd>
          </div>
          <div>
            <dt>Press</dt>
            <dd>press@yuandevelopment.com
              <span className="small">For publication & exhibition</span>
            </dd>
          </div>
          <a className="contact-cta">
            Schedule a private viewing <span className="arrow"></span>
          </a>
        </dl>
      </div>
    </section>
  );
}
window.Contact = Contact;

function Footer({ onNav }) {
  return (
    <footer className="ft">
      <div className="ft-top">
        <div className="ft-mark">
          <div className="lockup">
            <img src="assets/logo.png" alt="" />
            <span>YUAN</span>
          </div>
          <div className="tag">Design makes life better.</div>
          <div className="tag-zh zh-only">設計讓生活更完美</div>
        </div>
        <div className="ft-col">
          <h6>Index · 索引</h6>
          <ul>
            <li><a onClick={() => onNav('home')}>Home<span className="zh">首頁</span></a></li>
            <li><a onClick={() => onNav('new')}>New Projects<span className="zh">熱銷建案</span></a></li>
            <li><a onClick={() => onNav('feature')}>Feature Projects<span className="zh">經典建築</span></a></li>
            <li><a onClick={() => onNav('about')}>Studio<span className="zh">苑建築</span></a></li>
          </ul>
        </div>
        <div className="ft-col">
          <h6>Brands · 品牌</h6>
          <ul>
            <li><a>Dongyuan<span className="zh">東苑</span></a></li>
            <li><a>Heyuan<span className="zh">禾苑</span></a></li>
            <li><a>Xinyuan<span className="zh">欣苑</span></a></li>
          </ul>
        </div>
        <div className="ft-col">
          <h6>Contact · 聯絡</h6>
          <ul>
            <li><a>hello@yuandevelopment.com</a></li>
            <li><a>+886 8 — 7XX 7XX</a></li>
            <li><a>Pingtung, Taiwan</a></li>
          </ul>
        </div>
      </div>
      <div className="ft-bottom">
        <div>© 2026 Yuan Development · 苑建築設計</div>
        <div className="social">
          <a href="https://www.facebook.com/DONGYUAN.DEVELOPMENT" target="_blank" rel="noreferrer">
            <img src="assets/icon-fb.png" alt="" />
          </a>
          <a href="https://www.instagram.com/yuandevelopment/" target="_blank" rel="noreferrer">
            <img src="assets/icon-ig.png" alt="" />
          </a>
        </div>
        <div className="right">Made slowly in 屏東 · Pingtung</div>
      </div>
    </footer>
  );
}
window.Footer = Footer;