/* Hero + grounding strip. */
const { Button, Badge } = window.LexInToshDesignSystem_e187a4;
const Icon = window.Icon;
const SITE = window.SITE;

function HeroPanel() {
  const rows = [
    { icon: "message-square", name: "MeroAdda\u2122", label: "Legal marketplace and free Q&A" },
    { icon: "sparkles", name: "AI Chat Assistant", label: "Research & brief, on demand" },
    { icon: "folder-open", name: "MeroCase", label: "Practise Management System" },
    { icon: "code", name: "LegalTech API", label: "Developer infrastructure" }
  ];
  return (
    <div className="panel">
      <div className="panel__head">
        <span className="panel__badge"><img src={window.__asset("mark", "assets/lexintosh-mark.png")} alt="" width={20} height={20} /> One platform</span>
        <span className="panel__sub">Four products</span>
      </div>
      <div className="panel__rows">
        {rows.map((r) => (
          <div className="prow" key={r.name}>
            <span className="prow__i"><Icon name={r.icon} size={20} /></span>
            <span className="prow__t"><b>{r.name}</b><span>{r.label}</span></span>
            <Icon name="arrow-up-right" size={18} className="prow__a" />
          </div>
        ))}
      </div>
      <div className="panel__foot"><Icon name="scale" size={15} /> Grounded in Nepal&rsquo;s primary legal sources</div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap hero__grid">
        <div className="hero__copy">
          <window.Reveal><window.Eyebrow mark>Legal technology infrastructure for Nepal</window.Eyebrow></window.Reveal>
          <window.Reveal delay={60}>
            <h1 className="h1">The platform powering Nepal&rsquo;s legal <span className="accent-serif">ecosystem</span></h1>
          </window.Reveal>
          <window.Reveal delay={120}>
            <p className="lead hero__lead">LexInTosh builds AI-grounded legal research, comprehensive case management, and developer infrastructure on one shared platform &mdash; for the public seeking legal help, the advocates and firms who serve them, and the builders shaping Nepal&rsquo;s legal-tech future.</p>
          </window.Reveal>
          <window.Reveal delay={180}>
            <div className="hero__cta">
              <window.SalesButton>Contact Us</window.SalesButton>
              <Button variant="outline" onClick={() => { window.location.hash = "#products"; }} style={{ ...window.CTA_LG }}>Explore Products</Button>
            </div>
          </window.Reveal>
          <window.Reveal delay={240}>
            <div className="hero__meta"><Icon name="zap" size={16} /> <span>Legal research from <b>days to minutes</b></span></div>
          </window.Reveal>
        </div>
        <window.Reveal delay={140} className="hero__visual"><HeroPanel /></window.Reveal>
      </div>
    </section>
  );
}

function Grounding() {
  return (
    <section className="grounding">
      <div className="wrap grounding__inner">
        <span className="grounding__label"><Icon name="scale" size={16} /> Grounded in Nepal&rsquo;s primary legal sources</span>
        <div className="grounding__chips">
          {SITE.sources.map((s) => <span className="chip" key={s}>{s}</span>)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Grounding });