// TradingSupport.jsx, Problem → solution → proof. Company info last.

const TradingSupport = ({ onNavigate, onRFQ }) => {
 const vp = useViewport();
 return (
  <div>
   {/* HERO */}
   <section style={{ background: "var(--jv-sand-100)", borderBottom: "1px solid var(--color-border)", padding: vp.isMobile ? "48px var(--pad-x)" : "72px var(--pad-x)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: vp.isDesktop ? "1.25fr 1fr" : "1fr", gap: vp.isWide ? 56 : 32, alignItems: "center" }}>
     <div>
      <Eyebrow>Trading support</Eyebrow>
      <h1 style={{ marginTop: 12, fontSize: vp.isMobile ? 32 : (vp.isTablet ? 40 : 52), lineHeight: 1.08, letterSpacing: "-0.02em", color: "var(--jv-navy-800)" }}>
       Trade between Vietnam and Japan without operating a trading desk.
      </h1>
      <p style={{ marginTop: 20, fontSize: vp.isMobile ? 16 : 19, lineHeight: 1.55, color: "var(--color-fg-body)", maxWidth: 600 }}>
       Sourcing across the corridor is slow, opaque, and risky, language gaps, unverifiable factories, paperwork that never quite matches the shipment. We handle the lane end-to-end so you only see the parts that matter: a verified supplier, a clean document set, goods landing on time.
      </p>
      <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
       <Button variant="primary" size={vp.isMobile ? "md" : "lg"}>Request consultation</Button>
       <Button variant="secondary" size={vp.isMobile ? "md" : "lg"} trailing="arrow-down">See how it works</Button>
      </div>
      <div style={{ display: "flex", gap: 28, marginTop: 36, fontSize: 12, color: "var(--color-fg-muted)", flexWrap: "wrap" }}>
       <div><Mono style={{ color: "var(--jv-navy-800)", fontSize: 18 }}>21 days</Mono><div style={{ marginTop: 2 }}>Avg. brief → shipment</div></div>
       <div><Mono style={{ color: "var(--jv-navy-800)", fontSize: 18 }}>97 %</Mono><div style={{ marginTop: 2 }}>On-time delivery</div></div>
       <div><Mono style={{ color: "var(--jv-navy-800)", fontSize: 18 }}>0</Mono><div style={{ marginTop: 2 }}>Hidden markup</div></div>
      </div>
     </div>
     <div style={{ aspectRatio: vp.isMobile ? "4 / 3" : "4 / 5", borderRadius: 10, overflow: "hidden", border: "1px solid var(--color-border)", background: "#fff" }}>
      <img src="https://images.unsplash.com/photo-1605745341112-85968b19335b?auto=format&fit=crop&w=900&q=70" alt="Container port" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
     </div>
    </div>
   </section>

   {/* PROBLEM → SOLUTION */}
   <section style={{ padding: vp.isMobile ? "64px var(--pad-x)" : "96px var(--pad-x)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
     <div style={{ maxWidth: 720, marginBottom: vp.isMobile ? 36 : 56 }}>
      <Eyebrow>Why a trade partner</Eyebrow>
      <h2 style={{ marginTop: 12, fontSize: vp.isMobile ? 26 : 36, lineHeight: 1.2, letterSpacing: "-0.015em", color: "var(--jv-navy-800)" }}>The corridor breaks in five predictable places. We close each one.</h2>
     </div>
     <div style={{ display: "grid", gridTemplateColumns: vp.isMobile ? "1fr" : "1fr 1fr", gap: 0, border: "1px solid var(--color-border)", borderRadius: 10, overflow: "hidden", background: "#fff" }}>
      <div style={{ padding: "20px 28px", background: "var(--color-bg-soft)", borderRight: vp.isMobile ? 0 : "1px solid var(--color-border)", borderBottom: "1px solid var(--color-border)", display: "flex", alignItems: "center", gap: 10 }}>
       <Icon name="alert-triangle" size={18} color="var(--jv-warn-600)"/>
       <div style={{ fontSize: 13, fontWeight: 600, color: "var(--jv-navy-800)", letterSpacing: "0.04em", textTransform: "uppercase" }}>Without a partner</div>
      </div>
      <div style={{ padding: "20px 28px", background: "var(--color-bg-soft)", borderBottom: "1px solid var(--color-border)", display: "flex", alignItems: "center", gap: 10 }}>
       <Icon name="shield-check" size={18} color="var(--jv-trust-600)"/>
       <div style={{ fontSize: 13, fontWeight: 600, color: "var(--jv-navy-800)", letterSpacing: "0.04em", textTransform: "uppercase" }}>With JVFood trading support</div>
      </div>
      {[
       {
        p: "Suppliers are vouched for by a broker, you never see the factory, the audit report, or the actual processing line.",
        s: "Every supplier is KYC'd and audited on-site by our Vietnam team before you talk to them. You get the audit dossier with the quote.",
       },
       {
        p: "Quotes mix supplier price, broker markup, and freight into one number. You have no idea what the goods actually cost.",
        s: "Supplier FOB and our commission appear as separate line items on every quote. No hidden markup, ever.",
       },
       {
        p: "Negotiation runs through translated email chains. Spec details and payment terms get lost between languages.",
        s: "Bilingual trade managers (EN / JA / VN) negotiate on your behalf, in-language, both sides of the call.",
       },
       {
        p: "Documents arrive late, partial, or mis-classified, and you find out at customs, not before.",
        s: "Commercial invoice, B/L, phyto, health, CO, JAS / FDA filings consolidated into one document set before the container ships.",
       },
       {
        p: "When a shipment goes wrong, you're chasing a freight forwarder in a foreign time zone with no leverage.",
        s: "One named trade manager owns the shipment end-to-end. Issues get resolved in the same business day, in your language.",
       },
      ].map((row, i, arr) => (
       <React.Fragment key={i}>
        <div style={{ padding: vp.isMobile ? 20 : 28, borderRight: vp.isMobile ? 0 : "1px solid var(--color-border)", borderBottom: "1px solid var(--color-divider)", fontSize: 15, lineHeight: 1.6, color: "var(--color-fg-body)" }}>
         {row.p}
        </div>
        <div style={{ padding: vp.isMobile ? 20 : 28, borderBottom: i < arr.length - 1 ? "1px solid var(--color-divider)" : 0, fontSize: 15, lineHeight: 1.6, color: "var(--color-fg)" }}>
         {row.s}
        </div>
       </React.Fragment>
      ))}
     </div>
    </div>
   </section>

   {/* WHAT YOU GET */}
   <section style={{ padding: vp.isMobile ? "64px var(--pad-x)" : "96px var(--pad-x)", borderTop: "1px solid var(--color-border)", background: "var(--color-bg-soft)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
     <div style={{ maxWidth: 720, marginBottom: 48 }}>
      <Eyebrow>What you get</Eyebrow>
      <h2 style={{ marginTop: 12, fontSize: vp.isMobile ? 26 : 36, lineHeight: 1.2, letterSpacing: "-0.015em", color: "var(--jv-navy-800)" }}>End-to-end coverage on both sides of the lane.</h2>
      <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.6, color: "var(--color-fg-body)" }}>
       One brief in. One landed shipment out. Everything in between is handled by trade managers who do this every week.
      </p>
     </div>
     <div style={{ display: "grid", gridTemplateColumns: vp.isDesktop ? "repeat(3, 1fr)" : (vp.isMobile ? "1fr" : "repeat(2, 1fr)"), gap: 16 }}>
      {[
       { icon: "search", h: "Verified sourcing", b: "3 shortlisted suppliers within 5 business days, matched to your spec, MOQ, and certification requirements. All audited." },
       { icon: "file-check", h: "In-language negotiation", b: "Bilingual negotiation on price, MOQ, lead time, packaging, payment. Quotes reconciled against current FOB benchmarks." },
       { icon: "shield-check", h: "Quality verification", b: "Third-party pre-shipment inspection and lab testing where required. Full audit trail captured against your spec sheet." },
       { icon: "package", h: "One clean document set", b: "Commercial invoice, packing list, B/L, phyto, health, CO, JAS, FDA, consolidated and reviewed before the container moves." },
       { icon: "anchor", h: "Logistics coordination", b: "Freight booking, cold-chain monitoring, container tracking, demurrage management, direct with 3PLs and shipping lines." },
       { icon: "globe", h: "Customs & JFTA", b: "Clearance on both sides. Duty calculation, JFTA preference, tariff classification advisory, handled, not advised." },
      ].map(s => (
       <div key={s.h} style={{ border: "1px solid var(--color-border)", borderRadius: 6, padding: 24, background: "#fff" }}>
        <div style={{ width: 40, height: 40, borderRadius: 6, background: "var(--jv-navy-50)", color: "var(--jv-navy-800)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>
         <Icon name={s.icon} size={20}/>
        </div>
        <h3 style={{ fontSize: 17, fontWeight: 600, color: "var(--jv-navy-800)", marginBottom: 8 }}>{s.h}</h3>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--color-fg-body)" }}>{s.b}</p>
       </div>
      ))}
     </div>
    </div>
   </section>

   {/* HOW IT WORKS */}
   <section style={{ padding: vp.isMobile ? "64px var(--pad-x)" : "96px var(--pad-x)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
     <div style={{ maxWidth: 720, marginBottom: 48 }}>
      <Eyebrow>How it works</Eyebrow>
      <h2 style={{ marginTop: 12, fontSize: vp.isMobile ? 26 : 36, lineHeight: 1.2, letterSpacing: "-0.015em", color: "var(--jv-navy-800)" }}>From brief to delivery in four steps.</h2>
     </div>
     <div style={{ display: "grid", gridTemplateColumns: vp.isDesktop ? "repeat(4, 1fr)" : (vp.isMobile ? "1fr" : "repeat(2, 1fr)"), gap: vp.isMobile ? 24 : 0, borderTop: vp.isMobile ? 0 : "1px solid var(--color-border)" }}>
      {[
       { n: "01", h: "Brief", b: "30-minute call to capture spec, volume, target price, delivery window, certification needs." },
       { n: "02", h: "Shortlist", b: "3 candidate suppliers presented with audit reports, sample availability, and indicative pricing." },
       { n: "03", h: "Trade desk", b: "Negotiation, contract, inspection, and freight booking handled on your behalf, by one named manager." },
       { n: "04", h: "Delivery", b: "Goods land at your nominated port. We hand over the full document set and quality dossier." },
      ].map((s, i, arr) => (
       <div key={s.n} style={{ paddingTop: vp.isMobile ? 0 : 24, paddingRight: vp.isDesktop ? 20 : 0, borderRight: vp.isDesktop && i < arr.length - 1 ? "1px solid var(--color-border)" : 0, borderTop: vp.isMobile ? "1px solid var(--color-border)" : 0, paddingBlock: vp.isMobile ? 16 : 0 }}>
        <Mono style={{ color: "var(--jv-accent-600)", fontSize: 13 }}>{s.n}</Mono>
        <h3 style={{ fontSize: 20, fontWeight: 600, color: "var(--jv-navy-800)", marginTop: 12, marginBottom: 12 }}>{s.h}</h3>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--color-fg-body)" }}>{s.b}</p>
       </div>
      ))}
     </div>
    </div>
   </section>

   {/* PRICING */}
   <section style={{ padding: vp.isMobile ? "64px var(--pad-x)" : "96px var(--pad-x)", borderTop: "1px solid var(--color-border)", background: "var(--color-bg-soft)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: vp.isDesktop ? "1.2fr 1fr" : "1fr", gap: vp.isWide ? 56 : 32, alignItems: "flex-start" }}>
     <div>
      <Eyebrow>Pricing</Eyebrow>
      <h2 style={{ marginTop: 12, fontSize: vp.isMobile ? 26 : 32, lineHeight: 1.2, letterSpacing: "-0.015em", color: "var(--jv-navy-800)" }}>Transparent commission. No hidden markup.</h2>
      <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.6, color: "var(--color-fg-body)", maxWidth: 560 }}>
       A flat trading commission on the landed value of the shipment. You see the supplier's quoted FOB and our commission as separate line items, never bundled.
      </p>
      <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: vp.isMobile ? "1fr" : "repeat(3, 1fr)", gap: 12 }}>
       {[
        { tier: "Standard", fee: "3.5 %", scope: "Volume < USD 250 k / shipment" },
        { tier: "Volume", fee: "2.8 %", scope: "Volume ≥ USD 250 k / shipment" },
        { tier: "Recurring", fee: "2.2 %", scope: "≥ 6 shipments / year, same lane" },
       ].map(t => (
        <div key={t.tier} style={{ border: "1px solid var(--color-border)", borderRadius: 6, padding: 18, background: "#fff" }}>
         <div style={{ fontSize: 12, color: "var(--color-fg-muted)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500 }}>{t.tier}</div>
         <Mono style={{ fontSize: 28, color: "var(--jv-navy-800)", display: "block", marginTop: 8 }}>{t.fee}</Mono>
         <div style={{ fontSize: 12, color: "var(--color-fg-muted)", marginTop: 6, lineHeight: 1.5 }}>{t.scope}</div>
        </div>
       ))}
      </div>
     </div>
     <div style={{ background: "var(--jv-navy-900)", color: "var(--color-fg-on-inverse)", borderRadius: 10, padding: vp.isMobile ? 24 : 32 }}>
      <Eyebrow style={{ color: "var(--color-fg-on-inverse-muted)" }}>Request consultation</Eyebrow>
      <h3 style={{ marginTop: 12, fontSize: 22, color: "#fff", lineHeight: 1.3 }}>Tell us your sourcing problem.</h3>
      <p style={{ marginTop: 12, fontSize: 14, lineHeight: 1.6, color: "var(--color-fg-on-inverse-muted)" }}>
       A senior trade manager replies within 1 business day. No obligation, no NDA needed for an initial call.
      </p>
      <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 20 }}>
       <input placeholder="Company" style={inverseInputStyle}/>
       <input placeholder="Email" style={inverseInputStyle}/>
       <textarea placeholder="What are you sourcing? Volume, destination, timeline." rows="4" style={{ ...inverseInputStyle, fontFamily: "var(--font-sans)", resize: "vertical" }}/>
       <Button variant="primary" size="lg">Request consultation</Button>
      </div>
     </div>
    </div>
   </section>

   {/* OPERATED BY */}
   <section style={{ padding: vp.isMobile ? "64px var(--pad-x)" : "96px var(--pad-x)", borderTop: "1px solid var(--color-border)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
     <div style={{ maxWidth: 760, marginBottom: 48 }}>
      <Eyebrow>Who runs this</Eyebrow>
      <h2 style={{ marginTop: 12, fontSize: vp.isMobile ? 24 : 32, lineHeight: 1.2, letterSpacing: "-0.015em", color: "var(--jv-navy-800)" }}>
       Trading support is operated by Kitamura, Kyoto and Ho Chi Minh City.
      </h2>
      <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.6, color: "var(--color-fg-body)" }}>
       The Kitamura group's Vietnam work began in 2008, when the founders travelled to the Mekong Delta in search of aquaculture feed. Today the group runs four Vietnam business lines, Japanese-certification consulting, business-license support, market-entry support, and trade, out of a Ho Chi Minh City office, partnered with the Kyoto parent company.
      </p>
     </div>

     <div style={{ display: "grid", gridTemplateColumns: vp.isMobile ? "1fr" : "1fr 1fr", gap: 24 }}>
      {[
       {
        flag: "vn",
        h: "KITAMURA VIETNAM CO., LTD.",
        ja: "キタムラベトナム",
        addr: "6F Sunwah Innovation Center, 90 Nguyen Huu Canh St., Binh Thanh District, HCMC",
        reps: "Tran My Linh · Aoki Ryusuke",
        role: "Supplier verification, factory audits, Japanese-certification consulting, and trade operations on the Vietnam side of every shipment. The team also handles license, accounting, and market-entry support for Japanese companies operating locally.",
        stats: [["2022", "Established (Jun.)"], ["2008", "VN presence since"], ["4", "Business lines"]],
       },
       {
        flag: "jp",
        h: "Kabushiki Kaisha Kitamura",
        ja: "株式会社 北村",
        addr: "Kyoto, Japan · group parent company",
        reps: "Group affiliate",
        role: "Japan-side counterpart to Kitamura Vietnam. Handles buyer relationships, contract administration, and the Japanese end of every cross-border shipment, drawing on the Kyoto parent's established trading network.",
        stats: [["Kyoto", "Head office"], ["Group", "Parent entity"], ["JP ⇄ VN", "Lane focus"]],
       },
      ].map(o => (
       <div key={o.h} style={{ background: "#fff", border: "1px solid var(--color-border)", borderRadius: 10, padding: vp.isMobile ? 22 : 28 }}>
        <div style={{ display: "flex", alignItems: "flex-start", gap: 12, marginBottom: 16 }}>
         <img src={`assets/flag-${o.flag}.svg`} width="28" height="20" style={{ marginTop: 4, flexShrink: 0 }}/>
         <div style={{ minWidth: 0 }}>
          <h3 style={{ fontSize: vp.isMobile ? 17 : 20, color: "var(--jv-navy-800)", fontWeight: 600, letterSpacing: "-0.005em" }}>{o.h}</h3>
          <div style={{ fontSize: 12, color: "var(--color-fg-muted)", marginTop: 6, lineHeight: 1.5 }}>{o.addr}</div>
          <div style={{ fontSize: 12, color: "var(--color-fg-muted)", marginTop: 2 }}>Representatives: {o.reps}</div>
         </div>
        </div>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--color-fg-body)" }}>{o.role}</p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--color-divider)" }}>
         {o.stats.map(s => (
          <div key={s[1]}>
           <Mono style={{ fontSize: 18, color: "var(--jv-navy-800)" }}>{s[0]}</Mono>
           <div style={{ fontSize: 11, color: "var(--color-fg-muted)", letterSpacing: "0.04em", textTransform: "uppercase", fontWeight: 500, marginTop: 4 }}>{s[1]}</div>
          </div>
         ))}
        </div>
       </div>
      ))}
     </div>

     {/* Group philosophy + contacts */}
     <div style={{ marginTop: 24, padding: vp.isMobile ? "24px 22px" : "28px 32px", background: "var(--jv-navy-900)", color: "var(--color-fg-on-inverse)", borderRadius: 10, display: "grid", gridTemplateColumns: vp.isDesktop ? "1.3fr 1fr 1fr" : "1fr", gap: vp.isMobile ? 24 : 32, alignItems: "flex-start" }}>
      <div>
       <Eyebrow style={{ color: "var(--color-fg-on-inverse-muted)" }}>Company philosophy</Eyebrow>
       <div style={{ fontFamily: "var(--font-serif-jp, var(--font-sans))", fontSize: 22, color: "#fff", marginTop: 8, letterSpacing: "-0.005em", lineHeight: 1.25 }}>With sparkling eyes.</div>
       <div style={{ marginTop: 10, fontSize: 13, lineHeight: 1.55, color: "var(--color-fg-on-inverse-muted)", maxWidth: 360 }}>
        Approach the work, your colleagues, and the customer with the same clarity of attention.
       </div>
      </div>
      <div>
       <Eyebrow style={{ color: "var(--color-fg-on-inverse-muted)" }}>Vietnam hotline</Eyebrow>
       <Mono style={{ fontSize: 15, color: "#fff", display: "block", marginTop: 8 }}>+84 916 869 066</Mono>
       <div style={{ fontSize: 12, color: "var(--color-fg-on-inverse-muted)", marginTop: 4 }}>Office · +84 28 7307 7880</div>
       <div style={{ fontSize: 12, color: "var(--color-fg-on-inverse-muted)", marginTop: 2 }}>kv@kitamuravn.com</div>
      </div>
      <div>
       <Eyebrow style={{ color: "var(--color-fg-on-inverse-muted)" }}>Japan hotline</Eyebrow>
       <Mono style={{ fontSize: 15, color: "#fff", display: "block", marginTop: 8 }}>+81 90 1222 5469</Mono>
       <div style={{ fontSize: 12, color: "var(--color-fg-on-inverse-muted)", marginTop: 4 }}>Japanese-language line</div>
       <div style={{ fontSize: 12, color: "var(--color-fg-on-inverse-muted)", marginTop: 2 }}>Group affiliate, Kyoto</div>
      </div>
     </div>

     {/* Affiliated entities */}
     <div style={{ marginTop: 24, border: "1px solid var(--color-border)", borderRadius: 10, padding: vp.isMobile ? "20px 22px" : "20px 28px", background: "var(--color-bg-soft)", display: "grid", gridTemplateColumns: vp.isDesktop ? "auto 1fr auto" : "1fr", gap: vp.isMobile ? 16 : 24, alignItems: "center" }}>
      <div style={{ fontSize: 12, color: "var(--color-fg-muted)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500 }}>Affiliated entities</div>
      <div style={{ fontSize: 14, color: "var(--color-fg-body)", lineHeight: 1.55 }}>
       <strong style={{ color: "var(--jv-navy-800)" }}>株式会社 北村</strong> (Kabushiki Kaisha Kitamura, Kyoto), group parent.
       <span style={{ color: "var(--color-fg-muted)" }}>　·　</span>
       <strong style={{ color: "var(--jv-navy-800)" }}>SB LAW</strong> (Hanoi · Ho Chi Minh), legal partner for Vietnam licensing and compliance work.
       <span style={{ color: "var(--color-fg-muted)" }}>　·　</span>
       <strong style={{ color: "var(--jv-navy-800)" }}>Vietcombank</strong>, banking partner.
      </div>
      <a href="https://kitamuravn.com/company/" target="_blank" rel="noopener" style={{ fontSize: 13, color: "var(--jv-navy-700)", fontWeight: 500, textDecoration: "none" }}>kitamuravn.com ↗</a>
     </div>

     <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
      <Button variant="secondary" trailing="arrow-right" onClick={() => onNavigate("about")}>More about Kitamura</Button>
      <Button variant="ghost" trailing="arrow-right" onClick={() => onNavigate("contact")}>Contact a trade manager</Button>
     </div>
    </div>
   </section>
  </div>
 );
};

const inverseInputStyle = {
 background: "rgba(255,255,255,0.06)",
 border: "1px solid rgba(255,255,255,0.18)",
 color: "#fff",
 padding: "10px 12px",
 borderRadius: 6,
 fontSize: 14,
 fontFamily: "var(--font-sans)",
 outline: "none",
 width: "100%",
 boxSizing: "border-box",
};

Object.assign(window, { TradingSupport });
