// AboutContact.jsx, About + Contact pages

const About = ({ onNavigate }) => {
 const vp = useViewport();
 return (
  <div>
   <section style={{ padding: vp.isMobile ? "56px var(--pad-x) 40px" : "80px var(--pad-x) 64px", borderBottom: "1px solid var(--color-border)" }}>
    <div style={{ maxWidth: 960, margin: "0 auto" }}>
     <Eyebrow>About JVFood</Eyebrow>
     <h1 style={{ marginTop: 12, fontSize: vp.isMobile ? 34 : 56, lineHeight: 1.1, letterSpacing: "-0.02em", color: "var(--jv-navy-800)" }}>
      Bridging Japan and Vietnam through trusted food trade.
     </h1>
     <p style={{ marginTop: 24, fontSize: vp.isMobile ? 16 : 20, lineHeight: 1.55, color: "var(--color-fg-body)", maxWidth: 720 }}>
      JVFood is a bilingual B2B marketplace operated by Kitamura, built to make the Vietnam ⇄ Japan food trade lane transparent, verifiable, and direct.
     </p>
    </div>
   </section>

   <section style={{ padding: vp.isMobile ? "56px var(--pad-x)" : "80px var(--pad-x)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: vp.isDesktop ? "repeat(3, 1fr)" : "1fr", gap: vp.isMobile ? 32 : 48, borderTop: "1px solid var(--color-border)", paddingTop: 48 }}>
     {[
      { h: "The problem", b: "Cross-border food trade between Vietnam and Japan still runs on opaque intermediaries, relationship-based pricing, and verbal compliance. Buyers can't see the actual factory; suppliers can't reach buyers without a broker." },
      { h: "Our mission", b: "Build the most trusted B2B trade infrastructure connecting food, seafood, and food-manufacturing companies between the two countries, one verified profile, one audited facility, one transparent quote at a time." },
      { h: "Our vision", b: "A cross-border trade ecosystem where Vietnamese and Japanese companies connect directly, safely, and efficiently, without excessive dependence on opaque intermediaries." },
     ].map(b => (
      <div key={b.h}>
       <h3 style={{ fontSize: 20, fontWeight: 600, color: "var(--jv-navy-800)", marginBottom: 12 }}>{b.h}</h3>
       <p style={{ fontSize: 15, lineHeight: 1.65, color: "var(--color-fg-body)" }}>{b.b}</p>
      </div>
     ))}
    </div>
   </section>

   <section style={{ padding: vp.isMobile ? "56px var(--pad-x)" : "80px var(--pad-x)", background: "var(--color-bg-soft)", borderTop: "1px solid var(--color-border)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
     <div style={{ maxWidth: 760, marginBottom: 48 }}>
      <Eyebrow>Operators</Eyebrow>
      <h2 style={{ marginTop: 12, fontSize: vp.isMobile ? 24 : 32, lineHeight: 1.2, letterSpacing: "-0.015em", color: "var(--jv-navy-800)" }}>Operated by the Kitamura group, Kyoto and Ho Chi Minh City.</h2>
      <p style={{ marginTop: 14, fontSize: 15, lineHeight: 1.6, color: "var(--color-fg-body)" }}>
       The group's Vietnam work began in 2008 when the founders visited the Mekong Delta in search of aquaculture feed. KITAMURA VIETNAM was incorporated in 2022 to formalize that work alongside the Kyoto parent.
      </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. Also runs 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. 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>
    </div>
   </section>

   <section style={{ padding: vp.isMobile ? "56px var(--pad-x)" : "80px var(--pad-x)", borderTop: "1px solid var(--color-border)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
     <div style={{ maxWidth: 720, marginBottom: 32 }}>
      <Eyebrow>Legal partner</Eyebrow>
      <h2 style={{ marginTop: 12, fontSize: vp.isMobile ? 22 : 28, lineHeight: 1.25, letterSpacing: "-0.015em", color: "var(--jv-navy-800)" }}>
       SBLAW handles the Vietnam legal layer.
      </h2>
     </div>

     <div style={{ display: "grid", gridTemplateColumns: vp.isDesktop ? "1.2fr 1fr" : "1fr", gap: vp.isMobile ? 16 : 32, alignItems: "stretch" }}>
      <div style={{ border: "1px solid var(--color-border)", borderRadius: 10, padding: vp.isMobile ? 22 : 28, background: "#fff" }}>
       <p style={{ fontSize: 15, lineHeight: 1.65, color: "var(--color-fg-body)" }}>
        SBLAW is the Vietnamese business law firm partnered with the Kitamura group. They cover the Vietnam side of every JVFood transaction: contract drafting, foreign-investment licensing, customs compliance, IP protection, and dispute resolution.
       </p>
       <p style={{ marginTop: 12, fontSize: 14, lineHeight: 1.65, color: "var(--color-fg-muted)" }}>
        ~40 lawyers and legal professionals across offices in Hanoi and Ho Chi Minh City.
       </p>
       <div style={{ marginTop: 20 }}>
        <a href="https://sblaw.vn/vietnam-business-law-firm/" target="_blank" rel="noopener" style={{ textDecoration: "none" }}>
         <Button variant="secondary" trailing="arrow-right">Visit sblaw.vn</Button>
        </a>
       </div>
      </div>

      <div style={{ border: "1px solid var(--color-border)", borderRadius: 10, padding: vp.isMobile ? 22 : 28, background: "#fff", display: "flex", flexDirection: "column", gap: 18 }}>
       <div>
        <div style={{ fontSize: 11, color: "var(--color-fg-muted)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500, marginBottom: 6 }}>Offices</div>
        <div style={{ fontSize: 13, lineHeight: 1.55, color: "var(--color-fg-body)" }}>
         Kinh Do Building, 292 Tay Son, Dong Da, Hanoi
        </div>
        <div style={{ fontSize: 13, lineHeight: 1.55, color: "var(--color-fg-body)", marginTop: 2 }}>
         PDD Building, 162 Pasteur Street, District 1, HCMC
        </div>
       </div>
       <div style={{ borderTop: "1px solid var(--color-divider)", paddingTop: 16, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <div>
         <div style={{ fontSize: 11, color: "var(--color-fg-muted)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500 }}>Hotline</div>
         <Mono style={{ fontSize: 14, color: "var(--jv-navy-800)", display: "block", marginTop: 4 }}>+84 904 340 664</Mono>
        </div>
        <div>
         <div style={{ fontSize: 11, color: "var(--color-fg-muted)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500 }}>Email</div>
         <a href="mailto:ha.nguyen@sblaw.vn" style={{ display: "block", marginTop: 4, fontSize: 13, color: "var(--jv-navy-800)", textDecoration: "none", fontWeight: 500 }}>ha.nguyen@sblaw.vn</a>
        </div>
       </div>
      </div>
     </div>
    </div>
   </section>

   <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>Timeline</Eyebrow>
      <h2 style={{ marginTop: 12, fontSize: vp.isMobile ? 24 : 32, lineHeight: 1.2, letterSpacing: "-0.015em", color: "var(--jv-navy-800)" }}>From a Mekong Delta visit to a bilingual marketplace.</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)", paddingTop: vp.isMobile ? 0 : 32 }}>
      {[
       { y: "2008", h: "First Vietnam trip", b: "Kitamura founders visit the Mekong Delta sourcing aquaculture feed. The Vietnam business begins here." },
       { y: "2022", h: "KITAMURA VIETNAM est.", b: "Local entity incorporated in Ho Chi Minh City. Certification consulting, licensing, market-entry and trade are formalized as the four business lines." },
       { y: "2024", h: "Verification framework", b: "Standardized KYC + audit protocol formalized across Kyoto and HCMC offices, with SBLAW providing the Vietnam legal layer." },
       { y: "2026", h: "JVFood marketplace launch", b: "Founding-member program opens with 28 verified suppliers across seafood and food manufacturing." },
      ].map(t => (
       <div key={t.y} style={{ paddingRight: vp.isMobile ? 0 : 24, paddingTop: vp.isMobile ? 16 : 0, borderTop: vp.isMobile ? "1px solid var(--color-border)" : 0 }}>
        <Mono style={{ color: "var(--jv-accent-600)", fontSize: 14 }}>{t.y}</Mono>
        <h3 style={{ marginTop: 10, fontSize: 17, fontWeight: 600, color: "var(--jv-navy-800)", lineHeight: 1.35 }}>{t.h}</h3>
        <p style={{ marginTop: 8, fontSize: 13, lineHeight: 1.6, color: "var(--color-fg-body)" }}>{t.b}</p>
       </div>
      ))}
     </div>
    </div>
   </section>
  </div>
 );
};

const Contact = ({ onNavigate }) => {
 const vp = useViewport();
 const [type, setType] = useState("buyer");
 const [sent, setSent] = useState(false);

 return (
  <div>
   <section style={{ padding: vp.isMobile ? "48px var(--pad-x) 0" : "64px var(--pad-x) 0", borderBottom: "1px solid var(--color-border)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
     <Eyebrow>Contact</Eyebrow>
     <h1 style={{ marginTop: 12, fontSize: vp.isMobile ? 30 : 48, lineHeight: 1.15, letterSpacing: "-0.02em", color: "var(--jv-navy-800)" }}>
      Talk to a trade manager.
     </h1>
     <p style={{ marginTop: 16, fontSize: vp.isMobile ? 15 : 17, lineHeight: 1.55, color: "var(--color-fg-body)", maxWidth: 640, marginBottom: 40 }}>
      Whether you're sourcing, selling, or partnering, a senior team member replies within 1 business day in English, Japanese, or Vietnamese.
     </p>
    </div>
   </section>

   <div style={{ maxWidth: 1280, margin: "0 auto", padding: vp.isMobile ? "40px var(--pad-x)" : "56px var(--pad-x)", display: "grid", gridTemplateColumns: vp.isDesktop ? "1.3fr 1fr" : "1fr", gap: vp.isWide ? 56 : 32, alignItems: "flex-start" }}>
    <section style={{ minWidth: 0 }}>
     {sent ? (
      <div style={{ padding: 32, background: "var(--jv-trust-50)", border: "1px solid var(--jv-trust-100)", borderRadius: 10 }}>
       <div style={{ width: 48, height: 48, borderRadius: 999, background: "var(--jv-trust-100)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>
        <Icon name="check" size={24} color="var(--jv-trust-600)"/>
       </div>
       <h2 style={{ fontSize: 22, color: "var(--jv-navy-800)" }}>Message received.</h2>
       <p style={{ marginTop: 8, fontSize: 14, color: "var(--color-fg-body)" }}>A senior trade manager will reply within 1 business day.</p>
      </div>
     ) : (
      <form onSubmit={e => { e.preventDefault(); setSent(true); }} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
       <Field label="Inquiry type">
        <Select value={type} onChange={e => setType(e.target.value)}>
         <option value="buyer">Buyer, sourcing</option>
         <option value="supplier">Supplier, listing</option>
         <option value="trading">Trading company</option>
         <option value="partnership">Partnership</option>
         <option value="government">Government agency</option>
         <option value="other">Other</option>
        </Select>
       </Field>

       <div style={{ display: "grid", gridTemplateColumns: vp.isMobile ? "1fr" : "1fr 1fr", gap: 12 }}>
        <Field label="Company"><Input placeholder="Company name"/></Field>
        <Field label="Your name"><Input placeholder="Full name"/></Field>
       </div>

       <div style={{ display: "grid", gridTemplateColumns: vp.isMobile ? "1fr" : "1fr 1fr", gap: 12 }}>
        <Field label="Country">
         <Select defaultValue="jp"><option value="jp">Japan</option><option value="vn">Vietnam</option><option value="other">Other</option></Select>
        </Field>
        <Field label="Email"><Input type="email" placeholder="you@company.com"/></Field>
       </div>

       <Field label="Message" help="Plain prose in EN, JA, or VN.">
        <Textarea placeholder="Tell us what you're working on. Volume, certifications, timeline." style={{ minHeight: 140 }}/>
       </Field>

       <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
        <Button type="submit" variant="primary" size="lg">Send message</Button>
        <span style={{ fontSize: 12, color: "var(--color-fg-muted)" }}>Replies within 1 business day.</span>
       </div>
      </form>
     )}
    </section>

    <aside style={{ display: "flex", flexDirection: "column", gap: 16, minWidth: 0 }}>
     {[
      { flag: "jp", h: "Kitamura Japan", ja: "キタムラジャパン", addr1: "3-12-6 Marunouchi", addr2: "Chiyoda-ku, Tokyo 100-0005", phone: "+81 3-XXXX-XXXX", email: "japan@jvfood.com" },
      { flag: "vn", h: "Kitamura Vietnam", ja: "キタムラベトナム", addr1: "Saigon Centre, Tower 2", addr2: "67 Le Loi, District 1, HCMC", phone: "+84 28-XXXX-XXXX", email: "vietnam@jvfood.com" },
     ].map(o => (
      <div key={o.h} style={{ border: "1px solid var(--color-border)", borderRadius: 10, padding: 20, display: "flex", gap: 16 }}>
       <img src={`assets/flag-${o.flag}.svg`} width="32" height="22" style={{ flexShrink: 0 }}/>
       <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 16, fontWeight: 600, color: "var(--jv-navy-800)" }}>{o.h}</div>
        <div style={{ marginTop: 12, fontSize: 13, color: "var(--color-fg-body)", lineHeight: 1.6 }}>
         <div>{o.addr1}</div>
         <div>{o.addr2}</div>
         <div style={{ marginTop: 8, color: "var(--color-fg-muted)" }}><Mono>{o.phone}</Mono></div>
         <div><a href={`mailto:${o.email}`} style={{ color: "var(--jv-navy-800)", borderBottom: "1px solid var(--color-border)", wordBreak: "break-all" }}>{o.email}</a></div>
        </div>
       </div>
      </div>
     ))}

     <div style={{ background: "var(--jv-sand-100)", border: "1px solid var(--jv-sand-200)", borderRadius: 10, padding: 20 }}>
      <Eyebrow>Press & media</Eyebrow>
      <div style={{ marginTop: 8, fontSize: 14, color: "var(--color-fg-body)" }}>
       For interviews, photography requests, or industry briefings:
      </div>
      <a href="mailto:press@jvfood.com" style={{ display: "inline-block", marginTop: 8, color: "var(--jv-navy-800)", fontSize: 14, borderBottom: "1px solid var(--color-border)" }}>press@jvfood.com</a>
     </div>
    </aside>
   </div>
  </div>
 );
};

Object.assign(window, { About, Contact });
