import { createRoot } from 'react-dom/client'
import './styles.css'

const Icon = ({ children, size = 20 }) => (
  <svg className="icon" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    {children}
  </svg>
)

const Check = () => <Icon><path d="m5 12 4 4L19 6" /></Icon>
const Arrow = () => <Icon><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></Icon>
const Calendar = () => <Icon><rect x="3" y="4" width="18" height="17" rx="3" /><path d="M8 2v4M16 2v4M3 10h18" /></Icon>
const Bell = () => <Icon><path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4" /></Icon>

const features = [
  { icon: <><rect x="3" y="4" width="18" height="17" rx="3" /><path d="M8 2v4M16 2v4M3 10h18" /><path d="M8 15h3M13 15h3" /></>, title: 'Agenda inteligente', text: 'Organize aulas, atendimentos e turmas em uma agenda clara e sempre atualizada.' },
  { icon: <><path d="M8 2v4M16 2v4M3 10h18M6 4h12a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3Z" /><path d="M8 15h8" /></>, title: 'Recorrências sem esforço', text: 'Crie séries para treinos e aulas recorrentes em poucos cliques, sem retrabalho.' },
  { icon: <><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M19 8v6M22 11h-6" /></>, title: 'Alunos sempre por perto', text: 'Tenha dados e contatos organizados para atender cada aluno com mais atenção.' },
  { icon: <><path d="M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v8Z" /><path d="m9 11 2 2 4-4" /></>, title: 'Presença confirmada', text: 'Envie convites e acompanhe confirmações para reduzir faltas e incertezas.' },
  { icon: <><path d="m22 2-7 20-4-9-9-4 20-7Z" /><path d="M22 2 11 13" /></>, title: 'Lembretes automáticos', text: 'Mantenha todos informados com notificações no momento certo.' },
  { icon: <><path d="M4 19.5V9M10 19.5V4.5M16 19.5v-7M22 19.5V7" /><path d="M2 21h20" /></>, title: 'Rotina sob controle', text: 'Visualize o que importa para tomar decisões rápidas no dia a dia.' },
]

const plans = [
  { name: 'Essencial', desc: 'Para quem está começando a organizar a rotina.', price: '29', items: ['Até 30 alunos', 'Agenda e recorrências', 'Confirmação de presença', 'Suporte por e-mail'] },
  { name: 'Profissional', desc: 'Para uma operação que precisa ganhar ritmo.', price: '59', badge: 'Mais escolhido', items: ['Até 150 alunos', 'Tudo do Essencial', 'Lembretes automáticos', 'Gestão de categorias', 'Suporte prioritário'] },
  { name: 'Studio', desc: 'Para equipes e studios em expansão.', price: '99', items: ['Alunos ilimitados', 'Tudo do Profissional', 'Múltiplos profissionais', 'Acompanhamento dedicado'] },
]

function App() {
  return <div className="page">
    <header className="header">
      <div className="container header-content">
        <a className="brand header-brand" href="#inicio" aria-label="Kira Fit, ir para o início"><img className="header-brand-logo" src="/icons/kira-icon-white.png" alt="" /><span className="brand-name">Kira Fit<small>Kira Sistemas</small></span></a>
        <nav aria-label="Navegação principal"><a href="#recursos">Recursos</a><a href="#como-funciona">Como funciona</a><a href="#planos">Planos</a></nav>
        <div className="header-actions"><a className="login" href="#planos">Conhecer planos</a><a className="button button-small" href="https://app.kirafit.com.br/login">Entrar na plataforma</a></div>
      </div>
    </header>

    <main id="inicio">
      <section className="hero container">
        <div className="hero-copy">
          <p className="eyebrow"><span></span> Feito para quem vive em movimento</p>
          <h1>Mais organização para você cuidar do que <em>realmente importa.</em></h1>
          <p className="lead">O KiraFit reúne agenda, alunos e confirmações em um só lugar para sua operação fluir todos os dias.</p>
          <div className="hero-actions"><a className="button" href="#planos">Escolher meu plano <Arrow /></a><a className="text-link" href="#recursos">Explorar recursos <span>↓</span></a></div>
          <div className="hero-proof"><div className="avatars" aria-hidden="true"><b>AM</b><b>JP</b><b>LC</b><b>+</b></div><p>Uma rotina mais leve começa<br /><strong>com a organização certa.</strong></p></div>
        </div>
        <div className="hero-visual" aria-hidden="true">
          <div className="ring ring-one"></div><div className="ring ring-two"></div>
          <div className="visual-card main-card"><div className="card-top"><img className="brand-logo tiny" src="/icons/kira-icon-192.png" alt="" /><span>Olá, Amanda!</span><i></i></div><h2>Seu dia, sob controle.</h2><div className="progress"><span></span></div><p>8 compromissos hoje</p><div className="event"><span className="event-icon"><Calendar /></span><div><strong>Treino funcional</strong><small>07:00 · 12 participantes</small></div><b>12</b></div><div className="event"><span className="event-icon"><Calendar /></span><div><strong>Personal training</strong><small>10:30 · confirmado</small></div><b>1</b></div></div>
          <div className="float-card confirmation"><span className="check-circle"><Check /></span><div><strong>Presença confirmada</strong><small>Você está no controle</small></div></div>
          <div className="float-card activity"><span><Bell /></span><strong>Menos faltas.<br />Mais resultado.</strong></div>
        </div>
      </section>

      <section className="benefit-strip"><div className="container"><p>Uma plataforma criada para transformar a gestão da sua rotina.</p><div><span><b>01</b> Menos tarefas manuais</span><span><b>02</b> Mais tempo para seus alunos</span><span><b>03</b> Decisões com clareza</span></div></div></section>

      <section className="section container" id="recursos"><div className="section-heading"><p className="eyebrow"><span></span> Tudo em um só lugar</p><h2>Uma rotina que funciona <em>no seu ritmo.</em></h2><p>Ferramentas essenciais para gerir sua agenda e se aproximar de cada aluno.</p></div><div className="feature-grid">{features.map((feature) => <article className="feature" key={feature.title}><div className="feature-icon"><Icon size={23}>{feature.icon}</Icon></div><h3>{feature.title}</h3><p>{feature.text}</p><span className="feature-arrow">↗</span></article>)}</div></section>

      <section className="steps-section" id="como-funciona"><div className="container steps-layout"><div><p className="eyebrow light"><span></span> Simples desde o primeiro dia</p><h2>Menos complicação.<br /><em>Mais movimento.</em></h2><p className="steps-intro">O KiraFit acompanha a sua forma de trabalhar, sem processos difíceis ou planilhas espalhadas.</p><a className="button button-white" href="#planos">Ver planos <Arrow /></a></div><ol className="steps"><li><span>01</span><div><h3>Organize sua base</h3><p>Cadastre alunos e deixe os dados importantes sempre acessíveis.</p></div></li><li><span>02</span><div><h3>Monte sua agenda</h3><p>Crie compromissos únicos ou recorrentes para toda a semana.</p></div></li><li><span>03</span><div><h3>Acompanhe de perto</h3><p>Receba confirmações e tenha previsibilidade para cada dia.</p></div></li></ol></div></section>

      <section className="section pricing container" id="planos"><div className="pricing-heading"><p className="eyebrow"><span></span> Planos para cada fase</p><h2>Escolha o plano que acompanha <em>o seu crescimento.</em></h2><p>Comece com o essencial e evolua quando a sua operação pedir mais.</p></div><div className="plans">{plans.map((plan) => <article className={`plan ${plan.badge ? 'featured' : ''}`} key={plan.name}>{plan.badge && <span className="plan-badge">{plan.badge}</span>}<h3>{plan.name}</h3><p className="plan-description">{plan.desc}</p><div className="price"><small>R$</small><strong>{plan.price}</strong><span>/mês</span></div><a className={`button ${plan.badge ? '' : 'button-outline'}`} href="mailto:contato@kirafit.com.br?subject=Quero conhecer o KiraFit">Começar agora <Arrow /></a><ul>{plan.items.map((item) => <li key={item}><Check />{item}</li>)}</ul></article>)}</div><p className="pricing-note">Todos os planos incluem acesso seguro e atualizações contínuas.</p></section>

      <section className="final-cta container"><div><p className="eyebrow light"><span></span> Sua rotina merece mais leveza</p><h2>Pronto para colocar<br />sua operação em movimento?</h2><p>Organize sua agenda, aproxime-se dos seus alunos e tenha mais tempo para fazer seu negócio crescer.</p></div><a className="button button-white" href="mailto:contato@kirafit.com.br?subject=Quero conhecer o KiraFit">Quero começar <Arrow /></a></section>
    </main>
    <footer className="footer container"><a className="brand" href="#inicio" aria-label="KiraFit, ir para o início"><img className="brand-logo" src="/icons/kira-icon-192.png" alt="" /><span className="brand-name">Kira<span>Fit</span><small>Kira Sistemas</small></span></a><p>© {new Date().getFullYear()} KiraFit. Gestão que acompanha seu ritmo.</p><a href="https://app.kirafit.com.br/login">Acessar plataforma</a></footer>
  </div>
}

createRoot(document.getElementById('root')).render(<App />)