// ── API helper ──────────────────────────────────────────────────
const API = "https://api.herbimmortal.com/api";

async function apiFetch(path, options = {}) {
  const res = await fetch(`${API}${path}`, {
    ...options,
    headers: { "Content-Type": "application/json", ...options.headers },
  });
  const data = await res.json();
  if (!res.ok) throw new Error(data.error || "Request failed");
  return data;
}

// ── Contact / Invest Modal ───────────────────────────────────────
const Modal = ({ type, onClose }) => {
  const isInvestor = type === "invest";
  const [form, setForm] = React.useState({ name: "", email: "", company: "", subject: "", message: "" });
  const [status, setStatus] = React.useState("idle");
  const [errMsg, setErrMsg] = React.useState("");

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

  const submit = async (e) => {
    e.preventDefault();
    setStatus("loading");
    try {
      if (isInvestor) {
        await apiFetch("/invest/lead", { method: "POST", body: JSON.stringify({ name: form.name, email: form.email, company: form.company, message: form.message }) });
      } else {
        await apiFetch("/contact", { method: "POST", body: JSON.stringify({ ...form, type: "collaborate" }) });
      }
      setStatus("success");
    } catch (err) {
      setErrMsg(err.message);
      setStatus("error");
    }
  };

  const overlayStyle = {
    position: "fixed", inset: 0, background: "rgba(14,26,18,0.7)", zIndex: 100,
    display: "flex", alignItems: "center", justifyContent: "center", padding: 24,
    backdropFilter: "blur(4px)",
  };
  const boxStyle = {
    background: "var(--paper)", border: "1px solid var(--line)", borderRadius: 8,
    padding: "40px 36px", width: "100%", maxWidth: 520, position: "relative",
    maxHeight: "90vh", overflowY: "auto",
  };
  const inputStyle = {
    width: "100%", padding: "10px 12px", border: "1px solid var(--line)",
    borderRadius: 4, fontFamily: "var(--sans)", fontSize: 14,
    background: "var(--bg)", color: "var(--ink)", boxSizing: "border-box",
    marginTop: 6, display: "block",
  };
  const labelStyle = {
    fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.12em",
    textTransform: "uppercase", color: "var(--ink-mute)", display: "block", marginTop: 16,
  };

  return (
    <div style={overlayStyle} onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div style={boxStyle}>
        <button onClick={onClose} style={{ position: "absolute", top: 16, right: 16, background: "none", border: "none", fontSize: 20, cursor: "pointer", color: "var(--ink-mute)" }}>✕</button>
        {status === "success" ? (
          <div style={{ textAlign: "center", padding: "24px 0" }}>
            <div style={{ fontSize: 40, marginBottom: 16 }}>🌿</div>
            <h3 style={{ fontFamily: "var(--serif)", fontSize: 28, marginBottom: 12 }}>Thank you!</h3>
            <p style={{ color: "var(--ink-mute)", fontSize: 15 }}>
              {isInvestor ? "We've received your interest and will be in touch soon." : "We've received your message and will be in touch shortly."}
            </p>
            <button onClick={onClose} style={{ marginTop: 24, padding: "10px 24px", background: "var(--ink)", color: "var(--bg)", border: "none", borderRadius: 999, cursor: "pointer", fontFamily: "var(--sans)", fontSize: 13, fontWeight: 600 }}>Close</button>
          </div>
        ) : (
          <>
            <h3 style={{ fontFamily: "var(--serif)", fontSize: 28, marginBottom: 6, fontWeight: 400 }}>
              {isInvestor ? "Investor Enquiry" : "Collaborate with us"}
            </h3>
            <p style={{ color: "var(--ink-mute)", fontSize: 14, marginBottom: 8 }}>
              {isInvestor ? "Tell us about yourself and we'll be in touch." : "Tell us about your idea and we'll get back to you."}
            </p>
            {status === "error" && (
              <div style={{ padding: "10px 14px", background: "#fdecea", color: "#b71c1c", borderRadius: 4, fontSize: 13, marginBottom: 12 }}>{errMsg}</div>
            )}
            <form onSubmit={submit}>
              <label style={labelStyle}>Full Name *</label>
              <input style={inputStyle} value={form.name} onChange={set("name")} required placeholder="Your name" />
              <label style={labelStyle}>Email *</label>
              <input style={inputStyle} type="email" value={form.email} onChange={set("email")} required placeholder="your@email.com" />
              {isInvestor && (
                <>
                  <label style={labelStyle}>Company / Fund</label>
                  <input style={inputStyle} value={form.company} onChange={set("company")} placeholder="Your firm name" />
                </>
              )}
              {!isInvestor && (
                <>
                  <label style={labelStyle}>Subject</label>
                  <input style={inputStyle} value={form.subject} onChange={set("subject")} placeholder="What's this about?" />
                </>
              )}
              <label style={labelStyle}>Message *</label>
              <textarea
                style={{ ...inputStyle, resize: "vertical", minHeight: 120 }}
                value={form.message} onChange={set("message")} required
                placeholder={isInvestor ? "Tell us about your investment focus…" : "Tell us about your idea or how you'd like to collaborate…"}
              />
              <button type="submit" disabled={status === "loading"} style={{ marginTop: 24, padding: "12px 28px", background: "var(--ink)", color: "var(--bg)", border: "none", borderRadius: 999, cursor: "pointer", fontFamily: "var(--sans)", fontSize: 13, fontWeight: 600, width: "100%" }}>
                {status === "loading" ? "Sending…" : isInvestor ? "Send Enquiry" : "Send Message"}
              </button>
            </form>
          </>
        )}
      </div>
    </div>
  );
};

/* Section components for Herb Immortal homepage */

const Tag = ({ children }) => (
  <span className="tag">{children}</span>
);

const SectionHead = ({ tag, num, children }) => (
  <div className="eyebrow-row">
    <Tag>{tag}</Tag>
    <span className="num">{num}</span>
  </div>
);

const Arrow = () => <span className="arr" aria-hidden="true"></span>;

// ----------------------------- Nav -----------------------------
const Nav = () => {
  const [isVisible, setIsVisible] = React.useState(true);
  const [navModal, setNavModal] = React.useState(null);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const lastScrollY = React.useRef(0);

  React.useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY;
      if (currentScrollY > lastScrollY.current && currentScrollY > 60) {
        setIsVisible(false);
      } else if (currentScrollY < lastScrollY.current) {
        setIsVisible(true);
      }
      lastScrollY.current = currentScrollY;
    };
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const closeMenu = () => setMenuOpen(false);

  return (
    <>
      {navModal && <Modal type={navModal} onClose={() => setNavModal(null)} />}
      <nav className={`nav ${isVisible ? "" : "nav-hidden"}`}>
        <div className="wrap nav-inner">
          <a href="/" className="brand" aria-label="Herb Immortal — home" onClick={(e) => { closeMenu(); window.__nav(e, 'top'); }}>
            <img className="mark" src={window.__resources?.logoMark || "assets/logo-mark.png"} alt="" />
            <span className="wordmark">Herb Immortal</span>
          </a>
          <div className="nav-links">
            <a href="/vision" onClick={(e) => window.__nav(e, 'vision')}>Vision</a>
            <a href="/solutions" onClick={(e) => window.__nav(e, 'solutions')}>Solutions</a>
            <a href="/platforms" onClick={(e) => window.__nav(e, 'platforms')}>Platforms</a>
            <a href="/founders" onClick={(e) => window.__nav(e, 'founders')}>Founders</a>
            <a href="/invest" onClick={(e) => window.__nav(e, 'invest')}>Investors</a>
          </div>
          <div className="nav-cta desktop-only">
            <a href="/invest" className="btn" onClick={(e) => window.__nav(e, 'invest')}>We're raising <Arrow /></a>
          </div>
          <button
            className="mobile-menu-btn"
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label="Toggle menu"
          >
            <span className={`hamburger ${menuOpen ? "open" : ""}`}>
              <span></span>
              <span></span>
            </span>
          </button>
        </div>
      </nav>

      {/* Mobile menu overlay */}
      <div className={`mobile-menu-overlay ${menuOpen ? "open" : ""}`}>
        <div className="mobile-menu-content">
          <a href="/vision" className="mobile-menu-link serif" onClick={(e) => { closeMenu(); window.__nav(e, 'vision'); }}>Vision</a>
          <a href="/solutions" className="mobile-menu-link serif" onClick={(e) => { closeMenu(); window.__nav(e, 'solutions'); }}>Solutions</a>
          <a href="/platforms" className="mobile-menu-link serif" onClick={(e) => { closeMenu(); window.__nav(e, 'platforms'); }}>Platforms</a>
          <a href="/founders" className="mobile-menu-link serif" onClick={(e) => { closeMenu(); window.__nav(e, 'founders'); }}>Founders</a>
          <a href="/invest" className="mobile-menu-link serif" onClick={(e) => { closeMenu(); window.__nav(e, 'invest'); }}>Investors</a>
        </div>
        <div className="mobile-menu-actions">
          <a href="https://myherbalshop.ai/" className="btn" style={{ width: "100%", justifyContent: "center", marginBottom: "12px" }}>Sign in to Myherbalshop</a>
          <a href="https://herbimmortal.org/" className="btn ghost" style={{ width: "100%", justifyContent: "center" }}>Sign in to herbimmortal.org</a>
        </div>
      </div>
    </>
  );
};

// ----------------------------- Hero -----------------------------
const Hero = () => {
  const [animate, setAnimate] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setAnimate(true), 100);
    return () => clearTimeout(t);
  }, []);

  return (
    <section className="hero" id="top">
      <HeroParticles />
      <div className="wrap hero-center">
        <span className={`tag hero-anim ${animate ? "hero-anim-in" : ""}`} style={{ "--hero-delay": "0s" }}>Est. 2026 · Toronto · India · Global</span>
        <h1 className={`display hero-anim ${animate ? "hero-anim-in" : ""}`} style={{ "--hero-delay": "0.15s" }}>
          The Operating&nbsp;System<br />
          for <em>Traditional Wellness.</em>
        </h1>
        <p className={`hero-slogan hero-anim ${animate ? "hero-anim-in" : ""}`} style={{ "--hero-delay": "0.35s" }}>
          The world's first unified platform for traditional wellness — connecting healers,
          knowledge, and communities across every tradition, every language, every border.
        </p>
        <div className={`btn-row hero-anim ${animate ? "hero-anim-in" : ""}`} style={{ "--hero-delay": "0.5s" }}>
          <a href="/vision" className="btn" onClick={(e) => window.__nav(e, 'vision')}>Explore our vision <Arrow /></a>
          <a href="/invest" className="btn ghost" onClick={(e) => window.__nav(e, 'invest')}>We're raising <Arrow /></a>
        </div>
      </div>
    </section>
  );
};

const Globe = () => (
  <div className="globe-wrap">
    <AnimatedGlobe />
  </div>
);

// --------------------------- Marquee ----------------------------
const Marquee = () => {
  const traditions = [
    "Ayurveda", "Traditional Chinese Medicine", "Unani", "Siddha",
    "Indigenous Healing", "Herbal Medicine", "Naturopathy", "Kampo"
  ];
  const Item = ({ children }) => (
    <span className="marquee-item"><span className="dot"></span>{children}</span>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        {[...traditions, ...traditions].map((t, i) => <Item key={i}>{t}</Item>)}
      </div>
    </div>
  );
};

// ---------------------- Industry Gap ---------------------------
const IndustryGap = () => (
  <section id="gap">
    <div className="wrap">
      <SectionHead tag="The Industry Gap" num="01 / 06" />
      <div className="split">
        <h2 className="h2">The industry exists.<br />The infrastructure does not.</h2>
        <div>
          <p className="kicker">
            Ayurveda, TCM, Unani, Siddha — and every traditional medicine system —
            are the lived reality of billions. Yet the industry has no shared digital infrastructure.
          </p>
          <p className="kicker" style={{ marginTop: 20, color: "var(--ink-mute)" }}>
            Knowledge is fragmented. Trust standards are uneven. Access still depends on
            geography and language. <span style={{ color: "var(--ink)" }}>Herb Immortal is building the missing layer.</span>
          </p>
        </div>
      </div>

      <div className="gap-list gap-with-art">
        <BotanicalLeaf className="gap-botanical" />
        {[
          { n: "I", t: "Discovery Gap", b: "No universal way to find trusted practitioners and products globally — every search starts from zero." },
          { n: "II", t: "Trust Gap", b: "No consistent cross-region verification or quality standards. Trust is a question, not a feature." },
          { n: "III", t: "Access Gap", b: "Knowledge lives in silos — books, lineages, languages. Not as usable, queryable infrastructure." },
        ].map((g) => (
          <div className="gap-row" key={g.n}>
            <span className="num">— {g.n}</span>
            <h3 className="title">{g.t}</h3>
            <p className="body">{g.b}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ----------------------------- Stats ----------------------------
const Stats = () => (
  <section className="stats">
    <div className="wrap">
      <SectionHead tag="The Moment" num="02 / 06" />
      <div className="split" style={{ alignItems: "end" }}>
        <h2 className="h2">A $6.8T industry.<br />Zero shared infrastructure.</h2>
        <p className="kicker" style={{ color: "color-mix(in oklab, currentColor 78%, transparent)" }}>
          Global demand. Cultural momentum. AI readiness. All three are converging.
          The missing piece has always been trusted, unified infrastructure.
        </p>
      </div>
      <div className="stats-row">
        <div className="stat">
          <span className="label">Market</span>
          <div className="figure">$6.8T</div>
          <p className="desc">Global wellness economy — and the fastest-growing slice of healthcare.</p>
        </div>
        <div className="stat">
          <span className="label">Users</span>
          <div className="figure">3.5B+</div>
          <p className="desc">People who already use traditional medicine as primary care.</p>
        </div>
        <div className="stat">
          <span className="label">Platforms</span>
          <div className="figure">Only 1</div>
          <p className="desc">Unified, cross-tradition, cross-border infrastructure. Just one.</p>
        </div>
        <div className="stat">
          <span className="label">Window</span>
          <div className="figure">Now</div>
          <p className="desc">AI maturity, mobile-first regions, global wellness shift — all aligned.</p>
        </div>
      </div>
      <p className="stats-foot">Until now.</p>
    </div>
  </section>
);

// ----------------------------- Image Strip --------------------
const ImageStripSection = () => <ImageStrip />;

// ----------------------------- Vision ---------------------------
const Vision = () => (
  <section id="vision">
    <div className="wrap">
      <SectionHead tag="The Vision" num="03 / 06" />
      <div className="vision-with-art">
        <div>
          <p className="vision-quote serif">
            A future where traditional wellness is <em>easier to discover,</em> easier to trust,
            and easier to live — <em>affordable</em> and accessible to <em>everyone,</em> every single day.
          </p>
          <div className="vision-tagline">One Globe — One Vision — One Platform</div>
        </div>
        <div className="vision-art">
          <BotanicalLeaf />
        </div>
      </div>
    </div>
  </section>
);

// --------------------------- Solutions --------------------------
const Solutions = () => {
  const items = [
    { n: "01", t: "Discovery", b: "Find the right practitioner, product, or remedy — in any language, for any tradition.", g: "search" },
    { n: "02", t: "Trust Layer", b: "Credentialing and verification — so users can trust every healer, product, and recommendation.", g: "shield" },
    { n: "03", t: "Knowledge Base", b: "Preserve and democratise traditional wisdom — open, accessible, connected across all traditions.", g: "book" },
    { n: "04", t: "Commerce", b: "Ethical, transparent commerce connecting producers, practitioners, and conscious consumers.", g: "leaf" },
    { n: "05", t: "AI Tools", b: "AI-powered personalisation and consultation — built respectfully for traditional healing contexts.", g: "spark" },
    { n: "06", t: "Open Infrastructure", b: "APIs, data standards, open protocols — so the whole ecosystem builds without starting from zero.", g: "grid" },
  ];
  return (
    <section id="solutions">
      <div className="wrap">
        <SectionHead tag="Our Solutions" num="04 / 06" />
        <div className="split">
          <h2 className="h2">One connected ecosystem.</h2>
          <div>
            <p className="kicker">
              Not just products. The foundation — for how traditional wellness is discovered,
              verified, and experienced at global scale.
            </p>
          </div>
        </div>
        <div className="sol-cards">
          {items.map((it, idx) => (
            <article className="sol-card reveal" key={it.n} style={{ "--i": idx }}>
              <div className="sol-card-icon"><Glyph name={it.g} /></div>
              <h3 className="sol-card-title">{it.t}</h3>
              <p className="sol-card-body">{it.b}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const Glyph = ({ name }) => {
  const stroke = "currentColor";
  const props = { width: 36, height: 36, viewBox: "0 0 36 36", fill: "none", stroke, strokeWidth: 1.2 };
  switch (name) {
    case "search": return (<svg {...props}><circle cx="15" cy="15" r="9" /><line x1="22" y1="22" x2="30" y2="30" /></svg>);
    case "shield": return (<svg {...props}><path d="M18 4 L30 9 V18 C30 25 24 30 18 32 C12 30 6 25 6 18 V9 Z" /><path d="M12 17 L17 22 L24 14" /></svg>);
    case "book":   return (<svg {...props}><path d="M6 7 H17 V30 H6 Z" /><path d="M19 7 H30 V30 H19 Z" /><path d="M17 7 V30" /></svg>);
    case "leaf":   return (<svg {...props}><path d="M6 30 C6 16 16 6 30 6 C30 20 20 30 6 30 Z" /><path d="M9 27 L24 12" /></svg>);
    case "spark":  return (<svg {...props}><path d="M18 4 L20 16 L32 18 L20 20 L18 32 L16 20 L4 18 L16 16 Z" /></svg>);
    case "grid":   return (<svg {...props}><rect x="6" y="6" width="9" height="9" /><rect x="21" y="6" width="9" height="9" /><rect x="6" y="21" width="9" height="9" /><rect x="21" y="21" width="9" height="9" /></svg>);
    default: return null;
  }
};

// --------------------------- Platforms --------------------------
const Platforms = () => {
  const [activeTab, setActiveTab] = React.useState(0);
  const platformsData = [
    {
      id: "consumer",
      glyph: "[ MARKETPLACE · CONSUMER ]",
      name: "MyHerbalShop",
      ext: ".ai",
      sub: "Your trusted gateway to traditional wellness.",
      desc: "An AI-powered marketplace connecting conscious consumers with verified herbalists, ethical producers, and authentic botanical goods from across the globe.",
      bullets: ["AI-powered personalisation", "Verified practitioners & producers", "Transparent ingredient sourcing"],
      image: "screen 2.png"
    },
    {
      id: "open",
      glyph: "[ KNOWLEDGE COMMONS · OPEN ]",
      name: "HerbImmortal",
      ext: ".org",
      sub: "Free knowledge for every healer, forever.",
      desc: "An open-access knowledge platform preserving and democratising traditional wellness wisdom — freely available to practitioners and communities everywhere.",
      bullets: ["Cross-tradition knowledge — free", "Practitioner-contributed content", "Multi-language & multi-tradition"],
      image: "screen.png"
    }
  ];

  return (
    <section id="platforms">
      <div className="wrap">
        <SectionHead tag="Our Platforms" num="05 / 06" />
        <div className="split">
          <h2 className="h2">One platform.<br />One mission.</h2>
          <p className="kicker">
            A trusted consumer gateway and an open knowledge commons — together forming
            the infrastructure for global traditional wellness.
          </p>
        </div>
        <div className="platform-tabs-container">
          <div className="platform-tabs">
            <div className="platform-tab-highlight" style={{ transform: `translateX(${activeTab * 100}%)` }}></div>
            {platformsData.map((p, idx) => (
              <button key={p.id} className={`platform-tab ${activeTab === idx ? "active" : ""}`} onClick={() => setActiveTab(idx)}>
                {p.name}{p.ext}
              </button>
            ))}
          </div>
        </div>
        <div className="platforms-carousel">
          <article className="platform-card fade-in" key={activeTab}>
            <div className="platform-card-visual" style={{ padding: 0, overflow: "hidden", borderRadius: "inherit" }}>
              <img
                src={platformsData[activeTab].image}
                alt={platformsData[activeTab].name + platformsData[activeTab].ext}
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
              />
            </div>
            <p className="platform-card-desc">{platformsData[activeTab].desc}</p>
          </article>
        </div>
      </div>
    </section>
  );
};

// --------------------------- Founders ---------------------------
const Founders = () => (
  <section id="founders">
    <div className="wrap">
      <SectionHead tag="Founders' Note" num="06 / 06" />
      <div className="split">
        <h2 className="h2">Why we are<br />building this.</h2>
        <div>
          <p className="kicker">
            Traditional medicine is not alternative. For billions of people around the world,
            it is simply medicine. It is the care they grew up with. The wisdom passed through
            families, communities, healers, and generations.
          </p>
          <p className="kicker" style={{ marginTop: 20 }}>
            Yet this vast, living body of knowledge has no global home. No shared language.
            No infrastructure that connects a healer in rural India with a seeker in Toronto.
          </p>
          <p className="kicker" style={{ marginTop: 20 }}>
            We are building that home. Not to replace what exists — but to give it the
            infrastructure it has always deserved.
          </p>
        </div>
      </div>
      <p className="founders-quote">
        The world's oldest healing systems deserve world-class digital infrastructure.
      </p>
    </div>
  </section>
);

// --------------------------- Seed ---------------------------
const Seed = () => {
  const [modal, setModal] = React.useState(null);

  const openDeck = async () => {
    try {
      const data = await apiFetch("/invest/deck");
      window.open(data.url, "_blank");
    } catch {
      alert("Investor deck is not available yet. Please check back soon.");
    }
  };

  return (
    <>
      {modal && <Modal type={modal} onClose={() => setModal(null)} />}
      <section className="seed" id="invest">
        <div className="wrap">
          <div className="seed-inner">
            <div>
              <Tag>Seed Round Open</Tag>
              <h2 className="display" style={{ marginTop: 20 }}>Join us at the beginning.</h2>
            </div>
            <div>
              <p className="kicker">
                We're raising our first round. If you believe the world's oldest healing systems
                deserve world-class digital infrastructure — we'd love to hear from you.
              </p>
              <div className="btn-row" style={{ marginTop: 32 }}>
                <button className="btn" onClick={openDeck}>View investor deck <Arrow /></button>
                <button className="btn ghost" onClick={() => setModal("collaborate")}>Collaborate with us <Arrow /></button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

// --------------------------- Footer ---------------------------
const Footer = () => (
  <footer className="footer">
    <div className="wrap">
      <div className="footer-grid">
        <div className="brand-block">
          <div className="name-row">
            <img className="mark" src={window.__resources?.logoMark || "assets/logo-mark.png"} alt="" />
            <div className="name">Herb Immortal</div>
          </div>
          <p className="desc">
            The Operating System for Traditional Wellness. One Globe. One Vision. One Platform.
          </p>
          <div className="locales">Toronto · India · Global</div>
        </div>
        <div>
          <h4>Platform</h4>
          <ul>
            <li><a href="/vision" onClick={(e) => window.__nav(e, 'vision')}>Our Vision</a></li>
            <li><a href="/solutions" onClick={(e) => window.__nav(e, 'solutions')}>Solutions</a></li>
            <li><a href="/founders" onClick={(e) => window.__nav(e, 'founders')}>Founders' Note</a></li>
            <li><a href="BrandGuidelines.html">Brand Guidelines</a></li>
          </ul>
        </div>
        <div>
          <h4>Products</h4>
          <ul>
            <li><a href="https://myherbalshop.ai/">MyHerbalShop.ai</a></li>
            <li><a href="https://herbimmortal.org/">HerbImmortal.org</a></li>
          </ul>
        </div>
        <div>
          <h4>Company</h4>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Founders</a></li>
            <li><a href="#invest">Investors</a></li>
            <li><a href="#">Collaborate</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-meta">
        <span>© 2026 Herb Immortal</span>
        <span>Timeless wisdom. Modern infrastructure.</span>
      </div>
      <div className="footer-bigname">
        <span className="serif">Herb Immortal</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  Nav, Hero, Marquee, IndustryGap, Stats, ImageStripSection, Vision, Solutions, Platforms, Founders, Seed, Footer
});