import React, { RefObject, useRef } from 'react';
import { NextPage } from 'next';
import PrismicRichText from 'prismic-richtext';

import { ProductPageData } from '../../../../typings/entities';
import Hero from './Hero';
import Offers, { convertOffer } from '../../Offers';
import FAQ from '../../FAQ';
import Why from './Why';
import Case from './Case';
import Partner from './Partner';
import How from './How';
import { Header } from '../Header';
import { Tooltip } from '../../../shared/Tooltip';
import TextBlocks from './TextBlocks';
import ProductSEO from '../../../ProductSEO';
import RichText from '../../../RichText';
import IllustrationPierre from '../../../../assets/img/illustration/pierre.jpg';

interface PageProps {
  product: ProductPageData;
}

const Cyber: NextPage<PageProps> = ({ product }) => {
  const heroRef: RefObject<Hero> = useRef();

  const {
    product_name,
    product_cta_link,
    product_short_description,
    product_illustration,
    product_starting_price,
    product_price_hover_text,
    header_cta_label,
    why_title,
    why_perks,
    how_it_works_title,
    how_it_works_steps,
    faq_link,
    faq_questions,
    faq_title,
    first_offer,
    second_offer,
    third_offer,
    offers_title,
    offers_find_cta_label,
    offers_find_cta_link,
    seo_description,
    seo_title
  } = product;

  return (
    <>
      <ProductSEO
        title={seo_title}
        description={seo_description}
        productName={product_name}
        imageURL={product_illustration.url}
        shortDescription={PrismicRichText.asText(product_short_description)}
        startingPrice={product_starting_price}
      />
      <Header
        heroRef={heroRef}
        CTALink={product_cta_link}
        CTALabel={header_cta_label}
      />
      <Hero
        ref={heroRef}
        CTALink={product_cta_link}
        shortDescription={product_short_description}
        startingPrice={product_starting_price}
        hoverText={product_price_hover_text}
      />
      <TextBlocks items={[
        {
          title: 'La solution contre les cyberattaques 💡',
          text: <>
            <Tooltip
              id="tooltip-cyber-rançonnage"
              hoverable={<u>Cyber-rançonnage</u>}>
              Vous ouvrez une pièce jointe contenant un virus, qui bloque votre matériel, chiffre vos fichiers et vous réclame une rançon pour en retrouver l’accès.
            </Tooltip>,
            <Tooltip
              id="tooltip-piratage"
              hoverable={<u>piratage</u>}>
              Votre site Internet/ système informatique est hors service ce entraine généralement un arrêt d’activité.
            </Tooltip>,
            <Tooltip
              id="tooltip-vol"
              hoverable={<u>vol</u>}>
              Un logiciel malveillant récupère et vol des données personnelles, de vos clients par exemple.
            </Tooltip>,
            <Tooltip
              id="tooltip-cryptage"
              hoverable={<u>cryptage de données</u>}>
              Vous n’avez plus accès à vos données qui sont rendues illisibles via un cryptolocker.
            </Tooltip>,
            <Tooltip
              id="tooltip-usurpation"
              hoverable={<u>usurpation d’identité</u>}>
              <>
                Un intrus se fait passer pour vous auprès de vos clients, fournisseurs ou salariés afin de récupérer des données confidentielles.<br />
                Création d’un site similaire au vôtre dans le but de détourner de l’argent.
              </>
            </Tooltip>
            … Nous couvrons tout type de cyberattaque.
          </>
        },
        {
          title: 'Bien adaptée à votre budget 📊',
          text: <>
            <strong>Entrepreneurs, indépendants et petites entreprises</strong>, nous nous adaptons à VOS risques, pour une assurance sur-mesure et <strong>moins chère.</strong>
          </>
        },
        {
          title: 'Nos experts toujours à vos côtés 🛎️',
          text: <>
            Vous êtes victime d’une cyberattaque ? Appelez la ligne directe disponible 24/7. <strong>Nous vous envoyons nos meilleurs experts.</strong>
          </>
        }
      ]} />
      <How
        title={how_it_works_title}
        items={how_it_works_steps.map(({ step_image, step_description }) => (
          { text: step_description, image: step_image }
        ))}
        CTAFindLabel="Je protège mon entreprise"
        CATFindLink={product_cta_link}
      />
      <Partner />
      <Case
        title="Exemple de remboursement après une cyberattaque"
        description={<>Pierre, e-commerçant <strong>a été remboursé de 36 970 €</strong>.</>}
        image={{ url: IllustrationPierre }}
        text={<>
          <p><b>« Mon site e-commerce s’est fait pirater et était HS pendant une semaine.</b> Mes données ont été cryptées par le hacker.</p>
          <p>Tous les frais d’intervention ont été pris en charge. L'assistance s'est occupée de tout, je pouvais me concentrer sur mon business. Merci Easyblue ! »</p>
          <p><b>Pierre, client Easyblue</b></p>
        </>}
        items={[
          { amount: '5 300', text: 'pour les frais de reconstitution des données cryptées.' },
          { amount: '7 850', text: 'pour l’indemnisation des frais d’expertise et d’assistance informatique.' },
          { amount: '4 320', text: 'pour les frais de remise en état du site internet.' },
          { amount: '12 500', text: 'pour les frais de re-référencement du site internet.' },
          { amount: '7 000', text: 'pour la perte d’exploitation de l’activité sur internet.' }
        ]}
      />

      <FAQ
        title={faq_title}
        items={faq_questions.map(({ faq_question_title, faq_question_answer }) => (
          { title: faq_question_title, answer: <RichText content={faq_question_answer} /> }
        ))}
        link={faq_link}
      />

      <Why
        title={why_title}
        items={why_perks.map(({ perk_title, perk_description, perk_image }) => (
          { title: perk_title, description: perk_description, image: perk_image }
        ))}
        CTAFindLabel="Je m'assure avec easyblue"
        CATFindLink={product_cta_link}
      />
      <Offers
        title={offers_title}
        offers={
          [first_offer, second_offer, third_offer].filter((offer) => !!offer?.data)
            .map((offer) => convertOffer(offer))
        }
        CTAFindLabel={offers_find_cta_label || 'Je trouve mon offre sur-mesure'}
        CATFindLink={offers_find_cta_link}
        CTAButtonColor="white"
      />
    </>
  );
};

export default Cyber;