// Wov3 — page components
// Depends on globals: PRODUCTS, FEATURES, ATHLETES, PARTNERS, CtaBanner

function SportsPage({ onNavigate }) {
  const DISCIPLINES = [
  {
    tag: "Endurance",
    title: "Marathon & Trail",
    body: "Recovery slides and post-run sandals tuned for athletes who put 80+ km a week through their feet. Reduces plantar pressure between sessions.",
    stat: "−38%",
    statLabel: "Peak plantar pressure vs. standard EVA foam"
  },
  {
    tag: "Strength",
    title: "Lifting & CrossFit",
    body: "Flat-platform recovery clogs for athletes who lift heavy and need post-session blood return. Mesh footbed activates intrinsic foot muscles.",
    stat: "12 min",
    statLabel: "Average reported time-to-relief after training"
  },
  {
    tag: "Court",
    title: "Basketball, Tennis, Padel",
    body: "Recovery insoles tuned for athletes whose sport demands lateral cutting. Custom arch profiles re-set the foot after high-load sessions.",
    stat: "1:1",
    statLabel: "Force transfer matched to your gait scan"
  },
  {
    tag: "Recovery & Wellness",
    title: "Rehab & Return-to-play",
    body: "Pieces designed alongside movement and bodywork practitioners to support the body coming back to itself — graded, gentle support across the recovery arc.",
    stat: "Phased",
    statLabel: "Graded support across each stage of return-to-play"
  }];

  const SHOWCASE = [
  {
    sku: "CUSTOM",
    title: "Custom 3D Insoles",
    kicker: "Personalized Arch Support",
    body: "Scanning captures the geometry of your foot in seconds. We model the lattice density to your gait, then print a tailored insole that adapts to your arch, balance, and force transfer needs.",
    image: "assets/custom-insole-hero.jpg",
    specs: [
    ["Material", "Custom Lattice"],
    ["Process", "3D Scan + Print"],
    ["Use", "Daily, recovery, training"]]
  },
  {
    sku: "Lab",
    title: "Co-engineered with athletes",
    body: "Every Wov3 piece for sport is tested by athletes inside our Eindhoven lab — pressure-mapped on a treadmill, force-plate measured at heel-strike, and re-tuned across multiple lattice generations before a single pair ships.",
    image: "assets/sports-orthotic.png",
    specs: [
    ["Pressure mapping", "1024-point insole sensor"],
    ["Gait capture", "240 fps multi-camera"],
    ["Lab partners", "TU/e Sports Lab · Mol PT"],
    ["Athletes onboarded", "120+ in pilot program"]]
  }];

  return (
    <main className="page-enter sports-editorial" data-screen-label="01 Home">
      {/* ===== Editorial hero — full-bleed, headline overlaid on athlete imagery ===== */}
      <section className="sports-hero">
        <div className="sports-hero-media">
          <img src="assets/athlete-bree-bates.png" alt="Bree Bates — Michigan Track" />
          <div className="sports-hero-grade"></div>
        </div>
        <div className="sports-hero-overlay container">
          <div className="sports-hero-eyebrow reveal">
            <span className="sports-hero-edition">Chapter 00</span>
            <span className="sports-hero-divider"></span>
            <span>Athlete Recovery — Spring '26</span>
          </div>
          <h1 className="sports-hero-title reveal" data-delay="1">
            Crafted by you.<br />
            <em>Personalized by movement.</em>
          </h1>
          <p className="sports-hero-sub reveal" data-delay="2">
            Wov3 is engineered around how athletes load, unload, and reset — a 3D-printed lattice
            tuned to your discipline. Built for athletes, designed for everyone who wants to protect
            their feet before pain starts.
          </p>
          <div className="sports-hero-cta reveal" data-delay="3">
            <a
              className="btn-primary"
              href="https://wov3.com/products/wv2"
              target="_blank"
              rel="noopener noreferrer"
            >
              Shop now <span aria-hidden="true">→</span>
            </a>
          </div>
          <div className="sports-hero-meta reveal" data-delay="4">
            <div><b>04</b><span>Chapters</span></div>
            <div><b>30+</b><span>Semi-pro and pro athletes onboarded</span></div>
          </div>
        </div>
      </section>

      {/* ===== Manifesto ===== */}
      <section className="container sports-manifesto">
        <div className="sports-manifesto-eyebrow reveal">A Wov3 manifesto</div>
        <p className="sports-manifesto-body reveal" data-delay="1">
          Recovery isn't downtime. It's where the next session is won. We measure how you land,
          where you load, and what your foot actually does between training blocks — then print
          the lattice to match. <em>One athlete. One geometry. One printed pair.</em>
        </p>
      </section>

      {/* ===== Chapter 01 — story split ===== */}
      <section className="sports-chapter" style={{ height: "740px" }}>
        <div className="sports-chapter-grid container">
          <div className="sports-chapter-media reveal">
            <img src="assets/athlete-cleats.png" alt="Athlete tying cleats with Wov3 recovery clogs" />
          </div>
          <div className="sports-chapter-text reveal" data-delay="1">
            <div className="sports-chapter-num">01 / Foot</div>
            <h2 className="sports-chapter-title">
              We start with the foot.<br /><em>Not the foam.</em>
            </h2>
            <p className="sports-chapter-body">
              Every Wov3 pair begins with a scan — structured light captures the geometry of your
              foot in about 2 minutes. From there, the lattice is modelled around your specific
              loading pattern, not a generic last.
            </p>
            <ul className="sports-chapter-points">
              <li>Pressure mapped on a 1,024-point insole sensor</li>
              <li>240 fps multi-camera gait capture</li>
              <li>Lattice tuned per athlete, per discipline</li>
            </ul>
          </div>
        </div>
      </section>

      {/* ===== Chapter 02 — story split, reversed ===== */}
      <section className="sports-chapter sports-chapter--reverse">
        <div className="sports-chapter-grid container">
          <div className="sports-chapter-media reveal">
            <img src="assets/athlete-insole.png" alt="Athlete with Wov3 lattice insole and recovery clogs" />
          </div>
          <div className="sports-chapter-text reveal" data-delay="1">
            <div className="sports-chapter-num">02 / Lab</div>
            <h2 className="sports-chapter-title">
              Miles before a single<br /><em>pair ships.</em>
            </h2>
            <p className="sports-chapter-body">
              Every Wov3 piece is tested by athletes inside our lab — pressure-mapped on
              a treadmill, force-plate measured at heel-strike, and re-tuned across multiple
              lattice generations before it ever leaves the studio.
            </p>
            <ul className="sports-chapter-points">
              <li>30+ athletes in pilot program</li>
              <li>Co-developed with TU/e Sports Lab and Mol PT</li>
            </ul>
            <div className="sports-chapter-cta">
              <a
                className="btn-primary"
                href="https://wov3.com/products/wv2"
                target="_blank"
                rel="noopener noreferrer"
              >
                Shop now <span aria-hidden="true">→</span>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ===== Chapter 03 — full-bleed quote over image ===== */}
      <section className="sports-quote">
        <div className="sports-quote-media">
          <img src="assets/athlete-ethan-edwards.jpg" alt="Ethan Edwards — Michigan Ice Hockey" />
          <div className="sports-quote-grade"></div>
        </div>
        <div className="sports-quote-content container">
          <div className="sports-quote-num">03 / Field</div>
          <blockquote className="sports-quote-text">
            "As a hockey player, my feet take a beating, so finding a comfortable recovery slide is huge.
            <em> The WV-1 molds to my feet perfectly</em> — giving me the support and cushioning I need to recover after a long day on the ice."
          </blockquote>
          <div className="sports-quote-attrib">
            — Ethan Edwards · Michigan Ice Hockey
          </div>
        </div>
      </section>

      {/* ===== Athlete testimonials ===== */}
      <section className="container section athletes-section">
        <div className="section-head reveal">
          <div className="sports-section-num">04 / Voices</div>
          <h2 className="section-title">What athletes <em>are saying.</em></h2>
          <p className="section-kicker">
            From Notre Dame to Michigan — six athletes on what Wov3 changed about their recovery.
          </p>
        </div>
        <div className="athletes-grid">
          {ATHLETES.map((a, i) =>
          <article key={a.name} className="athlete-card reveal" data-delay={i % 3 + 1}>
              <div className="athlete-card-media">
                <img src={a.image} alt={a.name} loading="lazy" />
                <div className="athlete-card-id">
                  <div className="athlete-card-name">{a.name}</div>
                  <div className="athlete-card-team">{a.team}</div>
                </div>
              </div>
              <div className="athlete-card-body">
                <div className="athlete-card-quote-mark">"</div>
                <p className="athlete-card-quote">{a.quote}</p>
              </div>
            </article>
          )}
        </div>
      </section>

      {/* ===== Product showcase ===== */}
      <section className="container">
        <article className="product-detail">
            <div className="product-detail-media reveal" style={{ aspectRatio: "4/3" }}>
              <img src={SHOWCASE[0].image} alt={SHOWCASE[0].title} loading="lazy" />
            </div>
            <div className="reveal" data-delay="1">
              <div className="product-detail-sku">{SHOWCASE[0].sku}</div>
              <h2 className="product-detail-title">
                Custom 3D <em>Insoles</em>
              </h2>
              {SHOWCASE[0].kicker && (
                <div className="product-detail-kicker">{SHOWCASE[0].kicker}</div>
              )}
              <p className="product-detail-body">{SHOWCASE[0].body}</p>
              <ul className="spec-list">
                {SHOWCASE[0].specs.map(([k, v]) =>
              <li key={k}><b>{k}</b><span>{v}</span></li>
              )}
              </ul>
              <a className="btn-primary" href="https://wov3.com/products/custom-insoles" target="_blank" rel="noopener noreferrer">
                Shop now <span aria-hidden="true">→</span>
              </a>
            </div>
          </article>
      </section>

      {/* Partners strip */}
      <section className="container partners-section">
        <div className="partners-eyebrow reveal">Partner with</div>
        <div className="partners-row reveal" data-delay="1">
          {[0, 1].map((dup) =>
          <div key={dup} className="partners-track" aria-hidden={dup === 1}>
              {PARTNERS.map((p, i) =>
            <figure key={`${dup}-${i}`} className="partner-item">
              <img src={p.src} alt={dup === 0 ? p.name : ""} loading="lazy" />
              <figcaption className="partner-name">{p.name}</figcaption>
            </figure>
            )}
            </div>
          )}
        </div>
      </section>

      {/* FAQ */}
      <section className="container section faq-section">
        <div className="section-head reveal">
          <h2 className="section-title">Frequently asked <em>questions.</em></h2>
          <p className="section-kicker">
            A few of the things people ask before their first pair. Have something else? Reach out.
          </p>
        </div>
        <div className="faq-list">
          {[
          {
            q: "What makes Wov3 different from regular footwear?",
            a: "Wov3 footwear uses advanced 3D-printed lattice structures engineered for pressure distribution, breathability, and recovery-focused comfort."
          },
          {
            q: "Are the insoles customized?",
            a: "Yes. We create custom insoles based on your arch profile and biomechanical needs — including flat feet, forefoot discomfort, and alignment support."
          },
          {
            q: "What are the Massage Clogs designed for?",
            a: "The WV-3 Massage Clogs feature acupressure-inspired nodes intended to stimulate pressure points associated with recovery and relaxation."
          },
          {
            q: "Who are Wov3 products designed for?",
            a: "Athletes, healthcare workers, creators, professionals, and anyone spending long hours on their feet seeking advanced recovery support."
          }].
          map((item, i) =>
          <details key={item.q} className="faq-item reveal" data-delay={i % 3 + 1} open={i === 0}>
              <summary className="faq-q">
                <span className="faq-num">0{i + 1}</span>
                <span className="faq-q-text">{item.q}</span>
                <span className="faq-icon" aria-hidden="true">
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M5 8l5 5 5-5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </span>
              </summary>
              <div className="faq-a">{item.a}</div>
            </details>
          )}
        </div>
      </section>

      <div className="container"><CtaBanner onNavigate={onNavigate} /></div>
    </main>);

}

function CollectionPage({ onNavigate }) {
  return (
    <main className="page-enter" data-screen-label="02 Collection">
      <section className="container page-head">
        <div className="page-head-eyebrow reveal">The Wov3 Recovery Collection</div>
        <h1 className="page-head-title reveal" data-delay="1">
          Four pieces.<br />One <em>recovery system.</em>
        </h1>
        <p className="page-head-sub reveal" data-delay="2">
          Every Wov3 piece pairs a tuned 3D-printed lattice with a specific stage of the recovery
          arc — from immediate post-training relief to all-day support and acupressure-driven
          downtime.
        </p>
      </section>

      <section className="container">
        {PRODUCTS.map((p) =>
        <article key={p.sku} className="product-detail">
            <div className="product-detail-media reveal">
              {p.gallery && p.gallery.length > 1
                ? <ProductGallery images={p.gallery} alt={p.skuLabel} />
                : <img src={p.image} alt={p.skuLabel} loading="lazy" />}
            </div>
            <div className="reveal" data-delay="1">
              <div className="product-detail-sku">{p.sku} · {p.skuLabel.replace(`${p.sku} `, "")}</div>
              <h2 className="product-detail-title">
                {p.name.split(" ").slice(0, -1).join(" ")}{" "}
                <em>{p.name.split(" ").slice(-1)[0]}</em>
              </h2>
              <p className="product-detail-body">{p.long}</p>
              <ul className="spec-list">
                {p.specs.map(([k, v]) =>
              <li key={k}><b>{k}</b><span>{v}</span></li>
              )}
              </ul>
              <button className="btn-primary" onClick={() => p.shopUrl ? window.open(p.shopUrl, "_blank", "noopener") : window.openCalendly()}>
                {p.shopUrl ? "Shop this piece" : "Request this piece"} <span aria-hidden="true">→</span>
              </button>
            </div>
          </article>
        )}
      </section>

      <div className="container"><CtaBanner onNavigate={onNavigate} /></div>
    </main>);

}

function ContactPage({ onNavigate }) {
  const [form, setForm] = React.useState({ name: "", email: "", interest: "WV-1 Recovery Slides", message: "" });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = "Required";
    if (!form.email.trim()) errs.email = "Required";else
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = "Enter a valid email";
    if (!form.message.trim()) errs.message = "Tell us a bit about your fit";
    setErrors(errs);
    if (Object.keys(errs).length === 0) setSent(true);
  };

  return (
    <main className="page-enter" data-screen-label="04 Contact">
      <section className="container page-head">
        <div className="page-head-eyebrow reveal">Contact</div>
        <h1 className="page-head-title reveal" data-delay="1">
          Let's get you <em>fitted.</em>
        </h1>
        <p className="page-head-sub reveal" data-delay="2">
          Tell us a bit about how you move, and we'll route you to the right piece — or book you a
          slot at our Hacker Dojo scan studio for a full scan.
        </p>
      </section>

      <section className="container contact-grid">
        <div className="contact-info reveal">
          <div className="contact-block contact-block-cta">
            <h4>Book a fitting</h4>
            <p>Pick a time at our Hacker Dojo scan studio — scan, model, and print in under a week.</p>
            <button className="btn-primary contact-calendly-btn" onClick={() => window.openCalendly()}>
              Open Calendly <span aria-hidden="true">→</span>
            </button>
          </div>
          <div className="contact-block contact-block-partner">
            <h4>Now scanning @ Hacker Dojo</h4>
            <p>
              We're officially partnering with <b>Hacker Dojo</b>, one of the longest-running builder communities in Silicon Valley. Our foot scanner is now on-site — walk in, get a precision foot scan, and get matched to a Wov3 recovery slide engineered for your specific pressure profile.
            </p>
          </div>
          <div className="contact-block">
            <h4>Scan studio</h4>
            <p>Hacker Dojo<br />855 Maude Ave<br />Mountain View, CA 94043</p>
          </div>
          <div className="contact-block">
            <h4>Hours</h4>
            <p>Mon — Fri · 09:00 – 18:00</p>
          </div>
          <div className="contact-block">
            <h4>Email</h4>
            <p><a href="mailto:Lhu@wov3.com">Lhu@wov3.com</a></p>
          </div>
        </div>

        <div className="reveal" data-delay="1">
          {sent ?
          <div className="form-success">
              <h3>Thanks, {form.name.split(" ")[0]}.</h3>
              <p>We'll be in touch within one working day about your {form.interest}.</p>
              <button className="btn-ghost" style={{ marginTop: 16 }} onClick={() => {setSent(false);setForm({ name: "", email: "", interest: "WV-1 Recovery Slides", message: "" });}}>
                Send another
              </button>
            </div> :
          <form className="form" onSubmit={submit} noValidate>
              <div className="field">
                <label htmlFor="name">Name</label>
                <input id="name" type="text" value={form.name} onChange={set("name")} placeholder="Lina van Berg" />
                <div className="err">{errors.name || "\u00a0"}</div>
              </div>
              <div className="field">
                <label htmlFor="email">Email</label>
                <input id="email" type="email" value={form.email} onChange={set("email")} placeholder="you@studio.com" />
                <div className="err">{errors.email || "\u00a0"}</div>
              </div>
              <div className="field">
                <label htmlFor="interest">Interested in</label>
                <select id="interest" value={form.interest} onChange={set("interest")}>
                  {PRODUCTS.map((p) => <option key={p.sku}>{p.skuLabel}</option>)}
                  <option>Studio fitting</option>
                  <option>Team / wellness partnership</option>
                </select>
                <div className="err">&nbsp;</div>
              </div>
              <div className="field">
                <label htmlFor="message">A little about your fit</label>
                <textarea id="message" value={form.message} onChange={set("message")} placeholder="Sport, current shoes, anything we should know about your gait or pressure points…" />
                <div className="err">{errors.message || "\u00a0"}</div>
              </div>
              <button className="btn-primary" type="submit" style={{ alignSelf: "start" }}>
                Send request <span aria-hidden="true">→</span>
              </button>
            </form>
          }
        </div>
      </section>
    </main>);

}

// =====================================================================
// Technology / Orthotics page
// =====================================================================

const PAIN_CONDITIONS = [
{
  id: "plantar",
  region: "Heel & arch",
  title: "Plantar Fasciitis",
  one: "Sharp heel pain on the first steps of the day.",
  symptoms: [
  "Stabbing pain near the heel when you get out of bed",
  "A dull ache that returns after long periods of standing",
  "Tenderness along the inside arch when you press"],

  cause: "The plantar fascia — a fan of tissue running from heel to toes — has been carrying more load than it can spread, so it's inflamed and asking for help.",
  helps: [
  "A custom arch cradle scanned to your foot's exact contour",
  "Heel-strike pressure dispersed across thousands of micro-cells",
  "A subtle heel cup that quietens the morning flare"],

  image: "assets/custom-insole-arch.png",
  body: { x: 116, y: 220, view: "sole" },
  deepDive: {
    heading: "What is Plantar Fasciitis?",
    subhead: "The Mechanics of the Injury",
    intro: [
      "Plantar Fasciitis (M72.2) is the inflammation of the thick band of tissue (the plantar fascia) that connects your heel bone to your toes. It acts as a shock absorber for the arch of your foot.",
      "When the tension on this bowstring becomes too great — often due to flat feet or high arches — small micro-tears occur in the fascia. The body's inflammatory response to these tears causes the sharp pain you feel."
    ],
    commonSymptoms: [
      "Post-static dyskinesia: sharp, stabbing pain with the first few steps in the morning.",
      "Pain that subsides after moving around, but returns after long periods of standing.",
      "Tenderness directly at the bottom of the heel bone.",
      "Swelling or redness around the heel; in some cases a visible bony protrusion (heel spur)."
    ],
    treatmentHeading: "Why Orthotics Are The Primary Treatment",
    treatmentSubhead: "The goal of treatment is to Cushion and Correct.",
    treatmentBody: "Custom orthotics provide a deep heel cup that gathers the natural fat pad of your heel to provide shock absorption. Simultaneously, they support the arch to stop the ligament from pulling on the bone, allowing the inflammation to subside."
  }
},
{
  id: "metatarsalgia",
  region: "Ball of foot",
  title: "Metatarsalgia Pain",
  one: "A burning ache across the ball of your foot that worsens under weight.",
  symptoms: [
  "Sharp or burning pain in the ball of your foot",
  "Numbness or tingling in your toes",
  "Feeling like you're walking on a pebble"],

  cause: "The metatarsal heads are carrying too much impact and not enough cushioning — often from shoes that don't distribute load well or high-impact activity.",
  helps: [
  "A metatarsal dome positioned just behind the heads to offload pressure",
  "Lattice density tuned softer under the forefoot",
  "Pressure-map verified before you walk out"],

  image: "assets/cond-metatarsalgia.jpg",
  body: { x: 122, y: 87, view: "sole" },
  deepDive: {
    heading: "What is Metatarsalgia?",
    subhead: "The Pathomechanics of Forefoot Pain",
    intro: [
      "Metatarsalgia is a condition characterized by pain and inflammation in the ball of the foot (the metatarsal heads). It is often caused by an uneven distribution of weight across the forefoot.",
      "Factors like thinning fat pads (atrophy), high arches, or dropped metatarsal bones focus excessive pressure on one or more of the small toe joints. This repetitive impact causes deep bruising, inflammation, and sometimes nerve irritation."
    ],
    commonSymptoms: [
      "Burning or sharp pain in the ball of the foot.",
      "Feeling like you are walking on a pebble or a folded sock.",
      "Numbness or tingling in the toes.",
      "Callus formation under the metatarsal heads."
    ],
    treatmentHeading: "Why Orthotics Are The Primary Treatment",
    treatmentSubhead: "The goal of treatment is to Off-Load and Redistribute Pressure.",
    treatmentBody: "Custom orthotics use a metatarsal pad or bar positioned just behind the ball of the foot. This lifts and separates the metatarsal bones, restoring the natural transverse arch. By shifting weight away from the painful bony heads and onto the shaft of the bone, relief is often immediate."
  }
},
{
  id: "achilles",
  region: "Ankle & Achilles",
  title: "Achilles Tendinitis",
  one: "Dull or sharp pain along the back of your heel and lower calf.",
  symptoms: [
  "Pain along the Achilles tendon, especially in the morning",
  "Stiffness that eases as you warm up",
  "Swelling or tenderness at the heel attachment"],

  cause: "The Achilles is chronically overloaded — from training, gait asymmetry, or shoes that don't support the ankle-heel transition properly.",
  helps: [
  "A subtle heel lift that reduces Achilles strain",
  "Rear-foot geometry that encourages a neutral ankle position",
  "Lattice tuned to absorb heel-strike shock"],

  image: "assets/cond-achilles.png",
  body: { x: 276, y: 116, view: "side" },
  deepDive: {
    heading: "What is Achilles Tendonitis?",
    subhead: "The Mechanics of Tendon Strain",
    intro: [
      "Achilles Tendonitis is an overuse injury of the Achilles tendon, the band of tissue that connects the calf muscles at the back of the lower leg to your heel bone.",
      "It most commonly occurs in runners who have suddenly increased the intensity or duration of their runs. It's also common in middle-aged people who play sports — like tennis or basketball — only on the weekends."
    ],
    commonSymptoms: [
      "Mild ache in the back of the leg or above the heel after running or other sports activity.",
      "Episodes of more severe pain after prolonged running or stair climbing.",
      "Tenderness or stiffness, especially in the morning, which usually improves with mild activity."
    ],
    treatmentHeading: "Why Orthotics Are The Primary Treatment",
    treatmentSubhead: "The goal of treatment is to Reduce Tension.",
    treatmentBody: "Custom orthotics provide a heel lift to shorten the tendon-muscle unit, reducing strain. They also correct overpronation (inward rolling), which causes a twisting motion in the tendon that leads to micro-tears."
  }
},
{
  id: "flat-feet",
  region: "Arch collapse",
  title: "Flat Feet Support",
  one: "Arches that have collapsed or never developed, leaving your foot rolling inward.",
  symptoms: [
  "Feet that tire quickly when standing or walking",
  "Visible arch collapse when bearing weight",
  "Knee, hip, or lower back pain from misalignment"],

  cause: "Your arches aren't providing the spring and structure they're meant to. That load transfers up the chain — ankles, knees, hips.",
  helps: [
  "A scanned arch support that matches your foot's exact contour",
  "Medial posting to resist over-pronation",
  "Lattice density graded across heel, arch, and forefoot"],

  image: "assets/cond-flat-feet.jpg",
  body: { x: 136, y: 142, view: "sole" },
  deepDive: {
    heading: "What are Flat Feet?",
    subhead: "The Mechanics of Fallen Arches",
    intro: [
      "Flat Feet (Pes Planus) occur when the tendons in your foot do not pull together properly to create or maintain an arch. This structural collapse forces your ankle to roll inward (overpronation) with every step.",
      "This misalignment doesn't just affect your feet; it creates a chain reaction of stress that travels up to your shins, knees, and hips."
    ],
    commonSymptoms: [
      "Tired, aching feet after prolonged standing.",
      "Pain in the arch or heel area.",
      "Swelling along the inside of the ankle.",
      "Shin splints or knee pain due to misalignment."
    ],
    treatmentHeading: "Why Orthotics Are The Primary Treatment",
    treatmentSubhead: "The goal of treatment is to Support and Align.",
    treatmentBody: "Custom orthotics provide a semi-rigid scaffold for your foot. They physically lift the arch structure back to its neutral position and use a deep heel cup to prevent the ankle from rolling inward, stopping the pain at its source."
  }
},
{
  id: "high-arch",
  region: "High arch",
  title: "High Arch Pain",
  one: "An exaggerated arch that doesn't flex, leaving pressure concentrated at heel and ball.",
  symptoms: [
  "Pain under the ball of the foot and heel",
  "Calluses on the heel, ball, or side of the foot",
  "Ankle instability or frequent rolling"],

  cause: "A rigid high arch doesn't absorb shock the way a flexible one does. Pressure lands on the extremes — heel and forefoot — instead of spreading.",
  helps: [
  "A contoured arch fill that supports without forcing the foot flat",
  "Cushioning concentrated under heel and metatarsal heads",
  "Lateral stability features to reduce ankle roll"],

  image: "assets/cond-high-arch.jpg",
  body: { x: 119, y: 119, view: "sole" },
  deepDive: {
    heading: "What are High Arches?",
    subhead: "The Mechanics of Pes Cavus",
    intro: [
      "High arches (Pes Cavus) are the opposite of flat feet. The arch is elevated, making the foot rigid and less able to absorb shock. Because the arch doesn't flatten to dissipate impact, force is concentrated on the heel and the ball of the foot.",
      "This rigidity often causes the foot to roll outward (supination), increasing the risk of ankle sprains, stress fractures, and tendonitis on the outside of the leg."
    ],
    commonSymptoms: [
      "Pain in the heel and ball of the foot (metatarsalgia).",
      "Frequent ankle sprains or feeling unstable.",
      "Claw toes or hammertoes due to tendon imbalance.",
      "Calluses on the outer edge of the foot."
    ],
    treatmentHeading: "Why Orthotics Are The Primary Treatment",
    treatmentSubhead: "The goal of treatment is to Fill the Void.",
    treatmentBody: "Because high arches don't make full contact with the ground, standard insoles leave a gap. Custom orthotics are molded to meet your high arch, increasing the surface area for weight distribution. This instantly relieves pressure points and provides the shock absorption your feet lack naturally."
  }
},
{
  id: "bunion",
  region: "Big toe joint",
  title: "Bunion Discomfort",
  one: "A bony bump at the base of your big toe that rubs and aches in shoes.",
  symptoms: [
  "Visible bump on the inside edge of your foot",
  "Big toe angling toward the other toes",
  "Pain, redness, or swelling around the joint"],

  cause: "The first metatarsal has shifted outward, often from years of tight shoes, gait imbalance, or genetic foot structure.",
  helps: [
  "A wider toe-box geometry that doesn't compress the bunion",
  "Metatarsal support to correct weight distribution",
  "Soft lattice around the medial edge to eliminate rubbing"],

  image: "assets/cond-bunion.jpg",
  body: { x: 127, y: 58, view: "sole" },
  deepDive: {
    heading: "What is a Bunion?",
    subhead: "The Mechanics of Hallux Valgus",
    intro: [
      "A bunion (Hallux Valgus) is a deformity where the first metatarsal bone drifts outward, causing the big toe to lean inward toward the other toes. This creates the characteristic \"bump\" on the side of the foot.",
      "While footwear can aggravate it, the primary cause is often biomechanical instability — specifically overpronation. When the arch collapses, it unlocks the first ray of the foot, allowing the bone to drift."
    ],
    commonSymptoms: [
      "A visible bump on the inside of the foot at the big toe joint.",
      "Swelling, redness, or soreness around the big toe joint.",
      "Corns or calluses where the first and second toes overlap.",
      "Pain that is worse when wearing tight shoes."
    ],
    treatmentHeading: "Why Orthotics Are The Primary Treatment",
    treatmentSubhead: "The goal of treatment is to Stop Progression.",
    treatmentBody: "Orthotics cannot \"erase\" the bone growth, but they can stop it from getting worse. By stabilizing the arch and correcting pronation, custom orthotics remove the deforming force on the big toe joint. This relieves pain and can prevent the need for surgery."
  }
},
{
  id: "it-band",
  region: "Knee & hip",
  title: "IT Band Syndrome",
  one: "A sharp or burning pain on the outside of your knee, often triggered by running or stairs.",
  symptoms: [
  "Pain on the outer side of the knee during activity",
  "Tightness or aching along the outside of the thigh",
  "Symptoms that worsen with repetitive motion"],

  cause: "The iliotibial band is pulling too tight, often because your foot isn't absorbing impact properly — so the knee compensates.",
  helps: [
  "Arch support that prevents excessive pronation",
  "Heel geometry that encourages a neutral foot strike",
  "Pressure distribution that reduces load transfer up the kinetic chain"],

  image: "assets/cond-it-band.jpg",
  body: { x: 264, y: 84, view: "side" },
  deepDive: {
    heading: "What is Supination?",
    subhead: "The Mechanics of Outward Rolling",
    intro: [
      "Supination (or underpronation) occurs when the weight rolls onto the outer edges of your feet. This is typically caused by having High Arches (Pes Cavus), which are rigid and lack natural shock absorption.",
      "Because the foot doesn't roll inward enough to absorb impact, the shock is transmitted directly up the leg to the knees, hips, and back. This misalignment also puts you at high risk for ankle inversion sprains — and is the most common driver of IT Band pain."
    ],
    commonSymptoms: [
      "Wear patterns on the outer edge of your shoes.",
      "Frequent ankle sprains or feeling of instability.",
      "Pain on the outside of the shin (shin splints) or knee (IT Band).",
      "Calluses on the outer edge of the foot."
    ],
    treatmentHeading: "Why Orthotics Are The Primary Treatment",
    treatmentSubhead: "The goal of treatment is Stability and Shock Absorption.",
    treatmentBody: "Custom orthotics use a lateral wedge (posting) to gently tilt the foot inward to a neutral position. They also fill the high arch cavity to increase the contact area, distributing pressure evenly and providing the shock absorption your foot lacks naturally."
  }
}];


// ============================================================
// ConditionsPage — extracted from Technology. Houses the
// interactive foot-map selector, the per-condition detail panel,
// and the long-form deep-dive content.
// ============================================================
function ConditionsPage({ onNavigate }) {
  const [activeId, setActiveId] = React.useState(PAIN_CONDITIONS[0].id);
  const active = PAIN_CONDITIONS.find((p) => p.id === activeId) || PAIN_CONDITIONS[0];
  const detailRef = React.useRef(null);

  const select = (id, scroll = false) => {
    setActiveId(id);
    if (scroll && detailRef.current) {
      const el = detailRef.current;
      window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" });
    }
  };

  return (
    <main className="page-enter" data-screen-label="Conditions">
      <section className="container page-head ortho-head">
        <div className="page-head-eyebrow reveal">
          <button className="ortho-breadcrumb" onClick={() => onNavigate("blog")}>← Blog</button>
          <span className="ortho-breadcrumb-sep">/</span>
          <span>Educational resources · Foot health</span>
        </div>
        <h1 className="page-head-title reveal" data-delay="1">
          Understand <em>your feet.</em>
        </h1>
        <p className="page-head-sub reveal" data-delay="2">
          A plain-language library of the seven conditions we see most often in the studio.
          Tap a region of the foot, or pick a condition from the list — each one explains what
          you might be feeling, what's actually going on biomechanically, and how a custom
          lattice typically helps.
        </p>
      </section>

      {/* ===== Pain selector ===== */}
      <section className="container ortho-selector">
        <div className="ortho-selector-grid">
          <div className="ortho-body reveal">
            <svg viewBox="0 0 460 345" className="ortho-body-svg" aria-label="Foot anatomy diagram">
              <image
                href="assets/foot-map.jpg"
                x="0" y="0" width="460" height="345"
                preserveAspectRatio="xMidYMid slice"
              />
              {PAIN_CONDITIONS.map((p, i) => {
                const cx = p.body.x;
                const cy = p.body.y;
                const isActive = p.id === activeId;
                return (
                  <g key={p.id} className={"ortho-hotspot " + (isActive ? "is-active" : "")} onClick={() => select(p.id, true)} style={{ cursor: "pointer" }}>
                    <circle cx={cx} cy={cy} r={isActive ? 16 : 12} className="ortho-hotspot-pulse" />
                    <circle cx={cx} cy={cy} r="7" className="ortho-hotspot-dot" />
                    <text x={cx} y={cy + 3.5} textAnchor="middle" fontSize="9" fontWeight="700" className="ortho-hotspot-num">{i + 1}</text>
                  </g>);
              })}
            </svg>
            <div className="ortho-body-caption">
              <span>Tap a region</span>
              <span className="ortho-body-caption-divider"></span>
              <span>{PAIN_CONDITIONS.length} conditions mapped</span>
            </div>
          </div>

          <div className="ortho-list reveal" data-delay="1">
            {PAIN_CONDITIONS.map((p, i) =>
              <button
                key={p.id}
                className={"ortho-list-item " + (p.id === activeId ? "is-active" : "")}
                onClick={() => select(p.id, true)}
                aria-pressed={p.id === activeId}>
                <span className="ortho-list-num">{String(i + 1).padStart(2, "0")}</span>
                <span className="ortho-list-text">
                  <span className="ortho-list-title">{p.title}</span>
                  <span className="ortho-list-region">{p.region}</span>
                </span>
                <span className="ortho-list-arrow" aria-hidden="true">→</span>
              </button>
            )}
          </div>
        </div>
      </section>

      {/* ===== Pain detail panel ===== */}
      <section className="container ortho-detail-wrap" ref={detailRef}>
        <article key={active.id} className="ortho-detail">
          <div className="ortho-detail-media">
            <img src={active.image} alt={active.title} loading="lazy" />
            <div className="ortho-detail-region">
              <span className="dot"></span>
              <span>{active.region}</span>
            </div>
          </div>

          <div className="ortho-detail-body">
            <div className="ortho-detail-eyebrow">Condition · {String(PAIN_CONDITIONS.findIndex((p) => p.id === active.id) + 1).padStart(2, "0")} / {String(PAIN_CONDITIONS.length).padStart(2, "0")}</div>
            <h3 className="ortho-detail-title">
              {active.title.split(" ").slice(0, -1).join(" ")} <em>{active.title.split(" ").slice(-1)[0]}</em>
            </h3>
            <p className="ortho-detail-lead">{active.one}</p>

            <div className="ortho-detail-grid">
              <div className="ortho-detail-block">
                <div className="ortho-detail-block-label">What you might feel</div>
                <ul>
                  {active.symptoms.map((s) => <li key={s}>{s}</li>)}
                </ul>
              </div>
              <div className="ortho-detail-block">
                <div className="ortho-detail-block-label">What's actually going on</div>
                <p>{active.cause}</p>
              </div>
              <div className="ortho-detail-block ortho-detail-block-help">
                <div className="ortho-detail-block-label">What we'd build for you</div>
                <ul>
                  {active.helps.map((h) => <li key={h}>{h}</li>)}
                </ul>
              </div>
            </div>
          </div>
        </article>
      </section>

      {/* ===== Deep dive ===== */}
      {active.deepDive && (
        <section className="container ortho-deepdive" key={active.id + "-deep"}>
          <div className="ortho-deepdive-grid">
            <div className="ortho-deepdive-col">
              <div className="ortho-section-num">{active.region}</div>
              <h2 className="section-title">{active.deepDive.heading}</h2>
              <p className="ortho-deepdive-sub">{active.deepDive.subhead}</p>
              {active.deepDive.intro.map((p, i) => (
                <p className="ortho-deepdive-body" key={i}>{p}</p>
              ))}
              <h3 className="ortho-deepdive-h3">Common Symptoms:</h3>
              <ul className="ortho-deepdive-list">
                {active.deepDive.commonSymptoms.map((s) => <li key={s}>{s}</li>)}
              </ul>
            </div>
            <div className="ortho-deepdive-col ortho-deepdive-treatment">
              <div className="ortho-section-num">Treatment</div>
              <h2 className="section-title">{active.deepDive.treatmentHeading}</h2>
              <p className="ortho-deepdive-sub">{active.deepDive.treatmentSubhead}</p>
              <p className="ortho-deepdive-body">{active.deepDive.treatmentBody}</p>
              <div className="ortho-detail-cta" style={{ marginTop: "32px" }}>
                <button className="btn-primary" onClick={() => window.openCalendly()}>
                  Book a free consultation <span aria-hidden="true">→</span>
                </button>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* ===== Back to Technology CTA ===== */}
      <section className="container section ortho-conditions-footer">
        <div className="ortho-conditions-footer-inner reveal">
          <div className="ortho-section-num">Next</div>
          <h2 className="section-title">See how we <em>build it.</em></h2>
          <p className="section-kicker">
            Every condition above maps back to the same scan-to-print process — tuned to your foot, your gait,
            and the geometry that's causing the strain.
          </p>
          <div className="ortho-conditions-cta-actions">
            <button className="btn-primary" onClick={() => onNavigate("technology")}>
              See the technology <span aria-hidden="true">→</span>
            </button>
            <button className="btn-ghost" onClick={() => onNavigate("contact")}>
              Book a scan
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

function TechnologyPage({ onNavigate }) {
  return (
    <main className="page-enter" data-screen-label="03 Technology">
      {/* Hero — moved from Home, sets the Technology story */}
      <section className="hero hero--full">
        <div className="hero-bg">
          <img src="assets/home-hero.png" alt="Wov3 lattice structure" />
          <div className="hero-bg-grade"></div>
        </div>
        <div className="container hero-overlay">
          <div className="eyebrow reveal">Chapter 00 · Technology — Spring '26</div>
          <h1 className="hero-title reveal" data-delay="1">
            Footwear<br />that helps you <em>recover.</em>
          </h1>
          <p className="hero-sub reveal" data-delay="2">
            3D-printed lattice geometry, tuned to your gait, your scan, and your loading pattern.
          </p>
          <div className="hero-ctas reveal" data-delay="3">
            <button className="btn-primary" onClick={() => onNavigate("collection")}>
              Explore the collection <span aria-hidden="true">→</span>
            </button>
            <button className="btn-ghost" onClick={() => onNavigate("contact")}>
              Book a scan
            </button>
          </div>
          <div className="hero-meta hero-meta-centered reveal" data-delay="4">
            <div className="hero-meta-item">
              <div className="num">14<em>k</em></div>
              <div className="lbl">Micro-support points per pair</div>
            </div>
            <div className="hero-meta-item">
              <div className="num">100<em>%</em></div>
              <div className="lbl">Recyclable lattice TPU</div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== Manifesto pause — bone, serif italic, one breath ===== */}
      <section className="tech-manifesto">
        <div className="container">
          <p className="tech-manifesto-text reveal">
            Every Wov3 piece is a calculation. <em>Every step, data returned.</em>
          </p>
        </div>
      </section>

      <section className="container page-head ortho-head ortho-head--compact">
        <div className="page-head-eyebrow reveal">Technology · Custom Orthotics</div>
        <h2 className="page-head-title reveal page-head-title--md" data-delay="1">
          A lattice tuned to <em>where it hurts.</em>
        </h2>
        <p className="page-head-sub reveal" data-delay="2">
          Parametric geometry tuned to your scan and your gait — the same technology behind every Wov3 piece, dialed in foot by foot.
        </p>
        <div className="ortho-head-meta reveal" data-delay="3">
          <div className="ortho-head-meta-item">
            <div className="num">2 <em>mins</em></div>
            <div className="lbl">3D scan capture</div>
          </div>
          <div className="ortho-head-meta-item">
            <div className="num">7 <em>regions</em></div>
            <div className="lbl">Tuned per scan</div>
          </div>
        </div>
      </section>

      {/* ===== Educational resource CTA (full content lives under Blog → Conditions) ===== */}
      <section className="container ortho-conditions-cta">
        <div className="ortho-conditions-cta-inner reveal">
          <div className="ortho-section-num">Educational resource · Foot health</div>
          <h2 className="ortho-section-title">A quick map of <em>what your feet are saying.</em></h2>
          <p className="ortho-section-kicker">
            Seven conditions, mapped to the lattice we'd typically build. Plain language, written by the people who build it.
          </p>
          <div className="ortho-conditions-cta-actions">
            <button className="btn-primary" onClick={() => onNavigate("conditions")}>
              Read the foot-health guide <span aria-hidden="true">→</span>
            </button>
            <span className="ortho-conditions-cta-meta">{PAIN_CONDITIONS.length} conditions explained</span>
          </div>
        </div>
      </section>

      {/* ===== Why store-bought insoles fail ===== */}
      <section className="container section ortho-fail-section">
        <div className="section-head reveal">
          <div className="ortho-section-num">01 / Why generic fails</div>
          <h2 className="section-title">
            Generic insoles, <em>mass produced.</em>
          </h2>
          <p className="section-kicker">
            Drug-store inserts cushion the symptom. They don't fix the geometry.
          </p>
        </div>
        <div className="ortho-fail-grid">
          {[
            {
              n: "01",
              title: "Too soft to correct",
              body: "Foam compresses under body weight — the arch keeps collapsing."
            },
            {
              n: "02",
              title: 'Generic "guess" fit',
              body: "One-size arch placement rarely matches your anatomical bridge."
            },
            {
              n: "03",
              title: "Temporary band-aid",
              body: "Cushions the feel. Doesn't change the biomechanics."
            }
          ].map((c) => (
            <div className="ortho-fail-card reveal" key={c.n}>
              <div className="ortho-fail-num">{c.n}</div>
              <h3 className="ortho-fail-title">{c.title}</h3>
              <p className="ortho-fail-body">{c.body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ===== The Fitting — 4-step Wov3 Lab module (Problem → Lattice → Biomechanics → Solution) ===== */}
      <section className="ortho-process-section ortho-process-section--dark">
        <div className="container section">
          <div className="section-head reveal">
            <div className="ortho-section-num">02 / The fitting</div>
            <h2 className="section-title">From foam to <em>your foot.</em></h2>
            <p className="section-kicker">
              The four steps every Wov3 piece moves through — same arc as the Wov3 Lab.
            </p>
          </div>
          <div className="ortho-fitting-grid">
            {[
              {
                n: "01",
                eyebrow: "The Problem",
                title: "Foam wasn't designed for recovery.",
                body: "Compresses under load. Traps heat. Loses up to 50% of its rebound in six months. The foot is doing the work the shoe should be doing.",
                image: "assets/foam-insole.jpg",
              },
              {
                n: "02",
                eyebrow: "The Lattice",
                title: "Open-cell TPU lattice. Always returns.",
                body: "14,000+ tuned micro-cells per pair. Airflow runs through the sole the way it runs through mesh. Bounce-back holds for thousands of miles.",
                image: "assets/lattice-3d-print.png",
              },
              {
                n: "03",
                eyebrow: "The Biomechanics",
                title: "Pressure distributed, not absorbed.",
                body: "Each step spreads across thousands of micro-cells instead of one flat foam slab. −38% peak plantar pressure vs. standard EVA in lab testing.",
                image: "assets/wov3-insole-biomechanics.png",
              },
              {
                n: "04",
                eyebrow: "The Solution",
                title: "Custom 3D Insoles.",
                body: "A custom-printed lattice orthotic — scanned to your foot, tuned to your gait, ready to slip into the shoes you already wear.",
                image: "assets/custom-insole-hero.jpg",
              },
            ].map((s, i) => (
              <article key={s.n} className="ortho-fitting-step reveal" data-delay={i + 1}>
                <div className="ortho-fitting-media">
                  <img src={s.image} alt={s.eyebrow} loading="lazy" />
                </div>
                <div className="ortho-fitting-body">
                  <div className="ortho-fitting-eyebrow">{s.n} · {s.eyebrow}</div>
                  <h3 className="ortho-fitting-title">{s.title}</h3>
                  <p className="ortho-fitting-text">{s.body}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ===== What you'll receive ===== */}
      <section className="container section ortho-receive-section">
        <div className="section-head reveal">
          <div className="ortho-section-num">03 / The pair</div>
          <h2 className="section-title">What lands at your <em>door.</em></h2>
          <p className="section-kicker">
            A scanned, custom-printed lattice orthotic. Slips into the shoes you already wear.
          </p>
        </div>
        <div className="ortho-receive-grid reveal" data-delay="1">
          <ProductGallery
            images={[
              "assets/custom-insole-3d.png",
              "assets/custom-insole-detail-1.jpg?v=2",
              "assets/custom-insole-detail-2.jpg?v=3",
              "assets/custom-insole-detail-3.jpg",
            ]}
            alt="Wov3 custom 3D-printed insole"
          />
        </div>
      </section>

      {/* ===== FAQ tuned to pain ===== */}
      <section className="container section ortho-faq-section">
        <div className="section-head reveal">
          <div className="ortho-section-num">04 / Before you book</div>
          <h2 className="section-title">A few common <em>questions.</em></h2>
        </div>
        <div className="faq-list">
          {[
          {
            q: "Is the consultation really free?",
            a: "Yes — first 30-minute fitting and scan is on us. If a Wov3 orthotic isn't the right tool, we'll say so."
          },
          {
            q: "Do I need a referral or a diagnosis?",
            a: "No referral needed. If you're working with a physio or podiatrist, we'll share your scan with them."
          },
          {
            q: "What are the Massage Clogs designed for?",
            a: "We tune them to the shoes you actually wear — trainers, work boots, dress shoes, cleats."
          },
          {
            q: "How long until I feel a difference?",
            a: "Most people feel a change within the first week. No break-in — we match your foot, not a generic shape."
          },
          {
            q: "What if my pain isn't on the list?",
            a: "Seven conditions cover most cases, not all. Book a consultation — your story is the starting point."
          }].
          map((item, i) =>
          <details key={item.q} className="faq-item reveal" data-delay={i % 3 + 1} open={i === 0}>
              <summary className="faq-q">
                <span className="faq-num">0{i + 1}</span>
                <span className="faq-q-text">{item.q}</span>
                <span className="faq-icon" aria-hidden="true">
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M5 8l5 5 5-5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </span>
              </summary>
              <div className="faq-a">{item.a}</div>
            </details>
          )}
        </div>
      </section>

      <div className="container"><CtaBanner onNavigate={onNavigate} /></div>
    </main>);

}

// =====================================================================
// Blog page
// =====================================================================

const BLOG_POSTS = [
{
  id: "recovery-footwear-guide",
  date: "April 22, 2026",
  title: "From Workout to Walkabout: How to Choose Recovery Footwear",
  excerpt: "Post-workout discomfort shouldn't follow you off the track or gym floor. Choosing the right recovery footwear can make the difference between nagging pain and all-day comfort.",
  image: "assets/blog-recovery-guide.jpg",
  author: "Wov3 Team",
  readTime: "6 min read"
},
{
  id: "hacker-dojo",
  date: "April 22, 2026",
  title: "Wov3 Lands at Hacker Dojo",
  excerpt: "We're officially partnering with Hacker Dojo, one of the longest-running builder communities in Silicon Valley. Starting now, our foot scanner is on-site.",
  image: "assets/blog-hacker-dojo.jpg",
  author: "Lucy Hu",
  readTime: "4 min read"
}];


function BlogPage({ onNavigate }) {
  const [selectedPost, setSelectedPost] = React.useState(null);

  if (selectedPost) {
    const post = BLOG_POSTS.find((p) => p.id === selectedPost);
    return (
      <main className="page-enter blog-post" data-screen-label="Blog">
        <article className="container">
          <button className="blog-back" onClick={() => setSelectedPost(null)}>
            <span aria-hidden="true">←</span> Back to blog
          </button>
          
          <header className="blog-post-header">
            <div className="blog-post-meta">
              <time>{post.date}</time>
              <span className="blog-post-meta-divider">·</span>
              <span>{post.readTime}</span>
              <span className="blog-post-meta-divider">·</span>
              <span>{post.author}</span>
            </div>
            <h1 className="blog-post-title">{post.title}</h1>
          </header>

          {post.id === "recovery-footwear-guide" &&
          <div className="blog-post-content">
              <p className="blog-post-lead">
                Post-workout discomfort shouldn't follow you off the track or gym floor. Choosing the right recovery footwear can make the difference between nagging pain and all-day comfort.
              </p>

              <p>
                With Wov3's 3D printed shoes and custom fit insoles, you get targeted arch support, massage footbeds, and shock absorption tailored to your stride. Let's break down how to pick recovery slides, massage clogs, or running recovery shoes that fit both your recovery needs and daily wear.
              </p>

              <h2>Choosing Recovery Footwear</h2>
              
              <h3>Importance of Post-Workout Shoes</h3>
              <p>
                After a workout, your feet deserve some love. The right shoes can help ease soreness and protect against future injuries. Post-workout shoes protect your feet from stress and pain. They offer relief and cushion when your muscles are fatigued. This boost aids your body in bouncing back faster.
              </p>
              <p>
                Shoes designed for recovery can also prevent injuries. They support your feet, reducing strain on tired muscles and joints. With each step, they help you transition smoothly from workout mode to relaxation. Whether you're an athlete or just someone who enjoys a daily jog, recovery footwear can make a world of difference.
              </p>

              <h3>Features of Recovery Slides</h3>
              <p>
                Recovery slides are a game-changer for tired feet. They are easy to slip on, light, and designed for comfort. Their cushioned footbeds are like a gentle massage, helping to relieve tension. They often feature breathable materials to keep your feet cool.
              </p>
              <p>
                The contoured design supports your arches, promoting a natural foot position. This can prevent aches and improve your overall foot health. A key feature is their versatility — perfect for a quick trip to the store or just lounging at home. Plus, slides often have non-slip soles, adding an extra layer of safety.
              </p>

              <h3>Benefits of Massage Clogs</h3>
              <p>
                Massage clogs offer targeted foot relief. Their built-in massage footbeds stimulate pressure points, enhancing circulation. This can help reduce post-activity fatigue, leaving you refreshed. They are crafted to provide maximum comfort, supporting your recovery journey.
              </p>
              <p>
                These clogs are designed for both rest days and active recovery. They offer support where you need it most, making them ideal for all-day wear. The added comfort doesn't just soothe your feet; it can uplift your entire day.
              </p>

              <h2>Exploring Wov3's Footwear Technology</h2>

              <h3>HALS 3D Printing Explained</h3>
              <p>
                Wov3's innovative approach starts with their cutting-edge HALS 3D printing technology. What sets this method apart? It allows for precise layering, creating shoes that perfectly match your foot's shape. This precision ensures that each shoe provides the optimal fit and support.
              </p>
              <p>
                By using this technology, Wov3 offers shoes that are both high-performing and sustainable, reducing waste in production. The detail and customization possible with HALS technology mean you get footwear that adapts to your unique stride, giving you comfort like no other.
              </p>

              <h3>Advantages of 3D Printed Insoles</h3>
              <p>
                3D printed insoles are a game changer when it comes to personalized comfort. These insoles are crafted to match your foot's exact dimensions, from arch height to pressure points. This level of customization means you're not just getting a good fit; you're getting the perfect fit.
              </p>
              <p>
                These insoles also offer enhanced support, reducing strain on your feet and lower legs. Whether you're dealing with plantar fasciitis or just need extra support, these insoles provide the relief you're seeking. Plus, they're durable, standing up to daily wear and tear without losing their shape.
              </p>

              <h3>Elastomeric Mesh and Shock Absorption</h3>
              <p>
                One of the standout features of Wov3 footwear is the elastomeric mesh. This material not only molds comfortably to your feet but also provides excellent shock absorption. Why is this important? Every step you take creates impact, and over time, this can lead to discomfort or even injury.
              </p>
              <p>
                With shock-absorbing properties, the elastomeric mesh reduces this impact, protecting your joints and muscles. Moreover, the mesh is breathable, keeping your feet cool and sweat-free, even during intense activities. It's all about providing comfort that lasts all day.
              </p>

              <h2>Selecting the Right Wov3 Model</h2>

              <h3>WV-1 Recovery Slides for Relaxation</h3>
              <p>
                When it comes to unwinding after a long day, the WV-1 Recovery Slides have you covered. These slides are designed for ultimate relaxation, featuring a soft step-in feel that makes you forget you're wearing shoes. The elastomeric mesh molds to your foot's shape, providing a snug yet comfortable fit.
              </p>
              <p>
                Perfect for post-workout recovery, these slides also transition seamlessly to daily wear. They're lightweight, making them easy to pack for travel or throw in your gym bag. If relaxation is your goal, the WV-1 is your go-to.
              </p>

              <h3>WV-3 Massage Clogs for All-Day Comfort</h3>
              <p>
                For those seeking comfort throughout the day, the WV-3 Massage Clogs are a top choice. These clogs offer more than just support; they actively work to relieve foot fatigue. With their integrated massage footbeds, every step feels like a mini-massage, stimulating blood flow and easing tension.
              </p>
              <p>
                This makes them ideal for people who spend hours on their feet, whether at work or home. The durable design ensures they stand up to daily wear, while the breathable material keeps your feet feeling fresh. For all-day comfort, the WV-3 is a perfect fit.
              </p>

              <h3>WV-2 Running Shoes for Versatility</h3>
              <p>
                If versatility is what you need, look no further than the WV-2 Running Shoes. These shoes are crafted to handle everything, from your morning run to errands around town. They feature the same elastomeric mesh and shock-absorbing tech as other Wov3 models, ensuring comfort and support with every step.
              </p>
              <p>
                But what makes them truly versatile is their ability to adapt to different activities. Whether you're hitting the track or the grocery store, these shoes provide the cushioning and flexibility you need. Ready for anything your day throws at you, the WV-2 is your versatile companion.
              </p>

              <div className="blog-post-cta">
                <button className="btn-primary" onClick={() => onNavigate("collection")}>
                  Explore the collection <span aria-hidden="true">→</span>
                </button>
              </div>
            </div>
          }

          {post.id === "hacker-dojo" &&
          <div className="blog-post-content">
              <p className="blog-post-lead">
                We're officially partnering with Hacker Dojo, one of the longest-running builder communities in Silicon Valley. Starting now, our foot scanner is on-site at Hacker Dojo's Mountain View space — meaning anyone in the Bay Area can walk in, get a precision foot scan, and get matched to a Wov3 recovery slide engineered for their specific pressure profile.
              </p>

              <h2>Why Hacker Dojo</h2>
              <p>
                Hacker Dojo isn't just a coworking space. It's a community with deep roots in hardware, robotics, and deep-tech — a place built by and for people who care about making physical things well.
              </p>
              <p>That's our people.</p>
              <p>
                Wov3 was built on a belief that recovery footwear should be engineered around the nervous system — not just foot size. Our woven lattice construction, acupressure node placement, and pressure redistribution design aren't marketing language; they're the result of iterative engineering with real foot scan data. Putting our scanner inside a community full of engineers, designers, and athletes who appreciate that level of rigor is the most natural fit we could have asked for.
              </p>
              <p>
                It's also a statement about where we think recovery and wellness products are headed. The future isn't one-size-fits-all foam. It's data-driven, customized, and made to fit the actual person standing in the shoe.
              </p>

              <h2>What Happens When You Get Scanned</h2>
              <p>The scanner takes just a few minutes. Here's what you walk away with:</p>
              <ul>
                <li>A personalized <strong>Wov3 Foot Profile Report</strong> — pressure insights, fit tendencies, and a use-case-matched product recommendation</li>
                <li>A clear explanation of which Wov3 product fits you best — and why</li>
                <li>A community discount for Hacker Dojo members on the WV-1 Recovery Slides and WV-3 Massage Clogs</li>
              </ul>
              <p>No medical jargon. No pressure to buy. Just good data about your own feet and a product recommendation that actually makes sense for how you move.</p>

              <h2>What's Ahead at Hacker Dojo</h2>
              <p>The scanner is just the start. Over the coming months, we'll be running:</p>
              <ul>
                <li><strong>Pop-up fittings</strong> — scheduled sessions where you can get scanned and try the product lineup</li>
                <li><strong>Recovery workshops</strong> — conversations about feet, nervous system, pressure, and why recovery matters more than most people realize</li>
                <li><strong>Founder talks</strong> — informal sessions on building a hardware startup in an AI-heavy Silicon Valley</li>
              </ul>
              <p>We'll announce dates through the Hacker Dojo community channels and our own newsletter.</p>

              <h2>Come Visit</h2>
              <p>
                If you're in the Bay Area and curious about your foot pressure profile, stop by. Grab a scan. Meet the team. Ask us hard questions about the lattice geometry — we genuinely enjoy those conversations.
              </p>
              <p>This is the first of several institutional placements we're building out this year, and it feels right to be starting here.</p>
              <p>
                Want to partner with Wov3 on a scanner activation, wellness event, or collaboration? Reach out at <a href="mailto:lhu@wov3.com">lhu@wov3.com</a>
              </p>

              <div className="blog-post-cta">
                <button className="btn-primary" onClick={() => window.openCalendly()}>
                  Book a scan at Hacker Dojo <span aria-hidden="true">→</span>
                </button>
              </div>
            </div>
          }
        </article>
      </main>);

  }

  return (
    <main className="page-enter" data-screen-label="Blog">
      <section className="container page-head">
        <div className="page-head-eyebrow reveal">Blog · News & Updates</div>
        <h1 className="page-head-title reveal" data-delay="1">
          What we're <em>building.</em>
        </h1>
        <p className="page-head-sub reveal" data-delay="2">
          Stories from the studio, product announcements, and thoughts on recovery, biomechanics, and building better footwear.
        </p>
      </section>

      {/* ===== Educational resources — featured ===== */}
      <section className="container blog-resources">
        <div className="blog-resources-head reveal">
          <div className="ortho-section-num">Educational resources</div>
          <h2 className="section-title">Understand <em>your feet.</em></h2>
          <p className="section-kicker">
            Plain-language guides to the conditions, biomechanics, and recovery patterns we see most often.
          </p>
        </div>
        <button
          className="blog-resource-card reveal"
          data-delay="1"
          onClick={() => onNavigate("conditions")}
          aria-label="Open the foot-health guide"
        >
          <div className="blog-resource-card-media">
            <img src="assets/insole-image.jpg" alt="Foot health — custom 3D insole guide cover" loading="lazy" />
          </div>
          <div className="blog-resource-card-body">
            <div className="blog-resource-card-tag">Foot health · {PAIN_CONDITIONS.length}-part guide</div>
            <h3 className="blog-resource-card-title">A quick map of <em>what your feet are saying.</em></h3>
            <p className="blog-resource-card-sub">
              Tap a region of the foot, or pick a condition from the list — Plantar Fasciitis,
              Metatarsalgia, Achilles Tendinitis, Flat Feet, High Arch, Bunion, and IT Band.
              Each one explains what you might be feeling, what's actually going on, and what
              we typically build for it.
            </p>
            <span className="blog-resource-card-cta">Read the guide <span aria-hidden="true">→</span></span>
          </div>
        </button>
      </section>

      <section className="container blog-section-head reveal">
        <div className="ortho-section-num">From the studio</div>
        <h2 className="section-title">Latest <em>posts.</em></h2>
      </section>

      <section className="container blog-grid">
        {BLOG_POSTS.map((post, i) =>
        <article
          key={post.id}
          className="blog-card reveal"
          data-delay={i + 1}
          onClick={() => setSelectedPost(post.id)}>
          
            <div className="blog-card-media">
              <img src={post.image} alt={post.title} loading="lazy" />
            </div>
            <div className="blog-card-body">
              <div className="blog-card-meta">
                <time>{post.date}</time>
                <span>·</span>
                <span>{post.readTime}</span>
              </div>
              <h2 className="blog-card-title">{post.title}</h2>
              <p className="blog-card-excerpt">{post.excerpt}</p>
              <div className="blog-card-footer">
                <span className="blog-card-author">{post.author}</span>
                <span className="blog-card-arrow" aria-hidden="true">→</span>
              </div>
            </div>
          </article>
        )}
      </section>

      <div className="container"><CtaBanner onNavigate={onNavigate} /></div>
    </main>);

}

// =====================================================================
// About page
// =====================================================================

// ============================================================
// Team data — each member has a short intro for the About grid,
// plus a long-form bio rendered on their dedicated subpage.
// ============================================================
const TEAM_MEMBERS = [
  {
    id: "barry",
    route: "team-barry",
    name: "Barry Li",
    role: "Founder",
    image: "assets/barry-li.jpg?v=2",
    intro: "Started Wov3 from sore feet, scan data, and printed lattice geometry.",
    quote: "Recovery shouldn't feel like an afterthought. It's where the next session is won.",
    bio: [
      "Barry started Wov3 out of a frustration he kept hearing from athletes in his circle — sore feet, plantar fascia flare-ups, and recovery shoes that felt like mass-produced foam. The materials hadn't changed in decades, and neither had the geometry.",
      "He spent two years inside 3D-printing labs, foot-pressure data, and conversations with physical therapists to build the printed TPU lattice behind every Wov3 piece — geometry that distributes load across thousands of micro-cells instead of one flat slab.",
      "Today Barry co-engineers each product with the athletes who wear it — from Notre Dame and Michigan to recovery practitioners across the Bay Area — turning scan data and lived feedback into pieces tuned to a real person, not an average one.",
    ],
  },
  {
    id: "bruce",
    route: "team-bruce",
    name: "Bruce Yang",
    role: "Co-Founder",
    image: "assets/bruce-yang.jpg?v=2",
    intro: "Strategy, product direction, and ecosystem development across AI, robotics, and hardware.",
    quote: "Recovery isn't something we wait for — it's something we build into every step, helping people move beyond fixing pain toward becoming stronger, better, and more prepared.",
    bio: [
      "Graduate of Boston University in Economics, with strong exposure to the U.S. startup ecosystem. Bruce has worked closely with and studied early-stage companies across robotics, AI, hardware, and consumer technology.",
      "At Wov3, Bruce focuses on company strategy, product direction, market opportunities, and ecosystem development — bringing a cross-disciplinary perspective that connects emerging technologies, user needs, and business execution to help early-stage teams define product positioning and growth pathways.",
      "Through Wov3, he aims to support founders, product teams, and technology innovators by bridging resources, insights, and opportunities across AI, robotics, and next-generation intelligent products.",
    ],
  },
  {
    id: "philip",
    route: "team-philip",
    name: "Philip Hui",
    role: "President · Sales & Strategic Accounts",
    image: "assets/philip-hui.jpg?v=2",
    intro: "20+ years of strategic accounts and partnerships. Trilingual bridge to global supply.",
    quote: null,
    bio: [
      "Philip brings over twenty years of sales and account management experience to Wov3, with a long track record of building durable customer relationships across enterprise technology and consumer-facing categories. Cisco Sales Expert (CSE) certified.",
      "At Wov3, Philip leads strategic accounts and key partnerships — anchoring the East Coast presence from Montclair, NJ, and translating Wov3's recovery-footwear thesis into long-term programs with athletic teams, wellness studios, and corporate wellness partners.",
      "He works in English, Cantonese, and Mandarin, which lets him bridge Wov3's North American customer base with its manufacturing and supply partners across Greater China — keeping product, story, and account experience aligned end-to-end.",
    ],
  },
  {
    id: "lucy",
    route: "team-lucy",
    name: "Lucy Hu",
    role: "Partner · Product, UX & Growth",
    image: "assets/lucy-hu.jpg?v=2",
    intro: "Human factors and reflexology lens on product, UX, and B2B partnerships.",
    quote: "I'm passionate about helping people recover — physically and energetically — and reset their nervous system to get to their best condition.",
    bio: [
      "Lucy holds an MS in Human Factors and Ergonomics and is a 200-hour Certified Yoga Teacher. Her work sits at the intersection of how the body loads and how it unwinds, drawing from foot reflexology: pressure points across the sole map to the rest of the body, and stimulating the right zones can shift someone out of fight or flight and into recovery. The foot isn't just where pain lives, it's where recovery starts.",
      "At Wov3, Lucy leads design, UX, and product development — translating that insight into the geometry, pressure-node placement, and material decisions behind every piece, and owning the end-to-end fitting experience from first scan to delivered pair.",
      "She also drives marketing, sales, and B2B partnerships — collaborating with athletic teams, recovery practitioners, and wellness studios, and coordinating the events and activations where Wov3 meets the people it's built for.",
    ],
  },
];

// ============================================================
// TeamMemberPage — long-form bio for a single team member,
// selected by route (team-barry, team-bruce, team-philip, team-lucy).
// ============================================================
function TeamMemberPage({ onNavigate, memberId }) {
  const member = TEAM_MEMBERS.find((m) => m.id === memberId) || TEAM_MEMBERS[0];
  return (
    <main className="page-enter" data-screen-label={"Team · " + member.name}>
      <section className="container page-head team-member-head">
        <div className="page-head-eyebrow reveal">
          <button className="ortho-breadcrumb" onClick={() => onNavigate("about")}>← About</button>
          <span className="ortho-breadcrumb-sep">/</span>
          <span>Team</span>
        </div>
        <h1 className="page-head-title reveal" data-delay="1">
          {member.name.split(" ").slice(0, -1).join(" ")} <em>{member.name.split(" ").slice(-1)[0]}</em>
        </h1>
        <div className="team-member-role reveal" data-delay="2">{member.role}</div>
      </section>

      <section className="container team-member-body">
        <div className="team-member-photo reveal">
          <img src={member.image} alt={member.name} />
        </div>
        <div className="team-member-text reveal" data-delay="1">
          {member.bio.map((p, i) => (
            <p className="team-member-para" key={i}>{p}</p>
          ))}
          {member.quote && (
            <p className="team-member-quote">"{member.quote}"</p>
          )}
          <div className="team-member-back">
            <button className="btn-ghost" onClick={() => onNavigate("about")}>
              <span aria-hidden="true">←</span> Back to the team
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

function AboutPage({ onNavigate }) {
  return (
    <main className="page-enter" data-screen-label="04 About">
      <section className="container page-head">
        <div className="page-head-eyebrow reveal">How it started</div>
        <h1 className="page-head-title reveal" data-delay="1">
          Built by people who<br />needed it <em>first.</em>
        </h1>
        <p className="page-head-sub reveal" data-delay="2">
          Wov3 didn't start in a boardroom. It started in a lab, on a track, and in the
          recovery rooms of college athletes who couldn't find a shoe that actually
          understood what their feet had just been through.
        </p>
      </section>

      {/* ===== Mission + Vision ===== */}
      <section className="container about-mission-vision">
        <div className="about-mission-inner reveal">
          <div className="about-mission-eyebrow">Mission</div>
          <p className="about-mission-statement">
            We help people understand their feet — then build the recovery footwear and
            custom insoles their body actually needs, <em>scanned and shaped to how they move.</em>
          </p>
        </div>
        <div className="about-vision-inner reveal" data-delay="1">
          <div className="about-vision-eyebrow">Vision</div>
          <p className="about-mission-statement">
            To build the world's best recovery footwear and technology — engineered to prevent
            injury, elevate performance, and <em>reset the nervous system,</em> all from the
            foundation of the feet.
          </p>
        </div>
      </section>

      {/* Team grid */}
      <section className="container section">
        <div className="section-head reveal">
          <h2 className="section-title">Our <em>Team.</em></h2>
        </div>
        <div className="team-grid team-grid-compact">
          {TEAM_MEMBERS.map((m, i) => (
            <div key={m.id} className="team-card team-card-compact reveal" data-delay={i + 1}>
              <div className="team-photo">
                <img src={m.image} alt={m.name} loading="lazy" />
              </div>
              <div className="team-name">{m.name}</div>
              <div className="team-role">{m.role}</div>
              <p className="team-bio team-bio-intro">{m.intro}</p>
              <button
                className="team-read-more"
                onClick={() => onNavigate(m.route)}
                aria-label={"Read more about " + m.name}
              >
                Read more <span aria-hidden="true">→</span>
              </button>
            </div>
          ))}
        </div>
      </section>

      <div className="container"><CtaBanner onNavigate={onNavigate} /></div>
    </main>);

}

Object.assign(window, { CollectionPage, SportsPage, TechnologyPage, ConditionsPage, BlogPage, AboutPage, ContactPage, TeamMemberPage, TEAM_MEMBERS });