'use client';

import { Smile } from 'lucide-react';
import { SiteHeader } from '@/components/site-header';

const Logo = () => (
  <span className="flex items-center gap-2">
    <span className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
      <Smile className="size-4" />
    </span>
    <span className="font-heading text-base font-semibold">Sorriso Pleno</span>
  </span>
);

export default function SiteHeaderDemo() {
  return (
    // Caixa rolável só para a prévia: role para ver o cabeçalho fixo (sticky).
    <div className="h-[420px] w-full overflow-y-auto rounded-xl bg-background">
      <SiteHeader
        logo={<Logo />}
        logoLabel="Sorriso Pleno — página inicial"
        links={[
          { label: 'Início', href: '#', isCurrent: true },
          { label: 'Tratamentos', href: '#' },
          { label: 'Equipe', href: '#' },
          { label: 'Convênios', href: '#' },
          { label: 'Contato', href: '#' },
        ]}
        secondaryAction={{ label: 'Área do paciente', href: '#' }}
        cta={{ label: 'Agendar consulta', href: '#' }}
      />
      <section className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
        <h1 className="max-w-2xl font-heading text-3xl font-semibold tracking-tight">
          Seu sorriso cuidado por especialistas, perto de você.
        </h1>
        <p className="mt-3 max-w-xl text-muted-foreground">
          Clínica odontológica no centro de Campinas, com atendimento de segunda a sábado e agendamento online.
        </p>
        <div className="mt-8 grid gap-4 sm:grid-cols-3">
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <div key={i} className="h-32 rounded-xl bg-muted/60" />
          ))}
        </div>
      </section>
    </div>
  );
}

'use client';

import { SiteHeader } from '@/components/site-header';

export default function SiteHeaderSimple() {
  return (
    <div className="w-full">
      <SiteHeader
        sticky={false}
        logo={<span className="font-heading text-lg font-semibold">Andrade &amp; Lima</span>}
        logoLabel="Andrade & Lima Contabilidade — página inicial"
        links={[
          { label: 'Serviços', href: '#' },
          { label: 'Sobre', href: '#' },
          { label: 'Blog', href: '#' },
          { label: 'Contato', href: '#' },
        ]}
      />
    </div>
  );
}

'use client';

import { Glasses } from 'lucide-react';
import { SiteHeader } from '@/components/site-header';

export default function SiteHeaderCtaOnly() {
  return (
    <div className="w-full">
      <SiteHeader
        sticky={false}
        logo={
          <span className="flex items-center gap-2 font-heading text-base font-semibold">
            <Glasses className="size-5" /> Ótica Visão Clara
          </span>
        }
        logoLabel="Ótica Visão Clara — página inicial"
        cta={{ label: 'Agendar exame de vista', href: '#agendar' }}
      />
    </div>
  );
}