// Hero v9.1 — Отдел виртуальных сотрудников. Editorial typography + spotlight + chat teaser + reduced portal.

function HeroSpotlight() {
  return (
    <svg className="animate-spotlight pointer-events-none absolute z-0 opacity-0"
      style={{ top:'-40%', left:'-20%', height:'160%', width:'140%' }}
      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3787 2842" fill="none" aria-hidden="true">
      <g filter="url(#hero-spotlight-filter)">
        <ellipse cx="1924.71" cy="273.501" rx="1924.71" ry="273.501"
          transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
          fill="#5C8A3A" fillOpacity="0.18"/>
      </g>
      <defs>
        <filter id="hero-spotlight-filter" x="0" y="0" width="3787" height="2842"
          filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
          <feGaussianBlur stdDeviation="151" result="blur"/>
        </filter>
      </defs>
    </svg>
  );
}

function HeroApprovalCard({ a }) {
  const C = window.DT.color;
  const r = window.EMPLOYEES.find(e => e.id === a.role);
  return (
    <div className="p-3.5 rounded-[12px]"
      style={{ background:'#FFFFFF', border:'1px solid rgba(194,84,48,0.25)',
        boxShadow:'0 8px 20px -10px rgba(194,84,48,0.20)' }}>
      <div className="flex items-center justify-between mb-2">
        <div className="flex items-center gap-2">
          <span className="text-[13px] leading-none">{r.emoji}</span>
          <span className="text-[10px] uppercase tracking-[0.12em] font-bold"
            style={{ color:C.inkMute, fontFamily:window.DT.font.mono }}>{r.short}</span>
        </div>
        <StatusPill kind="approval"/>
      </div>
      <div className="text-[13px] font-semibold mb-2 leading-[1.3]" style={{ color:C.ink }}>{a.title}</div>
      <div className="flex items-center gap-2">
        <button className="h-7 px-3 rounded-full text-[11px] font-bold"
          style={{ background:C.ink, color:C.cream }}>Подтвердить</button>
        <button className="h-7 px-3 rounded-full text-[11px] font-semibold"
          style={{ background:'transparent', color:C.inkSoft, border:'1px solid rgba(19,17,14,0.18)' }}>Изменить</button>
      </div>
    </div>
  );
}

function Hero() {
  const C = window.DT.color;
  const DT = window.DT;
  const approvals = window.APPROVALS.slice(0, 1);
  const tgUrl = 'https://t.me/digstaff_contact_bot';
  return (
    <section id="top" className="relative overflow-hidden pt-24 lg:pt-28 pb-16 lg:pb-20 px-6 lg:px-12">
      <HeroSpotlight/>

      <div className="relative z-10 max-w-[1400px] mx-auto">

        <div className="flex items-center justify-between mb-10">
          <Eyebrow>§00 · digstaff.ru — отдел виртуальных сотрудников</Eyebrow>
          <span className="hidden md:flex items-center gap-2 text-[11px] uppercase tracking-[0.14em]"
            style={{ color:C.inkMute, fontFamily:DT.font.mono }}>
            <span className="w-1.5 h-1.5 rounded-full animate-pulse" style={{ background:C.grass }}/>
            вся команда онлайн{'\u00A0·\u00A0'}1 ждёт подтверждения
          </span>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-10 items-start">

          {/* LEFT: copy + chat teaser */}
          <div className="lg:col-span-7 space-y-7">
            <Reveal>
              <h1 className="font-medium tracking-[-0.04em] leading-[0.95]"
                style={{ fontFamily:DT.font.display, color:C.ink, fontSize:'clamp(52px, 6.8vw, 104px)' }}>
                Отдел{' '}
                <span style={{ color:C.grass, fontFamily:DT.font.serif, fontStyle:'italic', fontWeight:300 }}>
                  виртуальных сотрудников
                </span>.
              </h1>
            </Reveal>

            <Reveal delay={100}>
              <p className="text-[22px] lg:text-[28px] leading-[1.25] italic max-w-[26ch]"
                style={{ color:C.inkSoft, fontFamily:DT.font.serif, fontWeight:400 }}>
                С доступом к вашим системам.{' '}
                <span style={{ color:C.ink }}>Как настоящий.</span>
              </p>
            </Reveal>

            <Reveal delay={160}>
              <p className="text-[15.5px] lg:text-[16.5px] leading-[1.55] max-w-[52ch]"
                style={{ color:C.inkSoft }}>
                Бухгалтер, юрист, продажник, HR и другие. Работают с вашими <span style={{ color:C.ink, fontWeight:600 }}>1С, amoCRM, ЕГРЮЛ, банком, hh.ru</span>. В Mini App вашего AI-офиса в Telegram и в любом групповом чате — по @-упоминанию.
              </p>
            </Reveal>

            <Reveal delay={220}>
              <div className="flex flex-wrap items-center gap-3">
                <Btn variant="primary" size="lg" icon="ArrowRight" as="a" href={tgUrl} target="_blank" rel="noopener">
                  Попробовать с агентом
                </Btn>
                <Btn variant="ghost" size="lg" icon="Play" as="a" href="#demo">
                  Посмотреть, как работают
                </Btn>
              </div>
            </Reveal>

            <Reveal delay={300}>
              <div className="pt-2">
                <HeroChatTeaser/>
              </div>
            </Reveal>
          </div>

          {/* RIGHT: portal + approvals */}
          <div className="lg:col-span-5 space-y-4">
            <Reveal delay={160}>
              <Eyebrow>Сейчас в офисе</Eyebrow>
            </Reveal>
            <Reveal delay={220}>
              <PortalCompact/>
            </Reveal>
            <Reveal delay={300}>
              <div className="space-y-2.5">
                <div className="flex items-center justify-between">
                  <span className="text-[10px] uppercase tracking-[0.16em] font-bold"
                    style={{ color:C.accent, fontFamily:DT.font.mono }}>
                    {'Очередь подтверждений · 1'}
                  </span>
                  <span className="text-[11px]" style={{ color:C.inkMute }}>важное действие ждёт вас</span>
                </div>
                {approvals.map((a, i) => <HeroApprovalCard key={i} a={a}/>)}
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;