// V2 · 工厂直击版 / Factory Visit Editorial
// Photo-driven, trust-led. Less interactive, more storytelling.

const C = {
  ink: '#171a1f',
  inkDeep: '#0a0a0c',
  paper: '#f5f1e8',
  paperDeep: '#ece6d6',
  amber: '#d97706',
  amberSoft: '#fbbf24',
  blue: '#1e3a8a',
  warm: '#cbb791',
  warmDark: '#5b4a35',
  warmLine: '#3a3024',
  text: '#a39078',
};

// ─────────────────────────── Top nav (minimal)
function TopNav() {
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0, zIndex: 20,
      padding: '20px 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: 'linear-gradient(to bottom, rgba(10,10,12,.85), rgba(10,10,12,0))',
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
        <span style={{ fontWeight: 700, fontSize: 14, letterSpacing: 4, color: C.paper }}>QIAO WAI</span>
        <span style={{ fontSize: 10, color: C.warm, letterSpacing: 2, textTransform: 'uppercase' }}>Selected</span>
      </div>
      <nav style={{ display: 'flex', gap: 32, fontSize: 12, color: C.warm, letterSpacing: 1.5 }}>
        <span style={{ cursor: 'pointer', color: C.paper, borderBottom: '1px solid ' + C.amber, paddingBottom: 2 }}>FACTORY VISIT</span>
        <span style={{ cursor: 'pointer' }}>SUPPLIERS</span>
        <span style={{ cursor: 'pointer' }}>CATALOG</span>
        <span style={{ cursor: 'pointer' }}>ABOUT</span>
      </nav>
      <div style={{ display: 'flex', gap: 24, fontSize: 12, color: C.warm }}>
        <span style={{ cursor: 'pointer' }}>EN · USD</span>
        <span style={{ cursor: 'pointer', color: C.paper }}>Sign in</span>
      </div>
    </div>
  );
}

// ─────────────────────────── Hero (cinematic)
function Hero() {
  return (
    <section style={{
      position: 'relative', height: 640, overflow: 'hidden',
      background: 'linear-gradient(180deg, #0a0a0c 0%, #14161b 30%, #1d1410 70%, #2a1d0e 100%)',
    }}>
      {/* spotlight */}
      <div style={{
        position: 'absolute', top: '20%', right: '8%', width: 720, height: 720, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(217,119,6,.45) 0%, rgba(217,119,6,.15) 30%, rgba(0,0,0,0) 65%)',
        filter: 'blur(20px)',
      }} />
      {/* faux machine silhouettes */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 220, opacity: 0.6 }}>
        <div style={{ position: 'absolute', bottom: 0, left: 60, width: 240, height: 200, background: '#040405' }} />
        <div style={{ position: 'absolute', bottom: 100, left: 100, width: 60, height: 60, background: '#040405' }} />
        <div style={{ position: 'absolute', bottom: 0, left: 360, width: 140, height: 160, background: '#040405' }} />
        <div style={{ position: 'absolute', bottom: 0, right: 120, width: 280, height: 220, background: '#050608' }} />
        <div style={{ position: 'absolute', bottom: 0, right: 30, width: 80, height: 180, background: '#050608' }} />
      </div>
      {/* floor lines for depth */}
      <svg style={{ position: 'absolute', bottom: 0, left: 0, width: '100%', height: 100, opacity: 0.18 }} viewBox="0 0 1280 100" preserveAspectRatio="none">
        <line x1="0" y1="100" x2="1280" y2="60" stroke="#a16207" strokeWidth="1"/>
        <line x1="0" y1="80" x2="1280" y2="40" stroke="#a16207" strokeWidth="1"/>
        <line x1="0" y1="60" x2="1280" y2="20" stroke="#a16207" strokeWidth="1"/>
      </svg>
      <div className="grain" />

      <TopNav />

      <div style={{ position: 'relative', padding: '160px 80px 0', maxWidth: 920 }}>
        <div className="mono fade-up" style={{ fontSize: 11, color: C.amber, letterSpacing: 4, marginBottom: 28 }}>
          FACTORY VISIT — VOL. 01
        </div>
        <h1 className="serif fade-up" style={{
          fontSize: 76, fontWeight: 900, lineHeight: 1.05, color: C.paper,
          margin: 0, letterSpacing: -1, animationDelay: '.1s',
        }}>
          We've walked<br />
          the factory floor.
        </h1>
        <h2 className="serif fade-up" style={{
          fontSize: 44, fontWeight: 500, fontStyle: 'italic', color: C.amber,
          margin: '12px 0 32px', letterSpacing: -0.5, animationDelay: '.2s',
        }}>
          So you don't have to.
        </h2>
        <p className="fade-up" style={{ fontSize: 15, color: C.warm, lineHeight: 1.7, maxWidth: 600, marginBottom: 36, animationDelay: '.3s' }}>
          Every supplier on Qiao Wai is verified in person by our Yongkang office.
          We photograph the lathes, weigh the steel, and sit with the owner.
          You see what we see.
        </p>
        <p className="fade-up" style={{ fontSize: 12, color: C.text, marginBottom: 40, animationDelay: '.35s', letterSpacing: 1.5, textTransform: 'uppercase' }}>
          Site visits · Factory floor · No paper-only certifications
        </p>
        <div className="fade-up" style={{ display: 'flex', gap: 16, alignItems: 'center', animationDelay: '.4s' }}>
          <button style={{
            background: C.amber, color: C.ink, border: 'none', padding: '16px 28px',
            fontWeight: 700, letterSpacing: 2, fontSize: 13,
          }}>
            ▶ WATCH A FACTORY TOUR
          </button>
          <button style={{
            background: 'transparent', color: C.paper, border: '1px solid ' + C.warm,
            padding: '16px 28px', fontWeight: 500, letterSpacing: 2, fontSize: 13,
          }}>
            SCHEDULE A VISIT
          </button>
        </div>
      </div>

      {/* bottom scroll hint */}
      <div style={{
        position: 'absolute', bottom: 24, left: '50%', transform: 'translateX(-50%)',
        color: C.warm, fontSize: 10, letterSpacing: 3, textAlign: 'center',
      }}>
        SCROLL · FOUR FACTORIES BELOW
        <div style={{ marginTop: 8, fontSize: 14 }}>↓</div>
      </div>
    </section>
  );
}

// ─────────────────────────── Featured supplier story
function FeaturedSupplier({ id, expanded, toggle }) {
  const f = window.FACTORIES_V2[id];
  return (
    <section style={{ padding: '100px 80px', background: C.ink, position: 'relative' }}>
      <div className="mono" style={{ fontSize: 11, color: C.amber, letterSpacing: 4, marginBottom: 16 }}>
        FACTORY 01 · YONGKANG, ZHEJIANG
      </div>
      <h2 className="serif" style={{ fontSize: 56, fontWeight: 700, color: C.paper, lineHeight: 1.1, margin: '0 0 12px', maxWidth: 800 }}>
        {f.name_en}
      </h2>
      <div style={{ fontSize: 12, color: C.warm, marginBottom: 48, letterSpacing: 2, textTransform: 'uppercase' }}>{f.region} · since {f.since}</div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'start' }}>
        {/* photo */}
        <div style={{ position: 'relative' }}>
          <div style={{
            aspectRatio: '4/3', width: '100%', background: f.photo,
            position: 'relative', overflow: 'hidden',
          }}>
            <div className="grain" style={{ opacity: 0.35 }} />
            {/* faux silhouettes */}
            <div style={{ position: 'absolute', bottom: 0, left: '10%', width: '20%', height: '60%', background: 'rgba(0,0,0,.7)' }} />
            <div style={{ position: 'absolute', bottom: 0, right: '15%', width: '30%', height: '70%', background: 'rgba(0,0,0,.65)' }} />
            <div style={{ position: 'absolute', bottom: 16, left: 16, fontSize: 10, letterSpacing: 2, color: C.warm }} className="mono">
              SHOT BY QIAO WAI · 2026.03.14
            </div>
          </div>
          {/* metric strip */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', borderTop: '1px solid ' + C.warmLine, marginTop: 24 }}>
            <Metric label="EST." value={f.since} />
            <Metric label="AREA" value={`${(f.sqm/1000).toFixed(0)}k sqm`} />
            <Metric label="STAFF" value={f.employees} />
          </div>
        </div>

        {/* quote + interview */}
        <div>
          <div style={{ fontSize: 60, color: C.amber, lineHeight: 1, marginBottom: -8 }}>"</div>
          <blockquote className="serif" style={{ margin: 0, fontSize: 28, fontWeight: 500, color: C.paper, lineHeight: 1.4, fontStyle: 'italic' }}>
            {f.quote_en}
          </blockquote>
          <div style={{ marginTop: 28, paddingTop: 20, borderTop: '1px solid ' + C.warmLine, fontSize: 12, color: C.warm, letterSpacing: 1 }}>
            — {f.owner} · OWNER · {f.region.toUpperCase()}
          </div>

          <button
            onClick={toggle}
            style={{
              marginTop: 32, background: 'transparent', color: C.amber, border: '1px solid ' + C.amber,
              padding: '12px 22px', fontSize: 12, letterSpacing: 2, fontWeight: 600,
            }}
          >
            {expanded ? '— COLLAPSE INTERVIEW' : '+ READ THE FULL INTERVIEW'}
          </button>

          {expanded && (
            <div className="fade-up" style={{ marginTop: 24, padding: 24, background: C.inkDeep, border: '1px solid ' + C.warmLine }}>
              <div className="mono" style={{ fontSize: 10, color: C.amber, letterSpacing: 3, marginBottom: 14 }}>INTERVIEW · MARCH 2026</div>
              <p style={{ fontSize: 14, color: C.paper, lineHeight: 1.8, marginBottom: 16 }}>"{f.interview_en}"</p>
              <p className="cn" style={{ fontSize: 13, color: C.warm, lineHeight: 1.8, fontStyle: 'italic' }}>"{f.interview_zh}"</p>
              <div style={{ marginTop: 16, fontSize: 11, color: C.text }}>— {f.owner} · {f.owner_zh}</div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function Metric({ label, value }) {
  return (
    <div style={{ padding: '20px 0' }}>
      <div className="mono" style={{ fontSize: 10, color: C.warm, letterSpacing: 2, marginBottom: 4 }}>{label}</div>
      <div className="serif" style={{ fontSize: 28, fontWeight: 700, color: C.paper }}>{value}</div>
    </div>
  );
}

// ─────────────────────────── Trust strip (certs)
function TrustStrip() {
  return (
    <section style={{ background: C.paper, color: C.ink, padding: '80px 80px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'center' }}>
        <div>
          <div className="mono" style={{ fontSize: 11, color: C.amber, letterSpacing: 4, marginBottom: 14 }}>VERIFIED IN PERSON</div>
          <h3 className="serif" style={{ fontSize: 40, fontWeight: 700, lineHeight: 1.15, margin: '0 0 20px', color: C.ink }}>
            No paper-only<br />certifications.
          </h3>
          <p style={{ fontSize: 14, color: C.warmDark, lineHeight: 1.7, margin: 0 }}>
            We visit. We photograph. We record. Every certification on this page is matched
            with the audit photo our team took on site, dated and geotagged.
          </p>
          <p style={{ fontSize: 11, color: '#7a6a55', marginTop: 8, letterSpacing: 1.5, textTransform: 'uppercase' }}>
            Shot on site · Negatives kept · Timestamps & geotag
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
          {window.CERTS_V2.map(cert => (
            <div key={cert.code} style={{ padding: '20px 0', borderTop: '1px solid ' + C.warmLine, borderBottom: '1px solid ' + C.warmLine, textAlign: 'center' }}>
              <div className="serif" style={{ fontSize: 28, fontWeight: 700, color: C.ink, letterSpacing: 1 }}>{cert.code}</div>
              <div style={{ fontSize: 11, color: C.warmDark, marginTop: 4, letterSpacing: 1 }}>{cert.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────── Catalog teaser (4 large cards)
function CatalogTeaser({ openIdx, setOpenIdx }) {
  return (
    <section style={{ padding: '100px 80px', background: C.ink }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 48, borderBottom: '1px solid ' + C.warmLine, paddingBottom: 24 }}>
        <div>
          <div className="mono" style={{ fontSize: 11, color: C.amber, letterSpacing: 4, marginBottom: 12 }}>FEATURED PRODUCTS · 04</div>
          <h2 className="serif" style={{ fontSize: 44, fontWeight: 700, color: C.paper, margin: 0 }}>
            From the floors we walked.
          </h2>
        </div>
        <button style={{
          background: 'transparent', color: C.warm, border: '1px solid ' + C.warm,
          padding: '12px 22px', fontSize: 12, letterSpacing: 2, fontWeight: 500,
        }}>
          BROWSE ALL 16 SKUS →
        </button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
        {window.PRODUCTS_V2.map((p, i) => {
          const factory = window.FACTORIES_V2[p.factory];
          const open = openIdx === i;
          return (
            <article key={p.id} style={{ background: C.inkDeep, border: '1px solid ' + C.warmLine, overflow: 'hidden' }}>
              <div style={{
                height: 240, background: p.photo, position: 'relative',
                display: 'flex', alignItems: 'flex-end', padding: 20,
              }}>
                <div className="grain" style={{ opacity: 0.3 }} />
                <div className="mono" style={{ position: 'absolute', top: 16, left: 20, fontSize: 10, color: C.warm, letterSpacing: 2 }}>
                  {p.sku_code}
                </div>
                <div className="mono" style={{ position: 'absolute', top: 16, right: 20, fontSize: 10, color: C.amber, letterSpacing: 2 }}>
                  FACTORY · {factory.name_en.split(' ')[0].toUpperCase()}
                </div>
              </div>
              <div style={{ padding: 28 }}>
                <h3 className="serif" style={{ fontSize: 26, fontWeight: 700, color: C.paper, margin: '0 0 4px', letterSpacing: -0.3 }}>
                  {p.name_en}
                </h3>
                <div style={{ fontSize: 11, color: C.warm, marginBottom: 16, letterSpacing: 2, textTransform: 'uppercase', fontFamily: 'JetBrains Mono, monospace' }}>{p.sku_code}</div>
                <p style={{ fontSize: 14, color: C.text, lineHeight: 1.6, margin: '0 0 20px' }}>{p.desc_en}</p>

                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid ' + C.warmLine, paddingTop: 16 }}>
                  <div className="mono" style={{ fontSize: 11, color: C.amber, letterSpacing: 1 }}>{p.moq_summary}</div>
                  <button
                    onClick={() => setOpenIdx(open ? null : i)}
                    style={{
                      background: open ? C.amber : 'transparent', color: open ? C.ink : C.amber,
                      border: '1px solid ' + C.amber, padding: '8px 14px',
                      fontSize: 11, letterSpacing: 1.5, fontWeight: 600,
                    }}
                  >
                    {open ? 'CLOSE' : 'STORY +'}
                  </button>
                </div>

                {open && (
                  <div className="fade-up" style={{ marginTop: 20, paddingTop: 20, borderTop: '1px dashed ' + C.warmLine }}>
                    <div className="mono" style={{ fontSize: 10, color: C.warm, letterSpacing: 2, marginBottom: 8 }}>FROM THE FACTORY</div>
                    <p className="serif" style={{ fontSize: 16, fontStyle: 'italic', color: C.paper, margin: '0 0 12px', lineHeight: 1.5 }}>
                      "{factory.quote_en}"
                    </p>
                    <div style={{ fontSize: 11, color: C.warm }}>— {factory.owner} · {factory.region}</div>
                  </div>
                )}
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}

// ─────────────────────────── Inside the warehouse 3-col
function Warehouse() {
  return (
    <section style={{ background: C.paper, color: C.ink, padding: '100px 80px' }}>
      <div style={{ marginBottom: 48 }}>
        <div className="mono" style={{ fontSize: 11, color: C.amber, letterSpacing: 4, marginBottom: 14 }}>INSIDE · NINGBO BONDED WAREHOUSE</div>
        <h2 className="serif" style={{ fontSize: 44, fontWeight: 700, lineHeight: 1.1, margin: 0, color: C.ink }}>
          Three rooms we walk through every Tuesday.
        </h2>
        <p style={{ fontSize: 12, color: C.warmDark, marginTop: 10, letterSpacing: 1.5, textTransform: 'uppercase' }}>
          Weekly Tuesday rounds · QC · packing · sample
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
        {window.WAREHOUSE_V2.map((w, i) => (
          <figure key={i} style={{ margin: 0 }}>
            <div style={{ aspectRatio: '4/5', background: w.photo, position: 'relative', overflow: 'hidden' }}>
              <div className="grain" style={{ opacity: 0.3 }} />
              <div style={{ position: 'absolute', bottom: 16, left: 16, color: C.paper }}>
                <div className="mono" style={{ fontSize: 9, letterSpacing: 2, color: C.amberSoft }}>{String(i+1).padStart(2,'0')} / 03</div>
              </div>
            </div>
            <figcaption style={{ marginTop: 20 }}>
              <div className="serif" style={{ fontSize: 22, fontWeight: 700, color: C.ink, marginBottom: 4 }}>{w.title_en}</div>
              <div className="cn" style={{ fontSize: 12, color: C.warmDark, marginBottom: 10 }}>{w.title_zh}</div>
              <p style={{ fontSize: 13, color: C.warmDark, lineHeight: 1.6, margin: 0 }}>{w.caption_en}</p>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────── CTA + footer
function Outro() {
  return (
    <section style={{ background: C.inkDeep, color: C.paper, padding: '80px 80px 40px' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60,
        padding: '48px 0', borderTop: '1px solid ' + C.warmLine, borderBottom: '1px solid ' + C.warmLine,
      }}>
        <div>
          <h3 className="serif" style={{ fontSize: 38, fontWeight: 700, margin: '0 0 16px', lineHeight: 1.15 }}>
            Schedule a virtual factory tour.
          </h3>
          <p style={{ fontSize: 14, color: C.warm, lineHeight: 1.7, maxWidth: 480, margin: 0 }}>
            45 minutes. Live video. We walk the floor. You ask anything.
            Available Tuesday and Thursday, Beijing time, all major time zones supported.
          </p>
          <p style={{ fontSize: 11, color: C.text, marginTop: 8, letterSpacing: 1.5, textTransform: 'uppercase' }}>
            45 min · live video · Tue/Thu · all time zones
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignSelf: 'center' }}>
          <button style={{
            background: C.amber, color: C.ink, border: 'none', padding: '18px 28px',
            fontSize: 13, letterSpacing: 2, fontWeight: 700,
          }}>
            BOOK A SLOT →
          </button>
          <button style={{
            background: 'transparent', color: C.paper, border: '1px solid ' + C.warm,
            padding: '18px 28px', fontSize: 13, letterSpacing: 2, fontWeight: 500,
          }}>
            EMAIL OUR YONGKANG OFFICE
          </button>
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 28, fontSize: 11, color: C.text, letterSpacing: 1 }}>
        <div>
          <div style={{ marginBottom: 4 }}>QIAO WAI SELECTED · YONGKANG OFFICE · EST. 2024</div>
          <div className="mono" style={{ color: C.warmDark }}>FOB Ningbo · Incoterms 2020 · DHL · FedEx · OOCL</div>
        </div>
        <div className="mono" style={{ color: C.warmDark }}>v2.0 · FACTORY VISIT EDITION</div>
      </div>
    </section>
  );
}

// ─────────────────────────── App
function App() {
  const [interviewOpen, setInterviewOpen] = React.useState(false);
  const [openProdIdx, setOpenProdIdx] = React.useState(null);
  return (
    <div className="frame">
      <div className="scroll">
        <Hero />
        <FeaturedSupplier id="yongkang-hardware" expanded={interviewOpen} toggle={() => setInterviewOpen(v => !v)} />
        <TrustStrip />
        <CatalogTeaser openIdx={openProdIdx} setOpenIdx={setOpenProdIdx} />
        <Warehouse />
        <Outro />
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);