const HERO_COPY = {
  A: {
    tag: 'North American founder. On the ground in Vietnam.',
    pre: 'Soft goods,',
    mid: 'factory-direct',
    post: 'with no markup games.',
    lead: 'We design, patent, and manufacture bags, vests, and technical soft goods for founders who want transparent pricing, direct factory access, and someone who picks up the phone at 2am your time.'
  },
  B: {
    tag: 'Built in HCMC since 2018',
    pre: 'From sketch to',
    mid: 'shippable product',
    post: 'in one continuous line.',
    lead: 'Design, patent, sampling, tooling, QC, and freight. One team, one contract, no hand-offs. You get factory-floor photos every week and a line-item cost sheet on day one.'
  },
  C: {
    tag: 'Trusted by 2XSR, Bassoo, and 40+ brands',
    pre: 'A product partner',
    mid: 'without the middleman',
    post: 'tax.',
    lead: 'Most agencies add 30–60% on top of the factory. We charge a flat engagement fee and show you the actual vendor invoice. If you can read a spreadsheet, you can read our quote.'
  }
};

const Hero = ({ variant = 'A' }) => {
  const c = HERO_COPY[variant] || HERO_COPY.A;
  return (
    <section className="hero" id="top">
      <Container>
        <div className="hero__grid">
          <div>
            <div className="hero__tag">
              <span className="dot" />
              {c.tag}
            </div>
            <h1>
              {c.pre} <em>{c.mid}</em> {c.post}
            </h1>
            <p className="hero__lead">{c.lead}</p>
            <div className="hero__actions">
              <a href="#contact" className="btn btn--primary">Start a project <Arrow /></a>
              <a href="#case" className="btn btn--ghost">See the 2XSR case study</a>
            </div>
            <div className="hero__meta">
              <div><div className="k">Est.</div><div className="v">2018 · HCMC</div></div>
              <div><div className="k">Clients</div><div className="v">40+ brands</div></div>
              <div><div className="k">Avg. run</div><div className="v">500–25,000 u</div></div>
            </div>
          </div>

          <div className="hero__visual hero__visual--split">
            <div className="hero__split hero__split--top">
              <img src="assets/product-2.jpg" alt="Technical CAD drawing: modular bag design study" />
              <div className="hero__split-tag">
                <span className="dot dot--navy" /> Week 02 · CAD
              </div>
            </div>
            <div className="hero__split hero__split--bot">
              <img src="assets/product-1.jpg" alt="Finished modular pack, three views" />
              <div className="hero__split-tag">
                <span className="dot dot--orange" /> Week 36 · Shipped
              </div>
            </div>

            <div className="hero__float hero__float--side glass-strong">
              <div className="k">Same project</div>
              <div className="v">Sketch → shipped, <br/>one team, one contract.</div>
            </div>

            <div className="hero__badge">
              <span className="pip" /> Currently onboarding Q2 production
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

window.Hero = Hero;