/* Nexaro website chrome: header, footer, quote flow, and site buttons. */

const LOCKUP = "assets/logo-lockup.png";
const SYMBOL_WHITE = "assets/symbol-white.png";

function SiteButton({
  children,
  variant = "primary",
  size = "md",
  full = false,
  iconLeft,
  iconRight,
  className = "",
  ...props
}) {
  const classes = [
    "site-button",
    `site-button--${variant}`,
    size !== "md" ? `site-button--${size}` : "",
    full ? "site-button--full" : "",
    className,
  ].filter(Boolean).join(" ");

  return (
    <button className={classes} {...props}>
      {iconLeft && <i className={iconLeft} aria-hidden="true" />}
      <span>{children}</span>
      {iconRight && <i className={iconRight} aria-hidden="true" />}
    </button>
  );
}

function Header({ onNav, onQuote, active }) {
  const [open, setOpen] = React.useState(false);
  const items = [
    ["products", "Produkte"],
    ["capabilities", "Ablauf"],
    ["network", "Netzwerk"],
    ["desk", "Kontakt"],
  ];
  const go = (id) => {
    setOpen(false);
    onNav(id);
  };

  return (
    <header className={`site-header ${open ? "is-open" : ""}`}>
      <div className="site-header__bar">
        <button className="site-brand" onClick={() => go("top")} aria-label="Nexaro Startseite">
          <img src={LOCKUP} alt="Nexaro" />
        </button>

        <nav className="site-nav" aria-label="Hauptnavigation">
          {items.map(([id, label]) => (
            <button
              key={id}
              type="button"
              aria-current={active === id ? "true" : "false"}
              onClick={() => go(id)}
            >
              {label}
            </button>
          ))}
        </nav>

        <div className="site-header__actions">
          <SiteButton variant="primary" size="sm" iconRight="ph ph-arrow-right" onClick={onQuote}>
            Angebot anfragen
          </SiteButton>
          <button
            className="site-menu"
            type="button"
            aria-label={open ? "Navigation schließen" : "Navigation öffnen"}
            aria-expanded={open}
            onClick={() => setOpen((v) => !v)}
          >
            <i className={open ? "ph ph-x" : "ph ph-list"} aria-hidden="true" />
          </button>
        </div>
      </div>

      <nav className="site-mobile-nav" aria-label="Mobile Navigation">
        {items.map(([id, label]) => (
          <button
            key={id}
            type="button"
            aria-current={active === id ? "true" : "false"}
            onClick={() => go(id)}
          >
            {label}
          </button>
        ))}
        <SiteButton variant="primary" full iconRight="ph ph-arrow-right" onClick={onQuote}>
          Angebot anfragen
        </SiteButton>
      </nav>
    </header>
  );
}

function FooterBrand() {
  return (
    <div className="footer-brand">
      <img src={SYMBOL_WHITE} alt="" />
      <span>Nexaro</span>
    </div>
  );
}

const LEGAL_PANELS = {
  privacy: {
    eyebrow: "Datenschutz",
    title: "Datenschutzhinweise",
    intro:
      "Verantwortlich für die Verarbeitung personenbezogener Daten auf dieser Website ist die Nexaro Handelsgesellschaft GmbH. Kontakt- und Angebotsanfragen werden zur Bearbeitung der jeweiligen Anfrage verarbeitet.",
    rows: [
      {
        label: "Verantwortliche Stelle",
        lines: ["Nexaro Handelsgesellschaft GmbH", "Leutragraben 1", "07743 Jena", "Deutschland"],
      },
      {
        label: "Anfragen",
        lines: [
          "Datenschutzanfragen können schriftlich an die oben genannte Geschäftsanschrift gerichtet werden.",
        ],
      },
      {
        label: "Betroffenenrechte",
        lines: [
          "Betroffene Personen können Auskunft, Berichtigung, Löschung oder Einschränkung der Verarbeitung ihrer personenbezogenen Daten verlangen.",
        ],
      },
    ],
  },
  imprint: {
    eyebrow: "Impressum",
    title: "Impressum",
    intro: "Angaben gemäß Handelsregisterauszug vom 18.06.2026, Amtsgericht Aachen.",
    rows: [
      {
        label: "Firma",
        lines: ["Nexaro Handelsgesellschaft GmbH"],
      },
      {
        label: "Sitz",
        lines: ["Aachen"],
      },
      {
        label: "Geschäftsanschrift",
        lines: ["Leutragraben 1", "07743 Jena", "Deutschland"],
      },
      {
        label: "Register",
        lines: ["Handelsregister B des Amtsgerichts Aachen", "HRB 29686"],
      },
      {
        label: "Vertreten durch",
        lines: ["Geschäftsführer: Chris Joern Kriegel"],
      },
      {
        label: "Stammkapital",
        lines: ["25.000,00 EUR"],
      },
      {
        label: "Gegenstand",
        lines: [
          "Handel, Vertrieb und Koordination von Lieferketten im Bereich Mineralöle und mineralölbasierter Produkte aller Art, einschließlich verwandter Energie und Betriebsstoffe.",
          "Vermarktung allgemeiner Energieprodukte sowie Kundenakquise für Dritte.",
        ],
      },
      {
        label: "Letzte Eintragung",
        lines: ["18.06.2026"],
      },
    ],
  },
};

function LegalDialog({ panel, onClose }) {
  const content = LEGAL_PANELS[panel];

  if (!content) return null;

  return (
    <div className="legal-backdrop" onClick={onClose}>
      <section
        className="legal-dialog"
        role="dialog"
        aria-modal="true"
        aria-labelledby={`legal-${panel}-title`}
        onClick={(event) => event.stopPropagation()}
      >
        <div className="legal-dialog__head">
          <div>
            <span>{content.eyebrow}</span>
            <h3 id={`legal-${panel}-title`}>{content.title}</h3>
          </div>
          <button className="legal-close" type="button" aria-label="Rechtliche Informationen schließen" onClick={onClose}>
            <i className="ph ph-x" aria-hidden="true" />
          </button>
        </div>

        <div className="legal-dialog__body">
          <p>{content.intro}</p>
          <dl className="legal-list">
            {content.rows.map((row) => (
              <div className="legal-row" key={row.label}>
                <dt>{row.label}</dt>
                <dd>
                  {row.lines.map((line) => (
                    <span key={line}>{line}</span>
                  ))}
                </dd>
              </div>
            ))}
          </dl>
        </div>
      </section>
    </div>
  );
}

function Footer() {
  const [legal, setLegal] = React.useState(null);

  return (
    <footer className="site-footer" data-theme="dark">
      <div className="site-footer__inner">
        <div className="site-footer__legal">
          <div className="site-footer__company">
            <FooterBrand />
            <address className="site-footer__contact">
              <strong>Nexaro Handelsgesellschaft GmbH</strong>
              <span>Leutragraben 1, 07743 Jena, Deutschland</span>
              <a href="mailto:kontakt@nexaro-oil.de">kontakt@nexaro-oil.de</a>
              <a href="tel:+4936413276580">Telefon: +49 3641 3276580</a>
            </address>
          </div>
          <div className="site-footer__legal-actions" aria-label="Rechtliche Informationen">
            <button type="button" onClick={() => setLegal("privacy")}>Datenschutz</button>
            <button type="button" onClick={() => setLegal("imprint")}>Impressum</button>
            <a href="menschenrechte-umwelt-lieferkette.html">Menschenrechte & Lieferkette</a>
          </div>
        </div>

        <div className="site-footer__bottom">
          <span>© 2026 Nexaro Handelsgesellschaft GmbH</span>
          <span>Handelsregister B Amtsgericht Aachen / HRB 29686</span>
        </div>
      </div>

      <LegalDialog panel={legal} onClose={() => setLegal(null)} />
    </footer>
  );
}

const QUOTE_PRODUCTS = ["Diesel B7", "Benzin E5", "Benzin E10", "HVO 100", "Heizöl"];
const QUOTE_REGIONS = ["Nord", "Rhein-Ruhr", "Mitte", "Süd", "Ost"];

function QuoteModal({ open, onClose }) {
  if (!open) return null;

  return (
    <div className="quote-backdrop" onClick={onClose}>
      <div
        className="quote-dialog"
        role="dialog"
        aria-modal="true"
        aria-labelledby="quote-title"
        onClick={(event) => event.stopPropagation()}
      >
        <div className="quote-dialog__head">
          <div className="quote-kicker">Kontakt / Angebotsanfrage</div>
          <button className="quote-close" type="button" aria-label="Anfrageformular schließen" onClick={onClose}>
            <i className="ph ph-x" aria-hidden="true" />
          </button>
        </div>

        <div className="quote-dialog__body">
          <form className="quote-form" action="contact.php" method="post">
            <input className="quote-hp" type="text" name="website" tabIndex="-1" autoComplete="off" aria-hidden="true" />

            <div className="quote-step">
              <h3 id="quote-title">Angebotsanfrage senden</h3>
              <p className="quote-intro">
                Teilen Sie uns Produkt, Volumen und Lieferregion mit. Nexaro erhält die Anfrage
                direkt und antwortet über das Handelsteam.
              </p>
            </div>

            <div className="quote-form__grid">
              <div className="quote-field">
                <label htmlFor="quote-product">Produkt</label>
                <select id="quote-product" name="product" required defaultValue="">
                  <option value="">Produkt wählen</option>
                  {QUOTE_PRODUCTS.map((product) => (
                    <option key={product} value={product}>{product}</option>
                  ))}
                </select>
              </div>

              <div className="quote-field">
                <label htmlFor="quote-volume">Volumen in Litern</label>
                <input
                  id="quote-volume"
                  name="volume"
                  inputMode="numeric"
                  placeholder="30000"
                  required
                />
              </div>

              <div className="quote-field">
                <label htmlFor="quote-region">Lieferregion</label>
                <select id="quote-region" name="region" required defaultValue="">
                  <option value="">Region wählen</option>
                  {QUOTE_REGIONS.map((region) => (
                    <option key={region} value={region}>{region}</option>
                  ))}
                </select>
              </div>

              <div className="quote-field">
                <label htmlFor="quote-company">Unternehmen</label>
                <input
                  id="quote-company"
                  name="company"
                  placeholder="Unternehmen / Handelspartner"
                  required
                />
              </div>

              <div className="quote-field">
                <label htmlFor="quote-email">Geschäftliche E-Mail</label>
                <input
                  id="quote-email"
                  name="email"
                  type="email"
                  placeholder="ops@company.com"
                  required
                />
              </div>

              <div className="quote-field quote-field--full">
                <label htmlFor="quote-message">Nachricht</label>
                <textarea
                  id="quote-message"
                  name="message"
                  rows="4"
                  placeholder="Lieferadresse, Zeitfenster, Zugangshinweise oder Vertragsdetails"
                />
              </div>
            </div>

            <div className="quote-actions">
              <SiteButton type="submit" variant="primary" full iconRight="ph ph-paper-plane-tilt">
                Anfrage senden
              </SiteButton>
            </div>

            <p className="quote-disclaimer">
              Dieses Formular sendet Ihre Anfrage an kontakt@nexaro-oil.de.
            </p>
          </form>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Header, Footer, QuoteModal, FooterBrand, SiteButton });