// Direction B — "AEVUM · The Korean Distributor"
// Inspired structurally by aesthetic-medical-distributor sites:
// featured-product hero rotator, soft-products row, devices row,
// achievements stripe, services grid, partner logos, testimonials.
// Original visual language: warm off-white + ink-black + muted gold.

const themeB = {
  bg: '#F4F8FB', // cool off-white, blue-tinted
  panel: '#E7EEF4',
  ink: '#11202E', // deep navy-near-black
  body: '#3A4A58',
  muted: '#7A8896',
  line: 'rgba(17,32,46,0.10)',
  lineSoft: 'rgba(17,32,46,0.05)',
  accent: '#5B8FB9', // medical sky blue
  accentSoft: 'rgba(91,143,185,0.10)',
  dark: '#11202E',
  darkPanel: '#1A2A3A'
};

// ───── NAV ─────────────────────────────────────────────────────────────────
function NavB({ active, onNav, theme }) {
  const links = [
  { id: 'home', label: 'Home' },
  { id: 'product', label: 'Products' },
  { id: 'process', label: 'Process' },
  { id: 'request', label: 'Request' }];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 30,
      background: 'rgba(244,248,251,0.85)',
      backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
      borderBottom: `1px solid ${theme.line}`
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '18px 40px' }}>
        <div onClick={() => onNav('home')} className="ae-sans" style={{
          cursor: 'pointer', display: 'flex', alignItems: 'baseline', gap: 10
        }}>
          <span className="ae-serif" style={{
            fontSize: 24, fontWeight: 500, letterSpacing: '.18em', color: theme.ink
          }}>AEVUM</span>
          <span className="ae-mono" style={{
            fontSize: 9, letterSpacing: '.22em', color: theme.muted, textTransform: 'uppercase'
          }}>K-Beauty · Wholesale</span>
        </div>
        <nav style={{ display: 'flex', gap: 36 }}>
          {links.map((l) =>
          <button key={l.id} onClick={() => onNav(l.id)} className="ae-sans" style={{
            appearance: 'none', border: 0, background: 'transparent', cursor: 'pointer',
            fontSize: 13, color: active === l.id ? theme.ink : theme.body,
            fontWeight: active === l.id ? 500 : 400,
            borderBottom: active === l.id ? `1.5px solid ${theme.accent}` : '1.5px solid transparent',
            paddingBottom: 3
          }}>{l.label}</button>
          )}
        </nav>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <span className="ae-mono" style={{ fontSize: 10, color: theme.muted, letterSpacing: '.14em' }}>EN / KO</span>
          <button onClick={() => onNav('request')} className="ae-sans" style={{
            appearance: 'none', border: 0, background: theme.ink, color: theme.bg,
            padding: '10px 18px', fontSize: 12, fontWeight: 500, letterSpacing: '.04em',
            textTransform: 'uppercase', cursor: 'pointer'
          }}>Request a Quote</button>
        </div>
      </div>
    </header>);

}

// ───── HERO ROTATOR ────────────────────────────────────────────────────────
function HeroRotatorB({ theme, onNav, heroVariant }) {
  const [idx, setIdx] = useState(0);
  const featured = AEVUM_FEATURED;
  useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % featured.length), 1300);
    return () => clearInterval(t);
  }, [featured.length]);

  const f = featured[idx];

  return (
    <section className="ae-hero" style={{ position: 'relative', background: f.swatch,
      transition: 'background 800ms ease', height: 580, overflow: 'hidden' }}>
      {/* Slow radial wash */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at 75% 50%, rgba(255,255,255,0.06) 0%, transparent 60%),
                    radial-gradient(ellipse at 20% 90%, ${f.accent}22 0%, transparent 50%)`
      }} />

      {/* Faint grid */}
      <div style={{
        position: 'absolute', inset: 0, opacity: .06,
        backgroundImage: `linear-gradient(${f.accent} 1px, transparent 1px),
                          linear-gradient(90deg, ${f.accent} 1px, transparent 1px)`,
        backgroundSize: '80px 80px'
      }} />

      <div className="ae-hero-grid" style={{
        position: 'relative', height: '100%', display: 'grid',
        gridTemplateColumns: '1.1fr 1fr', gap: 40, alignItems: 'center',
        padding: '0 64px', color: '#fff'
      }}>
        <div>
          <div className="ae-mono" style={{
            fontSize: 11, letterSpacing: '.22em', color: f.accent,
            textTransform: 'uppercase', marginBottom: 24
          }}>{f.badge}</div>

          <h1 className="ae-serif" style={{
            fontSize: 88, fontWeight: 300, lineHeight: .98, letterSpacing: '-0.02em',
            margin: '0 0 22px', color: '#fff'
          }}>{f.name}</h1>

          <p className="ae-sans" style={{
            fontSize: 18, lineHeight: 1.5, color: 'rgba(255,255,255,.78)',
            maxWidth: 480, margin: '0 0 32px', fontWeight: 300
          }}>{f.tagline}</p>

          <div style={{ display: 'flex', gap: 14 }}>
            <button onClick={() => onNav('product')} className="ae-sans" style={{
              appearance: 'none', border: 0, background: '#fff', color: f.swatch,
              padding: '14px 22px', fontSize: 12, fontWeight: 600, letterSpacing: '.1em',
              textTransform: 'uppercase', cursor: 'pointer'
            }}>Read more</button>
            <button onClick={() => onNav('request')} className="ae-sans" style={{
              appearance: 'none', border: '1px solid rgba(255,255,255,.4)', background: 'transparent',
              color: '#fff', padding: '14px 22px', fontSize: 12, fontWeight: 500, letterSpacing: '.1em',
              textTransform: 'uppercase', cursor: 'pointer'
            }}>Book a demo</button>
          </div>
        </div>

        <div className="ae-hero-stage" style={{ position: 'relative', height: '78%',
          display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {/* Soft blue glow halo behind box */}
          <div style={{
            position: 'absolute', inset: '4%',
            background: `radial-gradient(ellipse at center, ${f.accent}33 0%, transparent 65%)`,
            filter: 'blur(40px)', pointerEvents: 'none'
          }} />
          <div className="ae-hero-card" style={{
            position: 'relative',
            height: '100%', aspectRatio: '1 / 1', maxWidth: '88%',
            width: 'auto',
            isolation: 'isolate'
          }}>
            {featured.map((p, i) => (
              <div key={p.id}
                style={{
                  position: 'absolute', inset: 0,
                  borderRadius: 28,
                  overflow: 'hidden',
                  background: 'rgba(255, 255, 255, 0.94)',
                  boxShadow: `0 30px 80px -30px rgba(11, 30, 50, 0.45),
                              0 8px 28px -10px rgba(91, 143, 185, 0.35)`,
                  opacity: i === idx ? 1 : 0,
                  transition: 'opacity 500ms ease',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  padding: 36
                }}>
                <img src={p.img} alt={p.name}
                  style={{
                    maxWidth: '100%', maxHeight: '100%',
                    width: 'auto', height: 'auto',
                    objectFit: 'contain',
                    display: 'block'
                  }} />
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Slide indicator + arrows */}
      <div style={{
        position: 'absolute', bottom: 24, left: 64, right: 64,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: '#fff'
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          {featured.map((_, i) =>
          <button key={i} onClick={() => setIdx(i)} style={{
            appearance: 'none', border: 0, cursor: 'pointer', padding: 0,
            width: i === idx ? 32 : 12, height: 2,
            background: i === idx ? f.accent : 'rgba(255,255,255,.4)',
            transition: 'all 300ms'
          }} />
          )}
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <button onClick={() => setIdx((i) => (i - 1 + featured.length) % featured.length)}
          className="ae-mono" style={navBtn}>← prev</button>
          <button onClick={() => setIdx((i) => (i + 1) % featured.length)}
          className="ae-mono" style={navBtn}>next →</button>
        </div>
      </div>
    </section>);

}
const navBtn = {
  appearance: 'none', border: '1px solid rgba(255,255,255,.3)', background: 'transparent',
  color: '#fff', padding: '7px 12px', fontSize: 10, letterSpacing: '.14em',
  cursor: 'pointer', textTransform: 'uppercase'
};

// ───── PRODUCT LINES (8-card category grid) ────────────────────────────────
function ProductLinesB({ theme, onNav }) {
  const lines = [
  { n: '01', title: 'HIFU Machines', sub: 'Newest 2026 platforms — multi-frequency, face + body.', count: '9 SKUs' },
  { n: '02', title: 'Filler', sub: 'HA-based dermal fillers, lidocaine options, pre-mixed.', count: '22 SKUs' },
  { n: '03', title: 'Skinbooster', sub: 'PN, PDRN, salmon-DNA, multi-vitamin formulations.', count: '18 SKUs' },
  { n: '04', title: 'Body Filler', sub: 'High-volume body contouring, 10mL syringes.', count: '14 SKUs' },
  { n: '05', title: 'Devices', sub: 'Microneedle RF, lasers, cryolipolysis.', count: '12 SKUs' },
  { n: '06', title: 'Consumables', sub: 'Cartridges, gels, single-use applicators.', count: '9 SKUs' },
  { n: '07', title: 'Lab & Safety', sub: 'Certificates, batch reports, customs paperwork.', count: '—' },
  { n: '08', title: 'Private Label', sub: 'Custom packaging from our CGMP partners.', count: 'On request' }];

  return (
    <section style={{ padding: '24px 64px 64px' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 24 }}>
        <div className="ae-mono" style={{
          fontSize: 11, letterSpacing: '.22em', color: theme.muted, textTransform: 'uppercase'
        }}>§ 01 — Product Lines</div>
        <button onClick={() => onNav('product')} className="ae-mono" style={{
          appearance: 'none', border: 0, background: 'transparent', cursor: 'pointer',
          fontSize: 11, letterSpacing: '.18em', color: theme.accent, textTransform: 'uppercase', fontWeight: 600
        }}>View all 84 SKUs →</button>
      </div>
      <h2 className="ae-serif" style={{
        fontSize: 48, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.02em',
        color: theme.ink, margin: '0 0 32px'
      }}>Everything for face &amp; body, in one catalogue.</h2>
      <div className="ae-card-bordered" style={{
        background: '#fff', overflow: 'hidden',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)'
      }}>
        {lines.map((l, i) => {
          const col = i % 4;
          const row = Math.floor(i / 4);
          return (
            <button key={l.n} onClick={() => onNav('product')} style={{
              appearance: 'none', textAlign: 'left', cursor: 'pointer',
              background: '#fff', padding: '24px 22px 22px',
              border: 0,
              borderRight: col < 3 ? `1px solid ${theme.line}` : '0',
              borderTop: row > 0 ? `1px solid ${theme.line}` : '0',
              minHeight: 148, display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
            }}>
              <div>
                <div className="ae-mono" style={{
                  fontSize: 10, letterSpacing: '.18em', color: theme.muted, marginBottom: 14
                }}>{l.n}</div>
                <div style={{
                  fontSize: 22, fontWeight: 600, color: theme.ink, letterSpacing: '-0.01em',
                  marginBottom: 8, lineHeight: 1.15
                }}>{l.title}</div>
                <div style={{
                  fontSize: 13, color: theme.body, lineHeight: 1.5, fontWeight: 400
                }}>{l.sub}</div>
              </div>
              <div className="ae-mono" style={{
                fontSize: 11, letterSpacing: '.14em', color: theme.accent, marginTop: 18,
                textTransform: 'uppercase', fontWeight: 600
              }}>{l.count}</div>
            </button>);

        })}
      </div>
    </section>);

}

// ───── BRAND INTRO ─────────────────────────────────────────────────────────
function BrandIntroB({ theme, copyTone }) {
  const intro = {
    technical: 'AEVUM is the Korean wholesale partner for aesthetic medical devices and soft products. We supply distributors, clinics, and groups across 38 countries with the newest CGMP-certified formulations and HIFU platforms — direct from Seoul.',
    editorial: 'AEVUM brings the most advanced K-beauty supply chain to clinics and distributors worldwide. The newest formulations, the safest labs, the most complete catalogue — for face and body, sourced direct from Seoul.',
    direct: 'AEVUM is the fastest way to source K-beauty at wholesale. Newest products, full catalogue, single quote, 24-hour reply.'
  }[copyTone] || 'AEVUM is the Korean wholesale partner for aesthetic medical devices and soft products. We supply distributors, clinics, and groups across 38 countries with the newest CGMP-certified formulations and HIFU platforms — direct from Seoul.';

  return (
    <section style={{ padding: '88px 64px 64px' }}>
      <div className="ae-mono" style={{
        fontSize: 11, letterSpacing: '.22em', color: theme.accent,
        textTransform: 'uppercase', marginBottom: 24
      }}>Newest · Safest · Complete</div>

      <h2 className="ae-serif" style={{
        fontSize: 78, fontWeight: 300, lineHeight: 1.08, letterSpacing: '-0.025em',
        color: theme.ink, margin: '0 0 36px', maxWidth: 1180,
        textWrap: 'balance'
      }}>
        The Newest in <em style={{ fontStyle: 'italic', fontWeight: 400 }}>K-Beauty</em>,
        <br />
        Engineered for <span style={{ color: theme.accent, fontWeight: 400 }}>Face &amp; Body</span>
        <br />
        <span style={{ color: theme.muted, fontSize: 56, fontWeight: 300 }}>— Worldwide.</span>
      </h2>

      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 64, alignItems: 'start' }}>
        <p className="ae-sans" style={{
          fontSize: 17, lineHeight: 1.65, color: theme.body, margin: 0, maxWidth: 740
        }}>
          {intro}
        </p>
        <div style={{
          borderLeft: `1px solid ${theme.line}`, paddingLeft: 28,
          display: 'flex', flexDirection: 'column', gap: 14
        }}>
          {AEVUM_CERTS.map((c) =>
          <div key={c.code} style={{ display: 'flex', gap: 14, alignItems: 'baseline' }}>
              <span className="ae-mono" style={{
              fontSize: 12, color: theme.accent, letterSpacing: '.14em', minWidth: 48
            }}>{c.code}</span>
              <span className="ae-sans" style={{ fontSize: 12.5, color: theme.body, lineHeight: 1.5 }}>
                {c.body}
              </span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ───── ACHIEVEMENTS STRIPE (dark) ──────────────────────────────────────────
function AchievementsB({ theme }) {
  return (
    <section style={{
      background: theme.accent, color: '#fff',
      padding: '72px 64px'
    }}>
      <div className="ae-mono" style={{
        fontSize: 11, letterSpacing: '.22em', color: 'rgba(255,255,255,.85)',
        textTransform: 'uppercase', marginBottom: 14
      }}>Achievements</div>
      <h3 className="ae-serif" style={{
        fontSize: 40, fontWeight: 300, color: '#fff', margin: '0 0 48px',
        letterSpacing: '-0.01em', maxWidth: 780
      }}>
        Eleven years of K-beauty exports, measured in numbers.
      </h3>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4,1fr)',
        gap: 0, borderTop: '1px solid rgba(255,255,255,.25)'
      }}>
        {AEVUM_ACHIEVEMENTS.map((a, i) =>
        <div key={a.label} style={{
          padding: '32px 28px 0',
          borderRight: i < 3 ? '1px solid rgba(255,255,255,.25)' : 'none'
        }}>
            <div className="ae-serif" style={{
            fontSize: 64, fontWeight: 300, color: '#fff', letterSpacing: '-0.02em', lineHeight: 1
          }}>{a.value}</div>
            <div className="ae-sans" style={{
            fontSize: 13, color: '#fff', marginTop: 14, fontWeight: 600,
            letterSpacing: '.06em', textTransform: 'uppercase'
          }}>{a.label}</div>
            <p className="ae-sans" style={{
            fontSize: 13, color: 'rgba(255,255,255,.78)', marginTop: 10, lineHeight: 1.5
          }}>{a.sub}</p>
          </div>
        )}
      </div>
    </section>);

}

// ───── PRODUCT ROW ─────────────────────────────────────────────────────────
function ProductRowB({ theme, onNav, kicker, title, items }) {
  return (
    <section style={{ padding: '80px 64px 24px' }}>
      <div className="ae-mono" style={{
        fontSize: 11, letterSpacing: '.22em', color: theme.accent,
        textTransform: 'uppercase', marginBottom: 14
      }}>{kicker}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 32 }}>
        <h2 className="ae-serif" style={{
          fontSize: 48, fontWeight: 300, color: theme.ink, margin: 0,
          letterSpacing: '-0.02em'
        }}>{title}</h2>
        <button onClick={() => onNav('product')} className="ae-sans" style={{
          appearance: 'none', border: 0, background: 'transparent', cursor: 'pointer',
          fontSize: 13, color: theme.accent, fontWeight: 500, letterSpacing: '.04em'
        }}>View all →</button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14 }}>
        {items.map((p) =>
        <button key={p.name} onClick={() => onNav('product')} className="ae-sans" style={{
          appearance: 'none', border: 0, background: 'transparent', cursor: 'pointer',
          textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 14
        }}>
            {p.img ? (
              <div style={{
                aspectRatio:'16/10', background:'#E7EEF4',
                border:'1px solid rgba(17,32,46,0.10)', borderRadius:14,
                overflow:'hidden', display:'flex', alignItems:'center', justifyContent:'center',
              }}>
                <img src={p.img} alt={p.name} style={{
                  width:'100%', height:'100%', objectFit:'cover', display:'block',
                }}/>
              </div>
            ) : (
              <Placeholder label={p.name} ratio="16/10" style={{ background: '#E7EEF4' }} />
            )}
            <div>
              <div className="ae-mono" style={{
              fontSize: 9.5, letterSpacing: '.18em', color: theme.muted,
              textTransform: 'uppercase'
            }}>{p.cat}</div>
              <div className="ae-serif" style={{
              fontSize: 24, fontWeight: 400, color: theme.ink, marginTop: 6, letterSpacing: '-0.01em'
            }}>{p.name}</div>
              <div className="ae-sans" style={{
              fontSize: 13.5, color: theme.body, marginTop: 6, lineHeight: 1.45
            }}>{p.sub}</div>
              <div className="ae-mono" style={{
              fontSize: 10.5, color: theme.accent, marginTop: 14, letterSpacing: '.1em',
              textTransform: 'uppercase', fontWeight: 500
            }}>Read more →</div>
            </div>
          </button>
        )}
      </div>
    </section>);

}

// ───── SERVICES GRID ───────────────────────────────────────────────────────
function ServicesB({ theme }) {
  return (
    <section style={{ padding: '88px 64px 32px' }}>
      <div className="ae-mono" style={{
        fontSize: 11, letterSpacing: '.22em', color: theme.accent,
        textTransform: 'uppercase', marginBottom: 14
      }}>Why AEVUM</div>
      <h2 className="ae-serif" style={{
        fontSize: 48, fontWeight: 300, color: theme.ink, margin: '0 0 18px', letterSpacing: '-0.02em'
      }}>More than a wholesaler. A partner.</h2>
      <p className="ae-sans" style={{
        fontSize: 15, color: theme.body, maxWidth: 680, lineHeight: 1.6, margin: '0 0 40px'
      }}>
        With eleven years of Korean-export experience and a complete back-office for
        wholesale clinics and distributors, AEVUM supports growth with:
      </p>
      <div className="ae-services-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 1, background: theme.line }}>
        {AEVUM_SERVICES.map((s) =>
        <div key={s.id} className="ae-service-card" style={{
          background: theme.bg, padding: '36px 32px',
          display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 24, alignItems: 'start'
        }}>
            {s.img ? (
              <div style={{
                aspectRatio: '4/3', background: '#E7EEF4',
                borderRadius: 12, overflow: 'hidden',
                border: '1px solid rgba(17,32,46,0.08)'
              }}>
                <img src={s.img} alt={s.title} style={{
                  width: '100%', height: '100%', objectFit: 'cover', display: 'block'
                }} />
              </div>
            ) : (
              <Placeholder label={s.title} ratio="4/3" style={{ background: '#E7EEF4' }} />
            )}
            <div>
              <div className="ae-mono" style={{
              fontSize: 12, letterSpacing: '.18em', color: theme.ink, fontWeight: 600,
              marginBottom: 12
            }}>{s.title}</div>
              <p className="ae-sans" style={{ fontSize: 14, lineHeight: 1.6, color: theme.body, margin: 0 }}>{s.body}</p>
              <div className="ae-mono" style={{
              fontSize: 10.5, color: theme.accent, marginTop: 18, letterSpacing: '.1em',
              textTransform: 'uppercase'
            }}>Learn more →</div>
            </div>
          </div>
        )}
      </div>
    </section>);

}

// ───── PARTNERS ────────────────────────────────────────────────────────────
function PartnersB({ theme }) {
  return (
    <section style={{ padding: '72px 64px' }}>
      <div style={{ textAlign: 'center', marginBottom: 36 }}>
        <div className="ae-mono" style={{
          fontSize: 11, letterSpacing: '.22em', color: theme.accent,
          textTransform: 'uppercase', marginBottom: 14
        }}>Manufacturing partners</div>
        <h2 className="ae-serif" style={{
          fontSize: 42, fontWeight: 300, color: theme.ink, margin: 0, letterSpacing: '-0.02em'
        }}>Korea's most trusted laboratories.</h2>
        <p className="ae-sans" style={{
          fontSize: 14, color: theme.body, maxWidth: 580, margin: '14px auto 0', lineHeight: 1.55
        }}>
          We work only with CGMP-certified Korean manufacturers — selected for safety,
          consistency, and the newest formulations.
        </p>
      </div>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(6,1fr)',
        gap: 1, background: theme.line, border: `1px solid ${theme.line}`
      }}>
        {AEVUM_PARTNERS.map((p) =>
        <div key={p} style={{
          background: theme.bg, padding: '28px 16px', textAlign: 'center'
        }}>
            <div className="ae-serif" style={{
            fontSize: 18, color: theme.muted, letterSpacing: '.04em', fontWeight: 400
          }}>{p}</div>
          </div>
        )}
      </div>
    </section>);

}

// ───── TESTIMONIALS ────────────────────────────────────────────────────────
function TestimonialsB({ theme }) {
  const [idx, setIdx] = useState(0);
  const t = AEVUM_TESTIMONIALS;
  return (
    <section style={{ padding: '88px 64px', background: theme.panel }}>
      <div className="ae-mono" style={{
        fontSize: 11, letterSpacing: '.22em', color: theme.accent,
        textTransform: 'uppercase', marginBottom: 14
      }}>Clients &amp; testimonials</div>
      <h2 className="ae-serif" style={{
        fontSize: 42, fontWeight: 300, color: theme.ink, margin: '0 0 48px', letterSpacing: '-0.02em'
      }}>What our wholesale partners say.</h2>

      <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 48, alignItems: 'center' }}>
        <Placeholder label={t[idx].name} ratio="3/4" style={{ width: 280, background: '#D9D2C0' }} />
        <div>
          <div className="ae-serif" style={{
            fontSize: 36, fontWeight: 300, color: theme.ink, lineHeight: 1.3,
            letterSpacing: '-0.01em', maxWidth: 780
          }}>
            <span style={{ color: theme.accent }}>“</span>{t[idx].quote}<span style={{ color: theme.accent }}>”</span>
          </div>
          <div style={{ marginTop: 36, paddingTop: 18, borderTop: `1px solid ${theme.line}`,
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
            <div>
              <div className="ae-sans" style={{ fontSize: 15, fontWeight: 500, color: theme.ink }}>{t[idx].name}</div>
              <div className="ae-sans" style={{ fontSize: 12.5, color: theme.muted, marginTop: 2 }}>{t[idx].role}</div>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              {t.map((_, i) =>
              <button key={i} onClick={() => setIdx(i)} style={{
                appearance: 'none', border: 0, cursor: 'pointer', padding: 0,
                width: i === idx ? 28 : 10, height: 2,
                background: i === idx ? theme.accent : theme.line, transition: 'all 300ms'
              }} />
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ───── PROMO + TRUST STRIP ─────────────────────────────────────────────────
function PromoStripB({ theme }) {
  const [email, setEmail] = useState('');
  const [joined, setJoined] = useState(false);
  return (
    <>
      <section style={{
        padding: '88px 64px',
        background: '#EAEFF6', // soft icy panel — sits between AEVUM cream and ink
        textAlign: 'center'
      }}>
        <h2 className="ae-serif" style={{
          fontWeight: 700, lineHeight: 1.15, letterSpacing: '-0.02em',
          color: theme.ink, margin: '0 auto 18px', maxWidth: 760, fontSize: "40px"
        }}>
          Get 10% off your first wholesale order,<br />
          plus exclusive offers &amp; restock alerts.
        </h2>
        <p style={{
          fontSize: 14, color: theme.body, margin: '0 auto 32px', maxWidth: 540, lineHeight: 1.6
        }}>
          Be the first to know about new K-beauty arrivals, wholesale promotions, and
          launch dates from our Korean manufacturing partners.
        </p>
        <form onSubmit={(e) => {e.preventDefault();if (email) setJoined(true);}}
        style={{
          display: 'flex', maxWidth: 520, margin: '0 auto', gap: 0,
          background: '#fff', borderRadius: 8, overflow: 'hidden',
          border: `1px solid ${theme.line}`
        }}>
          <input
            type="email" placeholder={joined ? 'Subscribed ✓' : 'Enter email here'}
            value={joined ? '' : email}
            onChange={(e) => setEmail(e.target.value)}
            disabled={joined}
            style={{
              flex: 1, padding: '14px 18px', fontSize: 14, color: theme.ink,
              border: 0, background: 'transparent', outline: 'none',
              fontFamily: 'Montserrat, ui-sans-serif'
            }} />
          
          <button type="submit" style={{
            appearance: 'none', border: 0, background: theme.ink, color: '#fff',
            padding: '0 28px', fontSize: 13, fontWeight: 600, letterSpacing: '.06em',
            cursor: 'pointer'
          }}>{joined ? 'Joined' : 'Join'}</button>
        </form>
      </section>

      <section style={{
        padding: '40px 64px', background: theme.bg,
        borderBottom: `1px solid ${theme.line}`
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 32,
          maxWidth: 980, margin: '0 auto'
        }}>
          {[
          { icon: 'package', title: 'Worldwide cold-chain shipping', sub: 'From Incheon to 38 countries' },
          { icon: 'chat', title: 'Direct WhatsApp & KakaoTalk', sub: 'Reply within business hours' },
          { icon: 'check', title: 'CGMP-certified products', sub: 'Batch reports on every order' }].
          map((t) =>
          <div key={t.title} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <TrustIcon kind={t.icon} color={theme.ink} />
              <div>
                <div style={{ fontSize: 13.5, fontWeight: 600, color: theme.ink, lineHeight: 1.3 }}>{t.title}</div>
                <div style={{ fontSize: 12, color: theme.muted, marginTop: 2 }}>{t.sub}</div>
              </div>
            </div>
          )}
        </div>
      </section>
    </>);

}

function TrustIcon({ kind, color }) {
  const stroke = { stroke: color, strokeWidth: 1.5, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (kind === 'package') return (
    <svg width="32" height="32" viewBox="0 0 24 24" {...stroke}>
      <path d="M3 7l9-4 9 4v10l-9 4-9-4V7z" />
      <path d="M3 7l9 4 9-4M12 11v10" />
    </svg>);

  if (kind === 'chat') return (
    <svg width="32" height="32" viewBox="0 0 24 24" {...stroke}>
      <path d="M4 5h16v11H8l-4 4V5z" />
    </svg>);

  return (
    <svg width="32" height="32" viewBox="0 0 24 24" {...stroke}>
      <path d="M5 12l5 5 9-11" />
    </svg>);

}

// ───── GET IN TOUCH ────────────────────────────────────────────────────────
function GetInTouchB({ theme }) {
  const [submitted, setSubmitted] = useState(false);
  const inp = {
    width: '100%', padding: '12px 16px', fontSize: 14, color: theme.ink,
    border: `1px solid ${theme.line}`, borderRadius: 8,
    background: '#fff', outline: 'none',
    fontFamily: 'Montserrat, ui-sans-serif'
  };
  const Lab = ({ children }) =>
  <div style={{ fontSize: 12.5, color: theme.ink, fontWeight: 600, marginBottom: 8 }}>
      {children} <span style={{ color: theme.accent }}>*</span>
    </div>;


  return (
    <section style={{ padding: '88px 64px', background: theme.bg }}>
      <div style={{ textAlign: 'center', maxWidth: 780, margin: '0 auto 44px' }}>
        <h2 className="ae-serif" style={{
          fontSize: 36, fontWeight: 700, color: theme.ink, margin: '0 0 18px',
          letterSpacing: '.02em', textTransform: 'uppercase'
        }}>Get in Touch</h2>
        <p style={{ fontSize: 14.5, color: theme.body, lineHeight: 1.7, margin: '0 0 22px' }}>
          We serve <strong>distributors, clinics, and groups across 38 countries</strong>.
          Submit your request and our wholesale team will route it to the right
          department — sales, training, logistics, or marketing.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 18, alignItems: 'center' }}>
          <a href="#chat" style={{
            color: theme.accent, fontSize: 14, fontWeight: 600, textDecoration: 'none'
          }}>Chat with us ↗</a>
          <span style={{ color: theme.line }}>|</span>
          <a href="#contact" style={{
            color: theme.ink, fontSize: 14, fontWeight: 600, textDecoration: 'none'
          }}>Contact us ↗</a>
        </div>
      </div>

      {submitted ?
      <div style={{
        maxWidth: 780, margin: '0 auto', padding: '56px 32px',
        background: '#fff', borderRadius: 12, border: `1px solid ${theme.line}`,
        textAlign: 'center'
      }}>
          <div className="ae-mono" style={{
          fontSize: 11, letterSpacing: '.22em', color: theme.accent,
          textTransform: 'uppercase', marginBottom: 12
        }}>Request received</div>
          <div className="ae-serif" style={{
          fontSize: 26, fontWeight: 700, color: theme.ink, marginBottom: 10
        }}>Thank you. We'll reply within 24 hours.</div>
          <div style={{ fontSize: 13, color: theme.muted }}>
            Reference <span className="ae-mono" style={{ color: theme.ink }}>AVM-2026-04827</span>
          </div>
        </div> :

      <form
        onSubmit={(e) => {e.preventDefault();setSubmitted(true);}}
        style={{
          maxWidth: 880, margin: '0 auto',
          display: 'grid', gap: 20
        }}>
          <div>
            <Lab>Request Type</Lab>
            <select style={inp} defaultValue="">
              <option value="" disabled>Select a request type</option>
              <option>Wholesale quotation</option>
              <option>HIFU machine demo</option>
              <option>Clinical training</option>
              <option>Logistics inquiry</option>
              <option>Private label</option>
            </select>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <div><Lab>Name</Lab><input style={inp} placeholder="Your full name" /></div>
            <div><Lab>Email</Lab><input type="email" style={inp} placeholder="your.email@example.com" /></div>
            <div><Lab>Phone</Lab><input style={inp} placeholder="+82 10 1234 5678" /></div>
            <div>
              <Lab>Country</Lab>
              <select style={inp} defaultValue="">
                <option value="" disabled>Select your country</option>
                <option>United Arab Emirates</option><option>Singapore</option><option>Malaysia</option>
                <option>Indonesia</option><option>Vietnam</option><option>Thailand</option>
                <option>Saudi Arabia</option><option>India</option><option>Brazil</option><option>Mexico</option>
                <option>Other</option>
              </select>
            </div>
          </div>
          <div>
            <Lab>Message</Lab>
            <textarea style={{ ...inp, minHeight: 120, resize: 'vertical' }} placeholder="Tell us about your request..." />
          </div>
          <div>
            <button type="submit" style={{
            appearance: 'none', border: 0, background: theme.ink, color: '#fff',
            padding: '14px 30px', fontSize: 13, fontWeight: 600, letterSpacing: '.04em',
            borderRadius: 999, cursor: 'pointer'
          }}>Submit Request</button>
          </div>
        </form>
      }
    </section>);

}

// ───── COMPLIANCE STRIP ────────────────────────────────────────────────────
function ComplianceB({ theme }) {
  return (
    <section style={{ padding: '56px 64px', borderTop: `1px solid ${theme.line}` }}>
      <div style={{ textAlign: 'center', marginBottom: 24 }}>
        <div className="ae-mono" style={{
          fontSize: 11, letterSpacing: '.22em', color: theme.accent,
          textTransform: 'uppercase', marginBottom: 10
        }}>Industry-leading compliance</div>
        <p className="ae-sans" style={{ fontSize: 13.5, color: theme.body, margin: 0 }}>
          Meeting the highest standards for wholesale supply.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14 }}>
        {AEVUM_CERTS.map((c) =>
        <div key={c.code} style={{
          border: `1px solid ${theme.line}`, padding: '24px 16px',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10
        }}>
            <div className="ae-serif" style={{
            fontSize: 22, color: theme.ink, letterSpacing: '.06em', fontWeight: 400
          }}>{c.code}</div>
            <div className="ae-sans" style={{ fontSize: 11.5, color: theme.muted, textAlign: 'center', lineHeight: 1.45 }}>
              {c.body}
            </div>
          </div>
        )}
      </div>
    </section>);

}

// ───── CTA ─────────────────────────────────────────────────────────────────
function CTAStripB({ theme, onNav }) {
  return (
    <section style={{ padding: '72px 64px', background: theme.dark, color: '#fff' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center' }}>
        <h2 className="ae-serif" style={{
          fontSize: 56, fontWeight: 300, margin: 0, letterSpacing: '-0.02em', lineHeight: 1.04
        }}>
          Send your list.<br /><em style={{ fontStyle: 'italic', color: theme.accent }}>One quote.</em><br />
          Twenty-four hours.
        </h2>
        <div>
          <p className="ae-sans" style={{
            fontSize: 14.5, color: 'rgba(255,255,255,.7)', lineHeight: 1.6, margin: '0 0 24px'
          }}>
            No portal, no account. Tell us what you need and we will reply with availability,
            MOQ, certifications, and a sealed quote.
          </p>
          <button onClick={() => onNav('request')} className="ae-sans" style={{
            appearance: 'none', border: 0, background: theme.accent, color: theme.dark,
            padding: '14px 22px', fontSize: 12, fontWeight: 600, letterSpacing: '.1em',
            textTransform: 'uppercase', cursor: 'pointer'
          }}>Open request form →</button>
        </div>
      </div>
    </section>);

}

// ───── FOOTER ──────────────────────────────────────────────────────────────
function FooterB({ theme }) {
  return (
    <footer style={{ background: theme.dark, color: '#fff', padding: '56px 64px 32px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 48 }}>
        <div>
          <div className="ae-serif" style={{ fontSize: 24, letterSpacing: '.18em', fontWeight: 500 }}>AEVUM</div>
          <div className="ae-mono" style={{ fontSize: 9.5, letterSpacing: '.22em', color: 'rgba(255,255,255,.5)', marginTop: 6 }}>K-BEAUTY · WHOLESALE · EST. 2015</div>
          <p className="ae-sans" style={{ fontSize: 13, color: 'rgba(255,255,255,.65)', maxWidth: 300, marginTop: 18, lineHeight: 1.55 }}>
            The Korean wholesale partner for aesthetic medical devices and soft products.
            Serving 38 countries from Seoul and Incheon.
          </p>
        </div>
        {[
        { h: 'Explore', l: ['Products', 'HIFU Machines', 'Filler', 'Skinbooster', 'Body Filler'] },
        { h: 'Wholesale', l: ['Process', 'Request a Quote', 'Logistics', 'Clinical Training', 'Certifications'] },
        { h: 'Contact', l: ['hello@aevum.kr', 'Seoul · Incheon', 'WhatsApp', 'KakaoTalk'] }].
        map((c) =>
        <div key={c.h}>
            <div className="ae-mono" style={{ fontSize: 10, letterSpacing: '.18em', color: theme.accent, marginBottom: 16, fontWeight: 500 }}>{c.h.toUpperCase()}</div>
            {c.l.map((x) =>
          <div key={x} className="ae-sans" style={{ fontSize: 13, color: 'rgba(255,255,255,.7)', padding: '4px 0' }}>{x}</div>
          )}
          </div>
        )}
      </div>
      <div style={{
        marginTop: 40, paddingTop: 18, borderTop: '1px solid rgba(255,255,255,.12)',
        display: 'flex', justifyContent: 'space-between'
      }}>
        <div className="ae-mono" style={{ fontSize: 10, color: 'rgba(255,255,255,.45)', letterSpacing: '.12em' }}>
          © AEVUM 2026 · SEOUL · REPUBLIC OF KOREA
        </div>
        <div className="ae-mono" style={{ fontSize: 10, color: 'rgba(255,255,255,.45)', letterSpacing: '.12em' }}>
          CGMP · ISO 13485 · KFDA · CE
        </div>
      </div>
    </footer>);

}

// ───── HOME B ──────────────────────────────────────────────────────────────
function HomeB({ theme, onNav, heroVariant, copyTone }) {
  const softProducts = [
  { name: 'PINKELLA PN', cat: 'Skinbooster', sub: 'PN biostimulator · 2mL × 2 syringes', img: 'assets/pinkella.png' },
  { name: 'REJURAN STYLE', cat: 'Skinbooster', sub: 'PN rejuvenation · 2mL × 2 syringes', img: 'assets/rejuran.png' },
  { name: 'AESSOA', cat: 'Filler', sub: 'HA Filler line · Ultra · Global · Deep · Shine', img: 'assets/aessoa.png' },
  { name: 'iLEAD 70', cat: 'Body Filler', sub: '70mL Body Filler · Vial type', img: 'assets/ilead70.png' }];

  const devices = [
  { name: 'OLIGIO', cat: 'RF Platform', sub: 'Wontech monopolar RF · Lifting', img: 'assets/oligio.png' },
  { name: 'LIFTERA', cat: 'HIFU Machines', sub: 'Dual applicator · Line + Pen', img: 'assets/liftera.png' },
  { name: 'Mark Vu', cat: 'Skin Analyzer', sub: 'AI Skin Analyzer · Multi-spectral', img: 'assets/markvu.png' },
  { name: 'HOMETHERA', cat: 'Home Device', sub: 'Home-use HIFU · 4.5mm + 3.0mm', img: 'assets/homethera.png' }];

  return (
    <div>
      <HeroRotatorB theme={theme} onNav={onNav} heroVariant={heroVariant} />
      <BrandIntroB theme={theme} copyTone={copyTone} />
      <ProductLinesB theme={theme} onNav={onNav} />
      <AchievementsB theme={theme} />
      <ProductRowB theme={theme} onNav={onNav} kicker="Soft Products" title="Filler · Skinbooster · Body" items={softProducts} />
      <ProductRowB theme={theme} onNav={onNav} kicker="Medical Devices" title="HIFU machines and platforms" items={devices} />
      <ServicesB theme={theme} />
      <PartnersB theme={theme} />
      <GetInTouchB theme={theme} />
      <PromoStripB theme={theme} />
      <ComplianceB theme={theme} />
      <CTAStripB theme={theme} onNav={onNav} />
      <FooterB theme={theme} />
    </div>);

}

// ───── SHOP ALL (catalog grid) ─────────────────────────────────────────────
function ShopAllB({ theme, onNav }) {
  const [collection, setCollection] = useState('AEVUM MADE');
  const [type, setType] = useState('All product');

  const types = [
  'All product', 'HIFU Machine', 'Filler', 'Skin Booster',
  'Body Filler', 'Thread', 'Peeling', 'Devices', 'Consumables', 'Lab & Safety', 'Private Label'];


  // Map AEVUM_PRODUCTS cat → display type
  const catLabel = {
    hifu: 'HIFU Machine', filler: 'Filler', skinbooster: 'Skin Booster',
    body: 'Body Filler', devices: 'Devices', consumables: 'Consumables',
    peeling: 'Peeling', thread: 'Thread'
  };

  const items = (AEVUM_PRODUCTS || []).filter((p) => {
    if (type === 'All product') return true;
    return catLabel[p.cat] === type;
  });

  return (
    <section style={{
      padding: '56px 64px 96px', background: theme.bg, minHeight: '100vh'
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '220px 1fr', gap: 56,
        maxWidth: 1320, margin: '0 auto'
      }}>
        {/* SIDEBAR */}
        <aside>
          <div className="ae-mono" style={{
            fontSize: 11, letterSpacing: '.22em', color: theme.muted,
            textTransform: 'uppercase', paddingBottom: 14,
            borderBottom: `1px solid ${theme.line}`, marginBottom: 22
          }}>Filter by</div>

          <div style={{ marginBottom: 32 }}>
            <div className="ae-sans" style={{
              fontSize: 13, fontWeight: 600, color: theme.ink, marginBottom: 14,
              display: 'flex', alignItems: 'center', gap: 6
            }}>
              COLLECTION
              <span style={{
                width: 14, height: 14, borderRadius: '50%',
                background: theme.line, color: theme.muted, fontSize: 9,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
              }}>i</span>
            </div>
            {['AEVUM MADE', 'OFFICIAL SALES'].map((c) =>
            <button key={c} onClick={() => setCollection(c)} style={{
              display: 'block', appearance: 'none', border: 0, background: 'transparent',
              fontSize: 12.5, padding: '5px 0', cursor: 'pointer', textAlign: 'left',
              color: collection === c ? theme.ink : theme.body,
              textDecoration: collection === c ? 'underline' : 'none',
              textUnderlineOffset: 4, fontWeight: collection === c ? 600 : 400,
              fontFamily: 'Montserrat, ui-sans-serif'
            }}>{c}</button>
            )}
          </div>

          <div>
            <div className="ae-sans" style={{
              fontSize: 13, fontWeight: 600, color: theme.ink, marginBottom: 14
            }}>PRODUCT TYPE</div>
            {types.map((t) =>
            <button key={t} onClick={() => setType(t)} style={{
              display: 'block', appearance: 'none', border: 0, background: 'transparent',
              fontSize: 12.5, padding: '5px 0', cursor: 'pointer', textAlign: 'left',
              color: type === t ? theme.ink : theme.muted,
              fontWeight: type === t ? 600 : 400,
              fontFamily: 'Montserrat, ui-sans-serif'
            }}>{t}</button>
            )}
          </div>
        </aside>

        {/* GRID */}
        <div>
          <div style={{
            display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
            paddingBottom: 14, borderBottom: `1px solid ${theme.line}`, marginBottom: 28
          }}>
            <h1 className="ae-serif" style={{
              fontSize: 32, fontWeight: 700, color: theme.ink, margin: 0,
              letterSpacing: '-0.01em'
            }}>Shop All</h1>
            <button className="ae-sans" style={{
              appearance: 'none', border: 0, background: 'transparent',
              fontSize: 12.5, color: theme.accent, fontWeight: 600, cursor: 'pointer'
            }}>Sort by ▾</button>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24
          }}>
            {items.map((p) =>
            <button key={p.id} onClick={() => onNav('productDetail')} style={{
              appearance: 'none', border: 0, background: 'transparent', cursor: 'pointer',
              textAlign: 'left', padding: 0, display: 'flex', flexDirection: 'column'
            }}>
                <div style={{
                position: 'relative',
                aspectRatio: '1 / 1',
                background: '#EFF4F8',
                border: `1px solid ${theme.line}`,
                borderRadius: 14,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                overflow: 'hidden'
              }}>
                  {/* Badge */}
                  {p.badge && <div className="ae-sans" style={{
                  position: 'absolute', top: 0, right: 16, zIndex: 2,
                  background: '#5B8FB9', color: '#fff',
                  padding: '7px 14px', fontSize: 10, fontWeight: 700, letterSpacing: '.14em'
                }}>{p.badge}</div>}

                  {p.img ? (
                    <img src={p.img} alt={p.name} style={{
                      width: '100%', height: '100%', objectFit: 'cover', display: 'block'
                    }}/>
                  ) : (
                    <>
                      {/* Image placeholder — soft medical icon */}
                      <svg width="56" height="72" viewBox="0 0 56 72" fill="none" style={{ opacity: .35 }}>
                        <rect x="14" y="6" width="28" height="60" rx="3" stroke="#5B8FB9" strokeWidth="1.5" />
                        <rect x="18" y="14" width="20" height="4" fill="#5B8FB9" opacity=".5" />
                        <rect x="18" y="22" width="14" height="2" fill="#5B8FB9" opacity=".4" />
                        <rect x="18" y="28" width="20" height="22" rx="2" stroke="#5B8FB9" strokeWidth="1" />
                      </svg>
                      <div className="ae-mono" style={{
                      position: 'absolute', bottom: 10, left: 0, right: 0, textAlign: 'center',
                      fontSize: 9, color: theme.muted, letterSpacing: '.16em', textTransform: 'uppercase'
                    }}>image · pending</div>
                    </>
                  )}
                </div>

                <div style={{ padding: '18px 4px 4px' }}>
                  <div className="ae-serif" style={{
                  fontSize: 17, fontWeight: 600, color: theme.ink, lineHeight: 1.25,
                  marginBottom: 8
                }}>{p.name}</div>
                  <div className="ae-sans" style={{
                  fontSize: 12, color: theme.body, lineHeight: 1.4
                }}>{p.sub}</div>
                </div>
              </button>
            )}
          </div>

          {items.length === 0 &&
          <div style={{
            padding: '80px 0', textAlign: 'center', color: theme.muted, fontSize: 13
          }}>No products in this filter — try another category.</div>
          }
        </div>
      </div>
    </section>);

}

// ───── PRODUCT DETAIL B ────────────────────────────────────────────────────
function ProductDetailB({ theme, onNav }) {
  const p = AEVUM_PRODUCT_DETAIL;
  return (
    <div>
      {/* Top sky-blue hero strip with product name */}
      <section style={{ background: '#5B8FB9', color: '#fff', padding: '56px 64px 64px' }}>
        <div className="ae-mono" style={{
          fontSize: 10.5, letterSpacing: '.16em', color: 'rgba(255,255,255,.5)', marginBottom: 18
        }}>
          <span style={{ cursor: 'pointer' }} onClick={() => onNav('home')}>HOME</span>
          {' / '}
          <span style={{ cursor: 'pointer' }} onClick={() => onNav('product')}>SHOP ALL</span>
          {' / '}
          <span style={{ color: '#fff' }}>{p.name}</span>
        </div>
        <div className="ae-mono" style={{
          fontSize: 11, letterSpacing: '.22em', color: theme.accent,
          textTransform: 'uppercase', marginBottom: 18
        }}>{p.badge}</div>
        <h1 className="ae-serif" style={{
          fontSize: 88, fontWeight: 300, lineHeight: 1, letterSpacing: '-0.02em', margin: '0 0 14px'
        }}>{p.name}</h1>
        <div className="ae-sans" style={{ fontSize: 18, color: 'rgba(255,255,255,.75)', maxWidth: 680, lineHeight: 1.5 }}>
          {p.category} · {p.status}
        </div>
      </section>

      <section style={{ padding: '48px 64px', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48 }}>
        <div>
          <Placeholder label="Ulthera Prime — main shot" ratio="1/1" style={{ background: '#E7EEF4' }} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 6, marginTop: 6 }}>
            <Placeholder label="ANGLE 01" ratio="1/1" style={{ background: '#E7EEF4' }} />
            <Placeholder label="CARTRIDGE" ratio="1/1" style={{ background: '#E7EEF4' }} />
            <Placeholder label="UI" ratio="1/1" style={{ background: '#E7EEF4' }} />
            <Placeholder label="CASE" ratio="1/1" style={{ background: '#E7EEF4' }} />
          </div>
        </div>
        <div>
          <div style={{ display: 'flex', gap: 10, marginBottom: 18, alignItems: 'center' }}>
            <StockPill status="In stock" />
            <span className="ae-mono" style={{ fontSize: 10, color: theme.muted, letterSpacing: '.14em' }}>SKU {p.sku}</span>
          </div>
          <p className="ae-sans" style={{ fontSize: 15, lineHeight: 1.7, color: theme.body, margin: '0 0 28px' }}>
            {p.description}
          </p>

          <div style={{ borderTop: `1px solid ${theme.line}` }}>
            {[
            ['MOQ', p.moq],
            ['Origin', p.origin],
            ['Warranty', p.warranty],
            ['Voltage', p.voltage],
            ['Cartridges', p.cartridges.length + ' depths'],
            ['Capacity', p.shots]].
            map(([k, v]) =>
            <div key={k} style={{
              display: 'grid', gridTemplateColumns: '140px 1fr', gap: 18,
              padding: '14px 0', borderBottom: `1px solid ${theme.line}`
            }}>
                <div className="ae-mono" style={{
                fontSize: 10, letterSpacing: '.16em', color: theme.muted, textTransform: 'uppercase'
              }}>{k}</div>
                <div className="ae-sans" style={{ fontSize: 14, color: theme.ink }}>{v}</div>
              </div>
            )}
          </div>

          <div style={{ marginTop: 28 }}>
            <div className="ae-mono" style={{
              fontSize: 10, letterSpacing: '.16em', color: theme.accent,
              textTransform: 'uppercase', marginBottom: 14, fontWeight: 600
            }}>Highlights</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
              {p.highlights.map((h) =>
              <li key={h} className="ae-sans" style={{
                fontSize: 14, color: theme.body, padding: '10px 0',
                borderTop: `1px solid ${theme.lineSoft}`, display: 'flex', gap: 12
              }}>
                  <span style={{ color: theme.accent }}>—</span>{h}
                </li>
              )}
            </ul>
          </div>

          <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
            <button onClick={() => onNav('request')} className="ae-sans" style={{
              appearance: 'none', border: 0, background: theme.ink, color: '#fff',
              padding: '14px 24px', fontSize: 12, fontWeight: 600, letterSpacing: '.1em',
              textTransform: 'uppercase', cursor: 'pointer', flex: 1
            }}>Add to Quote Request</button>
            <button className="ae-sans" style={{
              appearance: 'none', border: `1px solid ${theme.ink}`, background: 'transparent',
              color: theme.ink, padding: '14px 24px', fontSize: 12, fontWeight: 500, letterSpacing: '.1em',
              textTransform: 'uppercase', cursor: 'pointer'
            }}>Spec PDF</button>
          </div>
        </div>
      </section>
      <ComplianceB theme={theme} />
      <FooterB theme={theme} />
    </div>);

}

// ───── PROCESS B ───────────────────────────────────────────────────────────
function ProcessB({ theme, onNav }) {
  return (
    <div>
      <section style={{ padding: '72px 64px 32px' }}>
        <div className="ae-mono" style={{
          fontSize: 11, letterSpacing: '.22em', color: theme.accent,
          textTransform: 'uppercase', marginBottom: 14
        }}>How to order</div>
        <h1 className="ae-serif" style={{
          fontSize: 72, fontWeight: 300, lineHeight: 1.04, letterSpacing: '-0.02em',
          color: theme.ink, margin: '0 0 18px', maxWidth: 980
        }}>
          Five steps from <em style={{ fontStyle: 'italic' }}>request</em> to a sealed pallet at your dock.
        </h1>
        <p className="ae-sans" style={{ fontSize: 15, color: theme.body, lineHeight: 1.65, maxWidth: 660 }}>
          Wholesale procurement should not require a portal. AEVUM works on a single
          request form, one quote, and one shipment dossier. Re-orders take a click.
        </p>
      </section>
      <section style={{ padding: '8px 64px 48px' }}>
        {AEVUM_PROCESS.map((s, i) =>
        <div key={s.n} style={{
          display: 'grid', gridTemplateColumns: '80px 1.2fr 2fr 200px',
          gap: 32, alignItems: 'start',
          padding: '36px 0', borderBottom: `1px solid ${theme.line}`
        }}>
            <div className="ae-mono" style={{
            fontSize: 11, color: theme.accent, letterSpacing: '.16em'
          }}>{s.n}</div>
            <div className="ae-serif" style={{
            fontSize: 32, fontWeight: 300, color: theme.ink, lineHeight: 1.05,
            letterSpacing: '-0.01em'
          }}>{s.title}</div>
            <p className="ae-sans" style={{ fontSize: 14.5, lineHeight: 1.65, color: theme.body, margin: 0 }}>{s.body}</p>
            <div className="ae-mono" style={{
            fontSize: 10, letterSpacing: '.14em', color: theme.muted, textTransform: 'uppercase',
            textAlign: 'right'
          }}>
              {['Day 0', '24 hours', 'Day 2-3', 'Day 5-9', 'Day 10+'][i]}
            </div>
          </div>
        )}
      </section>
      <CTAStripB theme={theme} onNav={onNav} />
      <FooterB theme={theme} />
    </div>);

}

// ───── REQUEST B ───────────────────────────────────────────────────────────
function RequestB({ theme }) {
  const [items, setItems] = useState([
  { id: 1, sku: 'ULTHERA PRIME', qty: 2 },
  { id: 2, sku: 'AEVUM RICHE.B', qty: 120 },
  { id: 3, sku: '', qty: '' }]
  );
  const [submitted, setSubmitted] = useState(false);
  const setItem = (id, k, v) => setItems((its) => its.map((it) => it.id === id ? { ...it, [k]: v } : it));
  const addItem = () => setItems((its) => [...its, { id: Date.now(), sku: '', qty: '' }]);
  const rmItem = (id) => setItems((its) => its.filter((it) => it.id !== id));

  const inp = {
    appearance: 'none', width: '100%', padding: '10px 0', fontSize: 14, color: theme.ink,
    border: 0, borderBottom: `1px solid ${theme.line}`, background: 'transparent',
    outline: 'none', fontFamily: 'Geist, ui-sans-serif, system-ui, sans-serif'
  };
  const Field = ({ label, hint, children, span }) =>
  <label style={{ display: 'block', gridColumn: span ? `span ${span}` : 'auto' }}>
      <div className="ae-mono" style={{
      fontSize: 9.5, letterSpacing: '.16em', textTransform: 'uppercase',
      color: theme.muted, marginBottom: 8
    }}>{label}</div>
      {children}
      {hint && <div className="ae-sans" style={{ fontSize: 11.5, color: theme.muted, marginTop: 6 }}>{hint}</div>}
    </label>;


  if (submitted) {
    return (
      <div>
        <section style={{ padding: '120px 64px', textAlign: 'center' }}>
          <div className="ae-mono" style={{
            fontSize: 11, letterSpacing: '.22em', color: theme.accent,
            textTransform: 'uppercase', marginBottom: 18
          }}>Request received</div>
          <h1 className="ae-serif" style={{ fontSize: 64, fontWeight: 300, color: theme.ink, margin: '0 0 14px', letterSpacing: '-0.02em' }}>
            Thank you. We will reply within 24 hours.
          </h1>
          <p className="ae-sans" style={{ fontSize: 15, color: theme.body, maxWidth: 560, margin: '0 auto', lineHeight: 1.6 }}>
            Reference number <span className="ae-mono" style={{ color: theme.ink }}>AVM-2026-04826</span>.
            A confirmation has been sent to your inbox.
          </p>
          <button onClick={() => setSubmitted(false)} className="ae-sans" style={{
            appearance: 'none', border: `1px solid ${theme.ink}`, background: 'transparent', color: theme.ink,
            padding: '12px 22px', fontSize: 12, fontWeight: 500, letterSpacing: '.1em', textTransform: 'uppercase',
            cursor: 'pointer', marginTop: 32
          }}>Submit another request</button>
        </section>
        <FooterB theme={theme} />
      </div>);

  }

  return (
    <div>
      <section style={{ padding: '56px 64px 24px' }}>
        <div className="ae-mono" style={{
          fontSize: 11, letterSpacing: '.22em', color: theme.accent,
          textTransform: 'uppercase', marginBottom: 14
        }}>Quotation request</div>
        <h1 className="ae-serif" style={{
          fontSize: 64, fontWeight: 300, color: theme.ink, margin: '0 0 14px',
          letterSpacing: '-0.02em', lineHeight: 1.04
        }}>
          One form. One quote. <em style={{ fontStyle: 'italic' }}>Twenty-four hours.</em>
        </h1>
        <p className="ae-sans" style={{ fontSize: 14.5, color: theme.body, maxWidth: 600, lineHeight: 1.6 }}>
          Tell us who you are, what you need, and where it ships. We will reply with availability,
          MOQ, certificates, and a sealed quote — no account required.
        </p>
      </section>

      <form onSubmit={(e) => {e.preventDefault();setSubmitted(true);}}
      style={{ padding: '24px 64px 48px', display: 'grid', gap: 48 }}>
        <div>
          <div className="ae-mono" style={{ fontSize: 10, letterSpacing: '.16em', color: theme.muted, marginBottom: 18 }}>§ 01 — COMPANY</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '28px 32px' }}>
            <Field label="Company name"><input style={inp} defaultValue="Mediplus Distribution Sdn Bhd" /></Field>
            <Field label="Country of import"><input style={inp} defaultValue="Malaysia" /></Field>
            <Field label="Business type">
              <select style={inp}><option>Distributor / Wholesaler</option><option>Clinic / Spa</option><option>Retailer</option></select>
            </Field>
            <Field label="Business reg #"><input style={inp} placeholder="MYS-2018-0019823" /></Field>
            <Field label="Contact person"><input style={inp} placeholder="Full name" /></Field>
            <Field label="Role"><input style={inp} placeholder="Procurement Director" /></Field>
            <Field label="Email"><input type="email" style={inp} placeholder="you@company.com" /></Field>
            <Field label="Phone / WhatsApp"><input style={inp} placeholder="+60 ..." /></Field>
          </div>
        </div>

        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
            <div className="ae-mono" style={{ fontSize: 10, letterSpacing: '.16em', color: theme.muted }}>§ 02 — REQUESTED ITEMS</div>
            <button type="button" onClick={addItem} className="ae-mono" style={{
              appearance: 'none', border: 0, background: 'transparent', cursor: 'pointer',
              fontSize: 11, letterSpacing: '.12em', color: theme.accent, textTransform: 'uppercase'
            }}>+ Add item</button>
          </div>
          <div style={{ borderTop: `1px solid ${theme.line}` }}>
            <div style={{
              display: 'grid', gridTemplateColumns: '40px 1fr 140px 140px 32px',
              gap: 16, padding: '10px 0', borderBottom: `1px solid ${theme.line}`
            }}>
              {['No.', 'Product / SKU', 'Quantity', 'Format', ''].map((h, i) =>
              <div key={i} className="ae-mono" style={{ fontSize: 9.5, color: theme.muted, letterSpacing: '.16em', textTransform: 'uppercase' }}>{h}</div>
              )}
            </div>
            {items.map((it, i) =>
            <div key={it.id} style={{
              display: 'grid', gridTemplateColumns: '40px 1fr 140px 140px 32px',
              gap: 16, padding: '12px 0', borderBottom: `1px solid ${theme.lineSoft}`,
              alignItems: 'center'
            }}>
                <div className="ae-mono" style={{ fontSize: 11, color: theme.muted }}>{String(i + 1).padStart(2, '0')}</div>
                <input style={{ ...inp, borderBottom: 'none', padding: '4px 0' }} placeholder="Search a product or SKU"
              value={it.sku} onChange={(e) => setItem(it.id, 'sku', e.target.value)} />
                <input style={{ ...inp, borderBottom: 'none', padding: '4px 0' }} placeholder="0"
              value={it.qty} onChange={(e) => setItem(it.id, 'qty', e.target.value)} />
                <select style={{ ...inp, borderBottom: 'none', padding: '4px 0' }}>
                  <option>units</option><option>boxes (12)</option><option>cases</option>
                </select>
                <button type="button" onClick={() => rmItem(it.id)} className="ae-mono" style={{
                appearance: 'none', border: 0, background: 'transparent', cursor: 'pointer',
                color: theme.muted, fontSize: 14
              }}>×</button>
              </div>
            )}
          </div>
        </div>

        <div>
          <div className="ae-mono" style={{ fontSize: 10, letterSpacing: '.16em', color: theme.muted, marginBottom: 18 }}>§ 03 — SHIPPING & TERMS</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '28px 32px' }}>
            <Field label="Incoterm">
              <select style={inp}><option>EXW (Incheon)</option><option>FOB (Busan)</option><option>CIF</option><option>DDP</option></select>
            </Field>
            <Field label="Target delivery">
              <select style={inp}><option>Within 2 weeks</option><option>This month</option><option>Next quarter</option></select>
            </Field>
            <Field label="Destination port / city" span={2}><input style={inp} placeholder="Port Klang, Malaysia" /></Field>
            <Field label="Notes" span={2} hint="Volume targets, recurring orders, packaging needs.">
              <textarea style={{ ...inp, minHeight: 90, resize: 'vertical' }} placeholder="We are a 35-clinic chain looking to consolidate Korean filler supply..." />
            </Field>
          </div>
        </div>

        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
          padding: '24px 0 0', borderTop: `1px solid ${theme.line}`
        }}>
          <div className="ae-sans" style={{ fontSize: 12, color: theme.muted, maxWidth: 480 }}>
            By submitting, you agree to receive a quotation by email. We do not share
            your information with third parties.
          </div>
          <button type="submit" className="ae-sans" style={{
            appearance: 'none', border: 0, background: theme.ink, color: '#fff',
            padding: '16px 28px', fontSize: 12, fontWeight: 600, letterSpacing: '.1em',
            textTransform: 'uppercase', cursor: 'pointer'
          }}>Submit Request →</button>
        </div>
      </form>
      <FooterB theme={theme} />
    </div>);

}

// Top-level
function DirectionB({ heroVariant, copyTone }) {
  const [page, setPage] = useState('home');
  const theme = themeB;
  return (
    <div className="ae-page ae-page-b" style={{ background: theme.bg, color: theme.ink, height: '100%' }}>
      <NavB active={page} onNav={setPage} theme={theme} />
      {page === 'home' && <HomeB theme={theme} onNav={setPage} heroVariant={heroVariant} copyTone={copyTone} />}
      {page === 'product' && <ShopAllB theme={theme} onNav={setPage} />}
      {page === 'productDetail' && <ProductDetailB theme={theme} onNav={setPage} />}
      {page === 'process' && <ProcessB theme={theme} onNav={setPage} />}
      {page === 'request' && <RequestB theme={theme} />}
    </div>);

}

window.themeB = themeB;
window.DirectionB = DirectionB;