import HeroBrand from "./index.jsx";
import { heroBrand } from "../demo-data.js";

export default function HeroBrandDemo() {
  return (
    <>
      <HeroBrand {...heroBrand} variant="default" />
      <HeroBrand {...heroBrand} variant="dark" />
      <HeroBrand {...heroBrand} variant="light" />
    </>
  );
}

"use client";

import { useEffect, useState } from "react";
import styles from "./styles.module.css";

export default function HeroBrand({
  variant = "default",
  headline = "From dreams to reality: creating brands that change the world.",
  bottomLabel = "Get in touch",
  ctaLabel = "Contact us",
  ctaHref = "#",
  backgroundImage,
}) {
  const [time, setTime] = useState(null);

  useEffect(() => {
    function tick() {
      const now = new Date();
      setTime({
        h: String(now.getHours()).padStart(2, "0"),
        m: String(now.getMinutes()).padStart(2, "0"),
      });
    }
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <section className={styles.section}>
      <div className={styles.card} data-variant={variant}>
        {backgroundImage && (
          <div
            className={styles.bgImage}
            style={{ backgroundImage: `url(${backgroundImage})` }}
          />
        )}

        {time && (
          <div className={styles.timeWrap}>
            <span className={styles.time}>
              {time.h} {time.m}
            </span>
          </div>
        )}

        <div className={styles.headlineWrap}>
          <h1 className={styles.headline}>
            <span className={styles.dot} />
            {headline}
          </h1>
        </div>

        <div className={styles.bottom}>
          <span className={styles.bottomLabel}>{bottomLabel}</span>
          <a className={styles.cta} href={ctaHref}>
            <span>{ctaLabel}</span>
            <span className={styles.ctaArrow}>
              <svg
                width="14"
                height="14"
                viewBox="0 0 14 14"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M1 7h12M8 2l5 5-5 5"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ── Section wrapper ── */
.section {
  width: 100%;
  padding: 0 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
    sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.4;
}

/* ── Card ── */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  padding: 1.25rem 1.25rem 1.25rem;
  height: 45vh;
}

/* ── Variant backgrounds ── */
.card[data-variant="default"] {
  background-color: #f4d03f;
  color: #000;
}

.card[data-variant="dark"] {
  background-color: #000;
  color: #fff;
}

.card[data-variant="light"] {
  background-color: var(--color-bg-sage, #65756b);
  color: #fff;
}

/* ── Background image layer ── */
.bgImage {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* ── Time (top-right) ── */
.timeWrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

.time {
  font-size: 0.8rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* ── Headline ── */
.headlineWrap {
  position: relative;
  z-index: 1;
}

.headline {
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  max-width: 18ch;
}

.dot {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.15em;
  margin-right: 0.15em;
}

/* ── Bottom section ── */
.bottom {
  position: relative;
  z-index: 1;
  margin-top: auto;
}

.bottomLabel {
  display: block;
  font-size: clamp(1rem, 1.5vw + 0.25rem, 1.25rem);
  font-weight: 400;
  margin-bottom: 0.5rem;
}

/* ── CTA button ── */
.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 9999px;
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.card[data-variant="default"] .cta {
  background: #000;
  color: #fff;
}

.card[data-variant="dark"] .cta {
  background: #fff;
  color: #000;
}

.card[data-variant="light"] .cta {
  background: #000;
  color: #fff;
}

.cta:hover {
  opacity: 0.85;
}

.ctaArrow {
  display: flex;
  align-items: center;
}

/* ── Tablet (>= 768px) ── */
@media (min-width: 768px) {
  .section {
    padding: 0 2.5rem;
  }

  .card {
    padding: 1.5rem 1.75rem 1.25rem;
    border-radius: 14px;
    height: 50vh;
  }
}

/* ── Desktop (>= 1024px) ── */
@media (min-width: 1024px) {
  .section {
    padding: 0 3rem;
  }

  .card {
    padding: 1.75rem 2rem 1.5rem;
    border-radius: 16px;
    height: 50vh;
  }
}

/* ── Wide (>= 1280px) ── */
@media (min-width: 1280px) {
  .section {
    padding: 0 4rem;
    max-width: 1600px;
    margin: 0 auto;
  }
}