e.stopPropagation()} role="dialog" aria-modal="true"> {phase !== "success" ? ( <>

{t.nav.enquire}

{tf.h}

{tf.name} {errors.name && {errors.name}} setForm({...form, name: e.target.value})} />

{tf.whatsapp} {errors.whatsapp && {errors.whatsapp}} setForm({...form, whatsapp: e.target.value})} placeholder="+60…" />

{tf.email} setForm({...form, email: e.target.value})} />

{tf.goal} {errors.goal && {errors.goal}}

{tf.message}

setForm({...form, message: e.target.value})} />
              </div>
              <button type="submit" className="btn btn-primary btn-lg" style={{ width: "100%" }} disabled={phase === "submitting"}>
                {phase === "submitting" ? tf.submitting : tf.submit}
              </button>
            </form>
          </>
        ) : (
          <div className="success-state">
            <div className="success-mark"><Icon name="check" size={28} /></div>
            <h2 className="font-display-tight" style={{ margin: "16px 0 8px", fontSize: 28 }}>{tf.success}</h2>
            <p className="lead" style={{ fontSize: 15 }}>{tf.successSub}</p>
            <button className="btn btn-secondary" onClick={onClose}>OK</button>
          </div>
        )}
      </div>
    </div>
  );
};

/* ─── Mobile sticky CTA ───────────────────────────────────────── */
const MobileCTA = ({ t, onEnquire, onWhatsApp, show }) => (
  <div className={"mobile-cta " + (show ? "show" : "")}>
    <button className="btn btn-whatsapp" onClick={onWhatsApp}><Icon name="whatsapp" size={16} /> WhatsApp</button>
    <button className="btn btn-primary" onClick={onEnquire}>{t.nav.enquire}</button>
  </div>
);

/* ─── Reveal on scroll wrapper ────────────────────────────────── */
const Reveal = ({ children, delay = 0 }) => {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        setTimeout(() => el.classList.add("in"), delay);
        io.disconnect();
      }
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <div ref={ref} className="reveal">{children}</div>;
};

/* ─── Mission / Vision pair ───────────────────────────────────── */
const MissionVision = ({ data }) => (
  <section className="section section-tinted">
    <div className="container">
      <div className="eyebrow" style={{ marginBottom: 24 }}>{data.eyebrow}</div>
      <div className="mv-grid">
        {data.items.map((it, i) => (
          <Reveal key={i} delay={i * 100}>
            <div className="mv-card">
              <div className="mv-tag">
                <span className="mv-num font-display">{String(i + 1).padStart(2, "0")}</span>
                <span className="mv-tag-label">{it.tag}</span>
              </div>
              <p className="mv-text">{it.text}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

/* ─── Marquee ticker ──────────────────────────────────────────── */
const Marquee = ({ items, variant = "" }) => {
  const loop = [...items, ...items]; // duplicate for seamless scroll
  return (
    <div className={"marquee " + variant}>
      <div className="marquee-track">
        {loop.map((it, i) => (
          <span key={i} className={"marquee-item " + (it.solid ? "solid" : "")}>
            {it.text || it}
          </span>
        ))}
      </div>
    </div>
  );
};

/* ─── Kinetic display heading (word-by-word rise) ────────────── */
const KineticHeading = ({ rows }) => (
  <h1 className="kinetic-h">
    {rows.map((row, ri) => (
      <span key={ri} className="row">
        {row.map((w, wi) => (
          <span
            key={wi}
            className={"word " + (w.style || "")}
            style={{ animationDelay: `${(ri * row.length + wi) * 80 + 100}ms` }}
          >
            {w.text}{wi < row.length - 1 ? "\u00A0" : ""}
          </span>
        ))}
      </span>
    ))}
  </h1>
);

/* ─── Animated stat counter ───────────────────────────────────── */
const Counter = ({ to, suffix = "", duration = 1400 }) => {
  const [n, setN] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !started.current) {
        started.current = true;
        const start = performance.now();
        const tick = (t) => {
          const p = Math.min(1, (t - start) / duration);
          const eased = 1 - Math.pow(1 - p, 3);
          setN(Math.round(to * eased));
          if (p < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      }
    }, { threshold: 0.4 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [to, duration]);
  return <span ref={ref} className="stat-num">{n.toLocaleString()}<span className="suffix">{suffix}</span></span>;
};

const StatRow = ({ items }) => (
  <div className="stat-row">
    {items.map((it, i) => (
      <div key={i} className="stat-cell">
        <Counter to={it.value} suffix={it.suffix} />
        <div className="stat-label">{it.label}</div>
      </div>
    ))}
  </div>
);

/* ─── Editorial pull-quote section ───────────────────────────── */
const Editorial = ({ mark = "“", quote, attr, accents = [] }) => {
  // Highlight any accent words by wrapping in <em>
  let html = quote;
  accents.forEach(w => {
    html = html.replaceAll(w, `__EM__${w}__/EM__`);
  });
  const parts = html.split(/(__EM__.+?__\/EM__)/g);
  return (
    <section className="editorial">
      <span className="editorial-mark" aria-hidden="true">{mark}</span>
      <div className="container">
        <p className="editorial-quote">
          {parts.map((p, i) => {
            const m = p.match(/^__EM__(.+?)__\/EM__$/);
            return m ? <em key={i}>{m[1]}</em> : <span key={i}>{p}</span>;
          })}
        </p>
        <div className="editorial-attr">{attr}</div>
      </div>
    </section>
  );
};

/* ─── Aurora orb background (drifting blurred gradients) ───── */
const Aurora = () => (
  <div className="aurora" aria-hidden="true">
    <div className="aurora-orb a"></div>
    <div className="aurora-orb b"></div>
    <div className="aurora-orb c"></div>
  </div>
);

/* ─── Hero Flow Animation (Wispr-style hero_animation-wrapper-v2) ───
   Left curve: messy stream-of-thought text following an S-curve (low contrast)
   Center: CSS-only "device" with toast notifications popping in (replaces Lottie)
   Right curve: structured/clean text knocked out of a thick green stroke      */
const HeroFlowAnimation = ({ data }) => {
  if (!data) return null;
  const messy = (data.curveMessy || "").repeat(2);   // ensure marquee tail covers viewport
  const clean = (data.curveClean || "").repeat(6);
  const initials = (data.device?.name || "Y").trim().slice(0, 1).toUpperCase();
  return (
    <div className="flow-anim-wrapper" aria-hidden="true">
      {/* LEFT — messy speech on swooping curve. SVG aspect ratio (1048:594) governs height; 50% width container handles placement */}
      <div className="flow-anim-side flow-anim-left">
        <svg viewBox="0 0 1048 594">
          <defs>
            <path id="flow-curve-1"
              d="M0.59 50.92 C17.46 143.30, 97.85 293.14, 284.51 353.55 C440.83 399.06, 583.84 294.07, 500.62 184.75 C417.40 75.43, 238.22 282.10, 499.26 441.67 C551.91 477.80, 817.47 561.26, 1046.43 565.24" />
          </defs>
          <text>
            <textPath href="#flow-curve-1" xlinkHref="#flow-curve-1" startOffset="0">
              {messy}
            </textPath>
            <animate attributeName="x" dur="48s" values="-2400; 0" repeatCount="indefinite" />
          </text>
        </svg>
      </div>

{/* GLOW behind device (replaces hero_animation-lottie-bg) */}
      <div className="flow-anim-bg" />

{/* CENTER — CSS device w/ toast cascade (replaces hero_animation-lottie) */}
      <div className="flow-anim-center">
        <div className="flow-device">
          <span className="flow-device-notch" />
          <div className="flow-device-head">
            <div className="flow-device-avatar">{initials}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="flow-device-name">{data.device?.name}</div>
              <div className="flow-device-sub"><span className="flow-device-dot" />{data.device?.status}</div>
            </div>
            <MIcon name="more_horiz" size={18} rounded />
          </div>
          <div className="flow-toasts">
            {(data.toasts || []).map((t, i) => (
              <div key={i} className={"flow-toast " + (t.tone || "primary")} style={{ "--i": i }}>
                <span className="flow-toast-ico">
                  <MIcon name={t.icon} size={18} rounded />
                </span>
                <div className="flow-toast-body">
                  <div className="flow-toast-title">{t.title}</div>
                  <div className="flow-toast-meta">{t.meta}</div>
                </div>
                {t.chip && <span className="flow-toast-chip">{t.chip}</span>}
              </div>
            ))}
          </div>
        </div>
      </div>

{/* RIGHT — clean structured text on thick green stroke */}
      <div className="flow-anim-side flow-anim-right">
        <svg viewBox="0 0 1024 620">
          <defs>
            <path id="flow-curve-2"
              d="M2.04 563.87 C111.59 558.27, 316.49 554.02, 517.96 490.06 C703.02 431.32, 875.32 444.53, 1021.88 453.22" />
          </defs>
          <use href="#flow-curve-2" xlinkHref="#flow-curve-2" className="flow-curve-stroke" />
          <text>
            <textPath href="#flow-curve-2" xlinkHref="#flow-curve-2" startOffset="0">
              {clean}
            </textPath>
            <animate attributeName="x" dur="60s" values="-3200; 0" repeatCount="indefinite" />
          </text>
        </svg>
      </div>
    </div>
  );
};

/* ─── Editorial hero (Wispr/Apple-style centered) ────────────── */
const HeroEditorial = ({ eyebrow, status, rows, sub, ctaPrimary, ctaSecondary, onPrimary, onSecondary, meta, dark = false }) => (
  <section className={"hero-editorial " + (dark ? "dark" : "")}>
    <Aurora />
    <div className="hero-editorial-inner">
      <div className="hero-ed-eyebrow">
        <span className="dot"></span>
        <span>{eyebrow}</span>
      </div>
      <h1 className="hero-ed-h1">
        {rows.map((row, ri) => (
          <span key={ri} className="row" style={{ animationDelay: `${ri * 180 + 200}ms` }}>
            {row.map((w, wi) => (
              <React.Fragment key={wi}>
                {w.style === "accent" ? <span className="accent">{w.text}</span> : w.text}
                {wi < row.length - 1 ? "\u00A0" : ""}
              </React.Fragment>
            ))}
          </span>
        ))}
      </h1>
      <p className="hero-ed-sub">{sub}</p>
      <div className="hero-ed-actions">
        <Magnetic>
          <button className="btn btn-primary btn-lg btn-pill" onClick={onPrimary}>
            {ctaPrimary} <Icon name="arrowSm" size={18} />
          </button>
        </Magnetic>
        <Magnetic>
          <button className="btn btn-ghost btn-lg btn-pill" onClick={onSecondary}>
            <Icon name="whatsapp" size={18} /> {ctaSecondary}
          </button>
        </Magnetic>
      </div>
      {meta && <div className="hero-ed-meta">{meta}</div>}
    </div>
  </section>
);

/* ─── Sticky scroll-driven story ──────────────────────────────── */
const StickyStory = ({ eyebrow, h2, sub, steps }) => (
  <section className="container">
    <div className="sticky-story">
      <div className="sticky-story-text">
        <div className="eyebrow-rule">{eyebrow}</div>
        <h2 className="bigh">{h2}</h2>
        <p className="lead">{sub}</p>
      </div>
      <div className="sticky-story-list">
        {steps.map((s, i) => (
          <Reveal key={i} delay={i * 80}>
            <div className="sticky-step">
              <div className="sticky-step-num">{String(i + 1).padStart(2, "0")} / {String(steps.length).padStart(2, "0")}</div>
              <h3>{s.h}</h3>
              <p>{s.p}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

/* ─── Feature card with cursor-tracked gradient ──────────────── */
const FeatureCard = ({ icon, title, body }) => {
  const ref = useRef(null);
  const onMove = (e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    el.style.setProperty("--mx", `${e.clientX - r.left}px`);
    el.style.setProperty("--my", `${e.clientY - r.top}px`);
  };
  return (
    <div ref={ref} className="feature-card" onMouseMove={onMove}>
      <div className="feature-card-icon"><Icon name={icon} size={26} /></div>
      <h3>{title}</h3>
      <p>{body}</p>
    </div>
  );
};

/* ─── Scroll progress bar ─────────────────────────────────────── */
const ScrollProgress = () => {
  const [w, setW] = useState(0);
  useEffect(() => {
    const handler = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setW(max > 0 ? (h.scrollTop / max) * 100 : 0);
    };
    window.addEventListener("scroll", handler, { passive: true });
    handler();
    return () => window.removeEventListener("scroll", handler);
  }, []);
  return <div className="scroll-progress" style={{ width: w + "%" }} />;
};

/* ─── Magnetic button wrapper ─────────────────────────────────── */
const Magnetic = ({ children, strength = 0.25 }) => {
  const ref = useRef(null);
  const onMove = (e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const x = (e.clientX - (r.left + r.width / 2)) * strength;
    const y = (e.clientY - (r.top + r.height / 2)) * strength;
    el.style.transform = `translate(${x}px, ${y}px)`;
  };
  const onLeave = () => { if (ref.current) ref.current.style.transform = ""; };
  return (
    <span ref={ref} className="magnetic" onMouseMove={onMove} onMouseLeave={onLeave} style={{ display: "inline-block" }}>
      {children}
    </span>
  );
};

/* ─── Material Symbol icon (Google Fonts) ─────────────────────── */
const MIcon = ({ name, size = 24, fill = false, rounded = false, className = "", style }) => (
  <span
    className={"msym " + (fill ? "filled " : "") + (rounded ? "rounded " : "") + className}
    style={{ fontSize: size, ...style }}
    aria-hidden="true"
  >
    {name}
  </span>
);

/* ─── Botanical line-art decorations ──────────────────────────── */
const Botanical = ({ kind = "leaf", className = "", style }) => {
  const shapes = {
    leafBranch: (
      <svg viewBox="0 0 200 240" fill="none">
        <path d="M100 230 Q90 180 100 130 Q108 80 96 30" />
        <path d="M100 200 Q70 195 50 175 Q40 160 50 145 Q75 150 95 175" className="fill-leaf" />
        <path d="M100 170 Q130 165 150 145 Q160 130 150 115 Q125 120 105 145" className="fill-leaf" />
        <path d="M100 140 Q72 135 55 115 Q47 100 56 88 Q80 92 98 115" className="fill-leaf" />
        <path d="M100 110 Q126 105 142 85 Q150 70 140 58 Q116 64 100 85" className="fill-leaf" />
        <path d="M100 80 Q80 76 67 60 Q60 48 68 38 Q86 42 98 60" className="fill-leaf" />
      </svg>
    ),
    sprig: (
      <svg viewBox="0 0 64 24" fill="none">
        <path d="M2 12 H62" />
        <path d="M22 12 Q26 6 32 6" />
        <path d="M42 12 Q38 18 32 18" />
        <circle cx="32" cy="12" r="2" className="fill-soft" />
      </svg>
    ),
    citrus: (
      <svg viewBox="0 0 80 80" fill="none">
        <circle cx="40" cy="40" r="32" />
        <circle cx="40" cy="40" r="24" className="fill-soft" />
        <path d="M40 16 L40 64 M16 40 L64 40 M23 23 L57 57 M23 57 L57 23" strokeWidth="0.8" />
        <path d="M30 12 Q34 6 42 6" />
      </svg>
    ),
    bowl: (
      <svg viewBox="0 0 100 80" fill="none">
        <path d="M10 36 Q10 70 50 70 Q90 70 90 36 Z" className="fill-leaf" />
        <path d="M10 36 Q10 70 50 70 Q90 70 90 36" />
        <path d="M5 36 H95" />
        <path d="M30 16 Q32 26 30 30 M50 12 Q52 24 50 28 M70 16 Q72 26 70 30" strokeWidth="0.9" />
      </svg>
    ),
    herb: (
      <svg viewBox="0 0 60 120" fill="none">
        <path d="M30 116 Q28 80 30 50 Q32 22 30 6" />
        <path d="M30 90 Q14 86 8 70" /><path d="M30 90 Q46 86 52 70" />
        <path d="M30 70 Q16 66 12 52" /><path d="M30 70 Q44 66 48 52" />
        <path d="M30 50 Q20 46 18 36" /><path d="M30 50 Q40 46 42 36" />
        <ellipse cx="14" cy="74" rx="6" ry="3" className="fill-leaf" />
        <ellipse cx="46" cy="74" rx="6" ry="3" className="fill-leaf" />
        <ellipse cx="18" cy="55" rx="5" ry="3" className="fill-leaf" />
        <ellipse cx="42" cy="55" rx="5" ry="3" className="fill-leaf" />
      </svg>
    ),
    seed: (
      <svg viewBox="0 0 60 60" fill="none">
        <ellipse cx="30" cy="30" rx="18" ry="10" transform="rotate(-30 30 30)" className="fill-leaf" />
        <ellipse cx="30" cy="30" rx="18" ry="10" transform="rotate(-30 30 30)" />
        <path d="M14 38 Q30 22 46 22" strokeWidth="0.8" />
      </svg>
    ),
    spoon: (
      <svg viewBox="0 0 32 80" fill="none">
        <ellipse cx="16" cy="14" rx="10" ry="12" className="fill-soft" />
        <ellipse cx="16" cy="14" rx="10" ry="12" />
        <path d="M16 26 V76" />
      </svg>
    ),
    waterDrop: (
      <svg viewBox="0 0 40 60" fill="none">
        <path d="M20 4 Q4 30 4 42 Q4 56 20 56 Q36 56 36 42 Q36 30 20 4 Z" className="fill-soft" />
        <path d="M20 4 Q4 30 4 42 Q4 56 20 56 Q36 56 36 42 Q36 30 20 4 Z" />
      </svg>
    ),
  };
  return (
    <div className={"botanical " + className} style={style} aria-hidden="true">
      {shapes[kind]}
    </div>
  );
};

/* ─── Ingredients strip — Material Symbols ─────────────────────── */
const IngredientsStrip = ({ items }) => (
  <div className="ingredients-strip">
    {items.map((it, i) => (
      <div key={i} className="ing">
        <MIcon name={it.icon} size={38} rounded />
        <span className="lbl">{it.label}</span>
      </div>
    ))}
  </div>
);

/* ─── Warm feature card with Material Symbol ──────────────────── */
const WarmCard = ({ icon, title, body, tag }) => (
  <div className="warm-card">
    <MIcon name={icon} size={56} rounded className="warm-card-illus msym-large" />
    <h3>{title}</h3>
    <p>{body}</p>
    {tag && <span className="warm-card-tag">— {tag}</span>}
  </div>
);

/* ─── Testimonial row ─────────────────────────────────────────── */
const TestimonialRow = ({ quote, name, role, seed = 7 }) => (
  <div className="testimonial-row">
    <Img kind="portrait" seed={seed} aspect="1" label="" showLabel={false} />
    <div>
      <p className="testimonial-quote">"{quote}"</p>
      <div className="testimonial-attr">
        <strong>{name}</strong>
        <span className="sep"></span>
        <span>{role}</span>
      </div>
    </div>
  </div>
);

/* ─── Numbered approach list ──────────────────────────────────── */
const ApproachList = ({ items }) => (
  <div className="approach-list">
    {items.map((it, i) => (
      <React.Fragment key={i}>
        <div className="approach-num">{String(i + 1).padStart(2, "0")}</div>
        <div className="approach-body">
          <h3>{it.h}</h3>
          <p>{it.p}</p>
        </div>
      </React.Fragment>
    ))}
  </div>
);

/* ─── Section divider sprig ───────────────────────────────────── */
const SectionDivider = () => (
  <div className="section-divider">
    <svg viewBox="0 0 64 24" fill="none" stroke="currentColor" strokeWidth="1.2">
      <path d="M2 12 H26" />
      <path d="M38 12 H62" />
      <path d="M30 12 Q32 6 36 6" />
      <path d="M34 12 Q32 18 28 18" />
      <circle cx="32" cy="12" r="2.5" fill="currentColor" />
    </svg>
  </div>
);

/* Expose */
Object.assign(window, {
  Icon, Img, Brandmark, Logo, Nav, Footer, PageHero, CTABanner,
  FAQItem, PricingCard, TrustStrip, ServicePillar, NutritionistCard,
  EnquiryModal, MobileCTA, Reveal, LanguageToggle, MissionVision,
  Marquee, KineticHeading, Counter, StatRow, Editorial, Magnetic,
  Aurora, HeroFlowAnimation, HeroEditorial, StickyStory, FeatureCard, ScrollProgress,
  Botanical, IngredientsStrip, WarmCard, TestimonialRow, ApproachList, SectionDivider, MIcon,
});

{h1}

{h}

{item.title}

{m.name} {m.nameEn}

{t.nav.enquire}