/* Masthead, Hero, Issue preview */

const { useState, useEffect, useRef } = React;

function Wordmark({ size = "md", className = "" }) {
  const cls = {
    xl: "wordmark wordmark-xl",
    lg: "wordmark",
    md: "wordmark wordmark-sm",
    sm: "wordmark wordmark-xs",
  }[size] || "wordmark";
  return (
    <span className={`${cls} ${className}`}>
      BRIEF<span className="brief-dot">.</span>
    </span>
  );
}

function Masthead() {
  const now = new Date();
  const days = ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"];
  const months = ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"];
  const dateStr = days[now.getDay()] + ", " + String(now.getDate()).padStart(2,"0") + ". " + months[now.getMonth()] + " " + now.getFullYear();
  return (
    <header className="masthead">
      <div className="masthead-top">
        <div className="left">{dateStr}</div>
        <div className="center"></div>
        <div className="right">Berlin</div>
      </div>
      <hr className="rule-hair" style={{margin: "14px 0"}} />
      <div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
        <Wordmark size="lg" />
        <nav className="masthead-nav">
          <a href="#issue">Probeausgabe</a>
          <a href="#fuer-wen">Für wen</a>
          <a href="#signup" className="btn btn-ghost" style={{padding: "9px 16px", fontSize: 13}}>Anmelden</a>
        </nav>
      </div>
    </header>
  );
}

function HeroSignup({ variant = "a" }) {
  const [modalOpen, setModalOpen] = useState(false);
  return (
    <aside className="signup-card" id="signup">
      <div className="signup-stamp">Kostenlos · wöchentlich</div>
      <h3 className="signup-title">Donnerstags um sieben in Ihrem Postfach.</h3>
      <p className="signup-sub">
        Vier Sektionen. Was KI für Ihren Betrieb bedeutet und was nicht.
      </p>
      <button
        className="btn btn-cta signup-cta"
        onClick={() => setModalOpen(true)}
      >
        Kostenlos abonnieren
      </button>
      <div className="signup-proof">
        <div className="signup-proof-label">Für Handwerksbetriebe, die KI einsetzen wollen.</div>
      </div>
      <SubscribeModal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
    </aside>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="hero-grid">
        <div>
          <div className="hero-kicker">
            <span className="dash"></span>
            <span className="eyebrow">Der deutsche KI-Newsletter für Mittelstand und Handwerk</span>
          </div>
          <h1 className="hero-h1">
            Was <em>Künstliche Intelligenz</em> diese Woche für Ihren Betrieb bedeutet.
          </h1>
          <p className="hero-lead">
            Jeden Donnerstag um sieben in Ihrem Postfach. Ein Fallbeispiel aus der Praxis, eine Zahl mit Einordnung, drei kurze Meldungen. In acht Minuten wissen Sie, was diese Woche zählt.
          </p>
          <div className="hero-facts" style={{gridTemplateColumns: "1fr 1fr"}}>
            <div className="hero-fact">
              <div className="hero-fact-k">Lesezeit</div>
              <div className="hero-fact-v">8 Minuten</div>
            </div>
            <div className="hero-fact">
              <div className="hero-fact-k">Werbung</div>
              <div className="hero-fact-v">Keine</div>
            </div>
          </div>
        </div>
        <HeroSignup />
      </div>
    </section>
  );
}


window.Wordmark = Wordmark;
window.Masthead = Masthead;
window.Hero = Hero;