import React from 'react';
import styles from './Join.module.css'; // Import the module.css file

const LinktreePage = ({ data }) => {
  return (
    <div className={styles.linktreePage}>

      <div className={styles.dashboardContainer}>
        {/* Main Heading */}
        <div className={styles.mainHeading}>
      Nikmati Kemudahan Mengelola Kafe
        </div>

        {/* Sub Heading */}
        <div className={styles.subHeading}>
      Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami.
        </div>

        {/* Form Section */}
        <form className={styles.linktreeForm}>
          <label htmlFor="username" className={styles.usernameLabel}>--------------------------------------------</label>
          <input
            id="username"
            placeholder="nomor whatsapp atau email"
            maxLength="30"
            className={styles.usernameInput}
          />
          <button type="submit" className={styles.claimButton}>
            <span>➜</span>
          </button>
        </form>

        {/* Footer Links */}
        <div className={styles.footer}>
          <div className={styles.footerLinks}>
            <a
              href="https://linktr.ee/discover/trending"
              target="_blank"
              rel="noreferrer"
              className={styles.footerLink}
            >
              Pelajari lebih lanjut
            </a>
            <a
              href="https://linktr.ee"
              target="_blank"
              rel="noreferrer"
              className={styles.footerLink}
            >
              Tentang kedaimaster.com
            </a>
          </div>
          <div className={styles.footerImage}>
            <img
              src="./laporan.png"
              alt="Linktree visual"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default LinktreePage;
