/* HERO — left text + right composition of 3 floating cards */

const HubLogo = ({dark=false}) => {
  const color = dark ? '#FAF8F3' : '#0F172A';
  return (
    <div className="flex items-center gap-2 select-none">
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
        <rect x="1" y="1" width="26" height="26" rx="7" stroke={color} strokeWidth="1.5"/>
        <path d="M8 8v12M8 14h12M20 8v12" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
        <circle cx="14" cy="14" r="1.6" fill="#C9A063"/>
      </svg>
      <span style={{fontFamily:'"Playfair Display"',fontWeight:600,fontSize:22,letterSpacing:'-0.01em',color}}>
        Hub<span style={{color:'#C9A063'}}>Med</span>
      </span>
    </div>
  );
};

const Navbar = () => {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`sticky top-0 z-40 transition-all ${scrolled ? 'backdrop-blur-md bg-cream/80 border-b border-borderLine' : 'bg-transparent'}`}>
      <div className="max-w-[1200px] mx-auto px-6 md:px-10 h-[72px] flex items-center justify-between">
        <a href="#top"><HubLogo/></a>
        <nav className="hidden md:flex items-center gap-8 text-[15px] text-textSecondary">
          <a href="#como-funciona" className="hover:text-midnight transition">Como funciona</a>
          <a href="#planos" className="hover:text-midnight transition">Planos</a>
          <a href="#diferenciais" className="hover:text-midnight transition">Diferenciais</a>
          <a href="#faq" className="hover:text-midnight transition">FAQ</a>
        </nav>
        <div className="hidden md:block">
          <a href="#qualif-popup" className="btn-primary">Agendar diagnóstico</a>
        </div>
        <button className="md:hidden text-midnight" onClick={()=>setOpen(!open)} aria-label="Menu">
          {open ? <IconClose/> : <IconMenu/>}
        </button>
      </div>
      {open && (
        <div className="md:hidden border-t border-borderLine bg-cream">
          <div className="px-6 py-4 flex flex-col gap-3 text-[15px]">
            <a href="#como-funciona" onClick={()=>setOpen(false)}>Como funciona</a>
            <a href="#planos" onClick={()=>setOpen(false)}>Planos</a>
            <a href="#diferenciais" onClick={()=>setOpen(false)}>Diferenciais</a>
            <a href="#faq" onClick={()=>setOpen(false)}>FAQ</a>
            <a href="#qualif-popup" onClick={()=>setOpen(false)} className="btn-primary mt-2 w-max">Agendar diagnóstico</a>
          </div>
        </div>
      )}
    </header>
  );
};

/* Floating card 1 — WhatsApp */
const WhatsappCard = () => (
  <div className="card-base float-shadow-lg p-0 overflow-hidden" style={{width: 280}}>
    <div className="flex items-center gap-3 px-4 py-3 border-b border-borderLine bg-white">
      <div className="relative">
        <div className="w-9 h-9 rounded-full flex items-center justify-center text-[12px] font-semibold text-midnight" style={{background:'#EDE0C7', fontFamily:'"DM Sans"'}}>CM</div>
        <span className="absolute -right-0.5 -bottom-0.5 w-2.5 h-2.5 rounded-full bg-okGreen border-2 border-white"></span>
      </div>
      <div className="flex-1 min-w-0">
        <div className="text-[14px] font-medium text-midnight leading-tight">Carla Mendes</div>
        <div className="text-[11px] text-textMuted flex items-center gap-1.5">
          <span className="w-1.5 h-1.5 rounded-full bg-okGreen inline-block"></span>
          online
        </div>
      </div>
      <div className="text-textMuted"><IconWhatsapp size={18}/></div>
    </div>
    <div className="px-4 py-4 bg-[#F5F5F4] space-y-2">
      <div className="flex">
        <div className="bg-white text-[13px] text-textPrimary rounded-2xl rounded-tl-md px-3 py-2 max-w-[200px] border border-borderSoft">
          Oi, vi o anúncio do protocolo
        </div>
      </div>
      <div className="flex justify-end">
        <div className="text-[13px] rounded-2xl rounded-tr-md px-3 py-2 max-w-[210px]" style={{background:'#1E40AF', color:'#fff'}}>
          Oi Carla! Posso agendar uma avaliação?
        </div>
      </div>
      <div className="flex">
        <div className="bg-white text-[13px] text-textPrimary rounded-2xl rounded-tl-md px-3 py-2 max-w-[180px] border border-borderSoft">
          Pode sim, pra terça?
        </div>
      </div>
      <div className="flex items-center gap-2 pt-1">
        <div className="flex-1 bg-white rounded-full border border-borderSoft px-3 py-1.5 text-[12px] text-textMuted">Digitar mensagem…</div>
        <div className="w-7 h-7 rounded-full flex items-center justify-center" style={{background:'#1E40AF', color:'#fff'}}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12l16-8-6 16-2.5-6.5z"/></svg>
        </div>
      </div>
    </div>
  </div>
);

/* Floating card 2 — Calendar */
const CalendarCard = () => {
  const days = Array.from({length: 31}, (_, i) => i+1);
  const pre = [null, null, null]; // March 2026 starts Sunday
  const bookedDays = new Set([3, 5, 10, 12, 17, 23, 26, 30]);
  const selected = 18;
  return (
    <div className="card-base float-shadow-lg overflow-hidden" style={{width: 270}}>
      <div className="flex items-center justify-between px-4 py-3 border-b border-borderLine">
        <div className="flex items-center gap-2">
          <div className="w-6 h-6 rounded-md flex items-center justify-center" style={{background:'#EDE0C7'}}>
            <IconCalendar size={14}/>
          </div>
          <span className="text-[13px] font-medium text-midnight">Março 2026</span>
        </div>
        <div className="flex items-center gap-1 text-textMuted">
          <button className="w-6 h-6 rounded hover:bg-borderSoft flex items-center justify-center">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
          </button>
          <button className="w-6 h-6 rounded hover:bg-borderSoft flex items-center justify-center">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
          </button>
        </div>
      </div>
      <div className="p-3">
        <div className="grid grid-cols-7 text-center text-[10px] text-textMuted uppercase tracking-wider mb-1" style={{letterSpacing:'0.08em'}}>
          {['D','S','T','Q','Q','S','S'].map((d,i)=> <div key={i} className="py-1">{d}</div>)}
        </div>
        <div className="grid grid-cols-7 gap-y-1 gap-x-0.5 text-center text-[11px]">
          {pre.map((_,i)=> <div key={'p'+i} className="h-7"></div>)}
          {days.map(d => {
            const booked = bookedDays.has(d);
            const isSel = d === selected;
            return (
              <div key={d} className="h-7 flex items-center justify-center">
                <div className={`w-7 h-7 rounded-full flex items-center justify-center relative text-textSecondary ${isSel ? 'text-white' : ''}`}
                  style={isSel ? {background:'#1E40AF'} : {}}>
                  {d}
                  {booked && !isSel && <span className="absolute bottom-0.5 w-1 h-1 rounded-full" style={{background:'#C9A063'}}></span>}
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <div className="px-4 py-3 border-t border-borderLine flex items-center gap-2" style={{background:'#FAF8F3'}}>
        <span className="dot-gold"></span>
        <span className="text-[11px]" style={{color:'#C9A063', fontWeight: 500}}>14:30 · Carla Mendes · Protocolo Melasma</span>
      </div>
    </div>
  );
};

/* Floating card 3 — Kanban */
const KanbanCard = () => {
  const Col = ({title, count, children}) => (
    <div className="flex-1 min-w-0">
      <div className="flex items-center justify-between mb-2">
        <span className="text-[10px] uppercase tracking-wider font-medium text-textMuted" style={{letterSpacing:'0.08em'}}>{title}</span>
        <span className="text-[10px] text-textMuted">{count}</span>
      </div>
      <div className="space-y-1.5">{children}</div>
    </div>
  );
  const Mini = ({name, tag, tagColor}) => (
    <div className="bg-white border border-borderLine rounded-md px-2 py-1.5">
      <div className="text-[11px] text-midnight font-medium truncate">{name}</div>
      <div className="mt-1 inline-block text-[9px] px-1.5 py-0.5 rounded" style={{background:tagColor, color:'#0F172A', fontWeight:500}}>{tag}</div>
    </div>
  );
  return (
    <div className="card-base float-shadow-lg overflow-hidden relative" style={{width: 300}}>
      <div className="flex items-center justify-between px-4 py-3 border-b border-borderLine">
        <div className="flex items-center gap-2">
          <div className="w-6 h-6 rounded-md flex items-center justify-center" style={{background:'#EDE0C7'}}>
            <IconKanban size={14}/>
          </div>
          <span className="text-[13px] font-medium text-midnight">Pipeline · Março</span>
        </div>
        <span className="pill pill-gold" style={{fontSize:10, padding:'2px 8px'}}>+12 hoje</span>
      </div>
      <div className="p-3 flex gap-2" style={{background:'#FAF8F3'}}>
        <Col title="Novo" count="7">
          <Mini name="Ana Prado" tag="Botox" tagColor="#EDE0C7"/>
          <Mini name="Rafa S." tag="Melasma" tagColor="#EDE0C7"/>
        </Col>
        <Col title="Agendado" count="4">
          <Mini name="Carla M." tag="18/03" tagColor="#DBEAFE"/>
        </Col>
        <Col title="Atendido" count="9">
          <Mini name="Júlia T." tag="Retorno" tagColor="#D1FAE5"/>
        </Col>
      </div>
    </div>
  );
};

/* Curved dotted connectors between the 3 cards */
const HeroComposition = () => {
  return (
    <div className="relative w-full" style={{minHeight: 480}}>
      {/* aura */}
      <div className="absolute" style={{
        right: '8%', top: '18%', width: 320, height: 320, borderRadius: '50%',
        background: 'radial-gradient(closest-side, rgba(201,160,99,0.22), rgba(201,160,99,0))',
        filter: 'blur(2px)',
      }}/>
      {/* decorative particles */}
      <div className="absolute w-1.5 h-1.5 rounded-full" style={{background:'#C9A063', top:'8%', right:'18%'}}/>
      <div className="absolute w-1 h-1 rounded-full" style={{background:'#C9A063', top:'70%', right:'6%', opacity:0.7}}/>
      <div className="absolute w-1 h-1 rounded-full" style={{background:'#C9A063', top:'36%', left:'8%', opacity:0.8}}/>

      {/* dotted connectors */}
      <svg className="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 560 480" preserveAspectRatio="none">
        <path d="M 120 360 C 220 260, 260 220, 330 200" stroke="#C9A063" strokeWidth="1.2" strokeDasharray="3 5" fill="none" opacity="0.5"/>
        <path d="M 430 200 C 480 140, 500 120, 470 80" stroke="#C9A063" strokeWidth="1.2" strokeDasharray="3 5" fill="none" opacity="0.5"/>
      </svg>

      {/* Kanban — top right */}
      <div className="absolute" style={{right: '2%', top: 0, transform: 'rotate(-1.5deg)'}}>
        <KanbanCard/>
      </div>
      {/* Calendar — middle, slightly higher */}
      <div className="absolute" style={{left: '32%', top: '30%'}}>
        <CalendarCard/>
      </div>
      {/* WhatsApp — bottom left */}
      <div className="absolute" style={{left: '0%', bottom: '2%', transform: 'rotate(1deg)'}}>
        <WhatsappCard/>
      </div>
    </div>
  );
};

const Hero = () => {
  return (
    <section id="top" className="relative overflow-hidden">
      <div className="max-w-[1200px] mx-auto px-6 md:px-10 pt-10 md:pt-14 pb-20 md:pb-28">
        <div className="grid grid-cols-1 lg:grid-cols-[1.25fr_1fr] gap-12 lg:gap-10 items-center">
          {/* LEFT */}
          <div>
            <div className="flex items-center gap-2 mb-6">
              <span className="dot-gold"></span>
              <span className="eyebrow" style={{color:'#C9A063'}}>Plataforma de crescimento para Clínicas</span>
            </div>
            <h1 className="font-serif font-semibold text-[40px] sm:text-[48px] md:text-[56px] leading-[1.05] text-midnight">
              Sua agenda cheia de pacientes <em className="italic" style={{color:'#C9A063', fontStyle:'italic'}}>particulares.</em><br/>
              Sem você ter que fazer marketing.
            </h1>
            <p className="mt-6 text-[17px] md:text-[19px] max-w-[560px]">
              A gente traz o paciente, qualifica e entrega na sua agenda. Você só atende.
            </p>
            <p className="mt-4 text-[17px] md:text-[19px] max-w-[560px]">
              Tudo operado dentro da HubMed — o serviço que integra Marketing nas Redes Sociais, Tráfego Pago, IA, Agenda e CRM em um só lugar.
            </p>

            <div className="mt-8 flex flex-wrap gap-3">
              <a href="#qualif-popup" className="btn-primary">Quero saber mais <IconArrow size={16}/></a>
              <a href="#como-funciona" className="btn-secondary">Ver como Funciona →</a>
            </div>

            {/* proof bar */}
            <div className="mt-10 flex flex-wrap items-center gap-x-5 gap-y-2 text-[14px] text-textMuted">
              {[
                'Previsibilidade',
                'Setup em até 7 dias',
                'Planos Flexíveis',
              ].map((t, i) => (
                <React.Fragment key={i}>
                  {i > 0 && <span className="dot-gold"></span>}
                  <span>{t}</span>
                </React.Fragment>
              ))}
            </div>
          </div>

          {/* RIGHT */}
          <div className="hidden lg:block">
            <HeroComposition/>
          </div>
          {/* mobile: stacked compact version */}
          <div className="lg:hidden">
            <div className="relative flex flex-col items-center gap-6 py-4">
              <div style={{transform:'rotate(-1deg)'}}><WhatsappCard/></div>
              <div style={{transform:'rotate(1deg)'}}><CalendarCard/></div>
            </div>
          </div>
        </div>
      </div>
      {/* editorial hairline */}
      <div className="max-w-[1200px] mx-auto px-6 md:px-10">
        <div className="hairline opacity-60"/>
      </div>
    </section>
  );
};

Object.assign(window, { HubLogo, Navbar, Hero });