import React from 'react';
import { Reveal } from '../Reveal';
import { SectionHeading } from '../SectionHeading';
import { useSectionHeading, useSite } from '../../api';

export function WhyUs() {
  const { why_us } = useSite();
  const heading = useSectionHeading('why_us');
  return (
    <section className="bg-ink py-24 lg:py-32" aria-labelledby="why-title">
      <div className="mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10">
        <div className="lg:col-span-5">
          <SectionHeading
            title={heading.title}
            lead={heading.lead} />

          {heading.image && (
            <Reveal delay={0.12}>
              <img
                src={heading.image}
                alt={heading.title}
                className="mt-10 h-80 w-full object-cover" />

            </Reveal>
          )}
        </div>

        <div className="lg:col-span-7">
          <div className="grid gap-x-10 gap-y-px sm:grid-cols-2">
            {why_us.map((item, i) =>
            <Reveal key={item.title} delay={0.05 * i}>
                <div className="flex h-full flex-col border-t border-ivory/10 py-8">
                  <span className="text-xs font-light text-copper">۰{(i + 1).toLocaleString('fa-IR')}</span>
                  <h3 className="mt-4 text-lg font-bold text-ivory">{item.title}</h3>
                  <p className="mt-3 text-sm font-light leading-8 text-ivory/55">{item.desc}</p>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </div>
    </section>);

}