import { INSTALLMENT } from '../../data/home';
import { Button } from '../../components/Button';
import { Container } from '../../components/Container';
import { Reveal } from '../../components/Reveal';
import { useLead } from '../../components/LeadModal';
import { img } from '../../lib/utils';

export function InstallmentSection() {
  const { openLead } = useLead();
  return (
    <section className="section" id="installment">
      <Container>
        <Reveal>
          <h2 className="display-left">
            {INSTALLMENT.title}
            <br />
            <span className="accent">{INSTALLMENT.accent}</span>
          </h2>
          <p className="small-muted">{INSTALLMENT.sub}</p>
        </Reveal>

        <div className="inst-grid">
          <Reveal className="inst-media">
            <img src={img('plant.jpg')} alt="" loading="lazy" />
            <span className="inst-media__zero" aria-hidden="true">
              0%
            </span>
          </Reveal>
          <Reveal className="inst-text" delay={80}>
            <blockquote className="inst-quote">{INSTALLMENT.quote}</blockquote>
            <h3>Условия</h3>
            <p>{INSTALLMENT.conditions}</p>
            <h3>Кто может оформить</h3>
            <p>{INSTALLMENT.who}</p>
            <Button onClick={() => openLead({ title: 'Прислать график платежей', topic: 'Рассрочка 0%' })}>
              Прислать график платежей
            </Button>
          </Reveal>
        </div>
      </Container>
    </section>
  );
}