/* @jsx React.createElement */
/* global React */
// Shared site components: Nav, Footer, PalmWatermark, Buttons, etc.

const AMAZON_URL = "https://www.amazon.com/Vacation-Aesthetic-Make-Your-Place/dp/B0GRGW6BK8/ref=sr_1_1?dib=eyJ2IjoiMSJ9.FJfohRg2QyG7LQjbfoA84f9KTU8BdYNBTjyZEnfnS9c.Cc1FRwlH0Sxg_GsshO7gYd8S1Mq9OYTk8hnLya2mI88&dib_tag=se&keywords=daleesa+curet&qid=1777760011&sr=8-1";

function Nav({ active }) {
  const [open, setOpen] = React.useState(false);
  const items = [
    { href: "index.html", id: "home", label: "Home" },
    { href: "about.html", id: "about", label: "About Daleesa" },
    { href: "the-book.html", id: "book", label: "The Book" },
    { href: "gallery.html", id: "gallery", label: "Before & After" },
  ];
  return (
    <nav className={"va-nav" + (open ? " is-open" : "")}>
      <a className="va-nav-brand" href="index.html">
        <img src="assets/dc-monogram.png" alt="" />
        <div>
          <div className="va-nav-brand-name">Daleesa Curet</div>
          <div className="va-nav-brand-tag">declutter + curate</div>
        </div>
      </a>
      <button
        className="va-nav-toggle"
        aria-label={open ? "Close menu" : "Open menu"}
        aria-expanded={open}
        onClick={() => setOpen((o) => !o)}
        type="button"
      >
        {open ? (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
            <line x1="6" y1="6" x2="18" y2="18" />
            <line x1="18" y1="6" x2="6" y2="18" />
          </svg>
        ) : (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
            <line x1="4" y1="7" x2="20" y2="7" />
            <line x1="4" y1="12" x2="20" y2="12" />
            <line x1="4" y1="17" x2="20" y2="17" />
          </svg>
        )}
      </button>
      <div className="va-nav-links">
        {items.map((it) => (
          <a key={it.id} href={it.href} className={"va-nav-link" + (active === it.id ? " active" : "")}>
            {it.label}
          </a>
        ))}
      </div>
      <a className="btn btn-small" href={AMAZON_URL} target="_blank" rel="noopener">
        Buy on Amazon
      </a>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="va-footer">
      <div className="va-footer-inner">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 4 }}>
            <img src="assets/dc-monogram.png" alt="" style={{ height: 56, width: "auto" }} />
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 13, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--va-ink)", lineHeight: 1.2 }}>
                Daleesa Curet
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 13, color: "var(--va-clay)", marginTop: 4 }}>
                declutter + curate
              </div>
            </div>
          </div>
          <p className="va-footer-tag">
            Author of <em>The Vacation Aesthetic</em>. Helping you make your home a place you love to be.
          </p>
        </div>
        <div>
          <h4>Read</h4>
          <ul>
            <li><a href="the-book.html">About the book</a></li>
            <li><a href="gallery.html">Before &amp; after</a></li>
            <li><a href={AMAZON_URL} target="_blank" rel="noopener">Buy on Amazon</a></li>
          </ul>
        </div>
        <div>
          <h4>Connect</h4>
          <ul>
            <li><a href="about.html">About Daleesa</a></li>
          </ul>
        </div>
      </div>
      <div className="va-footer-bottom">
        <span>© 2026 Daleesa Curet · All rights reserved</span>
        <span style={{ fontStyle: "italic" }}>Make your home a place you love to be.</span>
      </div>
    </footer>
  );
}

function PalmWatermark({ corner = "bottom-left", size = 720, opacity = 0.85 }) {
  const pos = {
    "bottom-left":  { left: -200, bottom: 20,   transform: "none" },
    "top-left":     { left: -200, top: -120,    transform: "scaleY(-1)" },
    "bottom-right": { right: -200, bottom: -120, transform: "scaleX(-1)" },
    "top-right":    { right: -200, top: -120,   transform: "scale(-1, -1)" },
  }[corner];
  return (
    <img
      src="assets/palm-frond.png"
      alt=""
      aria-hidden="true"
      style={{
        position: "absolute",
        width: size,
        height: "auto",
        opacity,
        pointerEvents: "none",
        userSelect: "none",
        zIndex: 0,
        ...pos,
      }}
    />
  );
}

function InkRule({ width = 180, opacity = 1 }) {
  return (
    <hr
      aria-hidden="true"
      className="ink-rule"
      style={{
        width,
        opacity,
        border: 0,
        borderTop: "1px solid var(--line-2)",
        margin: "0 auto",
        height: 0,
      }}
    />
  );
}

function PageHeader({ eyebrow, title, lede, palm = "top-right" }) {
  return (
    <header className="page-header" style={{ position: "relative" }}>
      {palm && <PalmWatermark corner={palm} size={520} opacity={0.55} />}
      <div className="container-narrow" style={{ position: "relative", zIndex: 2 }}>
        {eyebrow && <span className="eyebrow">{eyebrow}</span>}
        <h1>{title}</h1>
        {lede && <p className="lede">{lede}</p>}
        <div style={{ marginTop: 32 }}><InkRule /></div>
      </div>
    </header>
  );
}

function BuyButton({ children = "Buy on Amazon", variant = "solid", small = false }) {
  const cls = "btn" + (small ? " btn-small" : "") + (variant === "ghost" ? " btn-ghost" : "");
  return <a className={cls} href={AMAZON_URL} target="_blank" rel="noopener">{children}</a>;
}

Object.assign(window, { Nav, Footer, PalmWatermark, InkRule, PageHeader, BuyButton, AMAZON_URL });