採用LP作成

"use client";

import React, { useState } from "react";
import styles from "./index.module.css";
import Image from "next/image";
import Link from "next/link";

const AccordionItem = ({
  title,
  children,
}: {
  title: React.ReactNode;
  children: React.ReactNode;
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [isHovered, setIsHovered] = useState(false);

  const toggleAccordion = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div
      className={styles["info-accordion"]}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div
        className={styles["info-accordion-header"]}
        onClick={toggleAccordion}
      >
        <h3 className={styles["info-accordion-item-heading"]}>{title}</h3>
        <button
          className={`${styles["info-accordion-button"]} ${
            isHovered ? styles["info-accordion-button-hover"] : ""
          } ${isOpen ? styles["info-accordion-button-rotate"] : ""}`}
        >
          <span className={styles["info-accordion-button-vertical"]}></span>
          <span className={styles["info-accordion-button-horizontal"]}></span>
        </button>
      </div>
      {isOpen && (
        <div className={styles["info-accordion-body-inner"]}>{children}</div>
      )}
    </div>
  );
};

const Contents = () => {
  const [isClicked, setIsClicked] = useState(false);

  const handleClick = () => {
    setIsClicked(!isClicked);
  };

  return (
    <section id="contents" className={styles["info"]}>
      <div className={styles["info-inner"]}>
        <h2 className={styles["info-title"]}>
          <span className={styles["c-page-section-title-inline"]}>
            社員紹介
          </span>
        </h2>
        <div className={styles["info-content"]}>
          <AccordionItem
            title={
              <>
                <Image
                  src="/logo_icon_blue.png"
                  alt="足立いつき薬局"
                  width={40}
                  height={40}
                  priority
                  className={styles.logoImage}
                />
                経営者×薬剤師
              </>
            }
          >
            <div className={styles["accordion-content"]}>
              <p>
                足立区のために挑戦する仲間を募集中。
                <br />
                社員インタビューはこちら
                <br />
                <Link
                  href="https://note.com/adachiitukiph/n/necaa6894b431"
                  className={styles.link}
                >
                  足立区で紡ぐ薬局のかたち〜海老沼徹社長
                </Link>
              </p>
              <Image
                src="/ebinuma.png"
                alt="ebinuma"
                width={200}
                height={200}
                priority
                className={styles.logoImage}
                data-id="02"
                onClick={handleClick}
              />
            </div>
          </AccordionItem>
          <AccordionItem
            title={
              <>
                <Image
                  src="/logo_icon_red.png"
                  alt="足立いつき薬局"
                  width={40}
                  height={40}
                  priority
                  className={styles.logoImage}
                />
                エンジニア×薬剤師
              </>
            }
          >
            <div className={styles["accordion-content"]}>
              <p>
                新しい薬剤師の姿を共に歩む。
                <br />
                社員インタビューはこちら
                <br />
                coming soon
                <br />
              </p>
              <Image
                src="/sekiyama.png"
                alt="seikyakma"
                width={200}
                height={200}
                priority
                className={styles.logoImage}
                data-id="02"
              />
            </div>
          </AccordionItem>
          <AccordionItem
            title={
              <>
                <Image
                  src="/logo_icon_green.png"
                  alt="足立いつき薬局"
                  width={40}
                  height={40}
                  priority
                  className={styles.logoImage}
                />
                在宅医療×薬剤師
              </>
            }
          >
            <div className={styles["accordion-content"]}>
              <p>
                患者さんのために恩送りの薬局を目指して。
                <br />
                社員インタビューはこちら
                <br />
                coming soon
                <br />
              </p>
              <Image
                src="/hashimoto.png"
                alt="hashimoto"
                width={200}
                height={200}
                priority
                className={styles.logoImage}
                data-id="02"
              />
            </div>
          </AccordionItem>
        </div>
      </div>
    </section>
  );
};

export default Contents;