// Shared chrome (Nav + Footer + Strip) + small UI primitives.

const Nav = ({ current = "home" }) => (
  <header className="nav">
    <a className="nav__brand" href="index.html">
      <span>picara</span>
    </a>
    <nav className="nav__links">
      <a className="nav__link" data-active={current === "home"} href="index.html">Home</a>
      <a className="nav__link" data-active={current === "about"} href="about.html">Story</a>
    </nav>
  </header>
);

const Strip = ({ items }) => {
  const list = items || [
    "first drop ships May 14",
    "made in salt lake city",
    "free returns on full-priced gear",
    "sewn slowly, on purpose",
    "ultralight, on purpose",
  ];
  const row = (
    <span>
      {list.map((t, i) => (
        <span key={i}>
          <span className="strip__dot" /> {t}
        </span>
      ))}
    </span>
  );
  return (
    <div className="strip">
      <div className="strip__inner">
        {row}
        {row}
      </div>
    </div>
  );
};

// Replace with your Formspree form ID after signing up at formspree.io.
const FORMSPREE_ENDPOINT = "https://formspree.io/f/YOUR_FORM_ID";

const ContactModal = ({ onClose }) => {
  const [email, setEmail] = React.useState("");
  const [message, setMessage] = React.useState("");
  const [status, setStatus] = React.useState("idle");

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("sending");
    try {
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({ email, message }),
      });
      setStatus(res.ok ? "sent" : "error");
    } catch {
      setStatus("error");
    }
  };

  return (
    <div className="contact-modal" role="dialog" aria-modal="true" onClick={onClose}>
      <div className="contact-modal__inner" onClick={(e) => e.stopPropagation()}>
        <button className="contact-modal__close" type="button" onClick={onClose} aria-label="Close">×</button>
        <h3 className="contact-modal__title">Email us</h3>
        {status === "sent" ? (
          <p className="contact-modal__success">Thanks — we'll be in touch.</p>
        ) : (
          <form className="contact-modal__form" onSubmit={handleSubmit}>
            <label className="contact-modal__label">
              <span className="eyebrow">your email</span>
              <input
                type="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@somewhere.com"
              />
            </label>
            <label className="contact-modal__label">
              <span className="eyebrow">message</span>
              <textarea
                required
                rows={5}
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                placeholder="say hi…"
              />
            </label>
            <button
              type="submit"
              className="btn btn--accent"
              disabled={status === "sending"}
            >
              {status === "sending" ? "sending…" : "send"}
            </button>
            {status === "error" && (
              <p className="contact-modal__error">
                Couldn't send — try again, or email hello@picaragear.com directly.
              </p>
            )}
          </form>
        )}
      </div>
    </div>
  );
};

const Footer = () => {
  const [contactOpen, setContactOpen] = React.useState(false);
  return (
    <>
      <footer className="footer">
        <div className="footer__grid">
          <div>
            <p className="footer__brand-line">picara</p>
            <p className="footer__tagline">small gear for narrow places.</p>
          </div>
          <div>
            <h4>House</h4>
            <div className="footer__links">
              <a href="index.html">Home</a>
              <a href="about.html">Our story</a>
            </div>
          </div>
          <div>
            <h4>Stay close</h4>
            <div className="footer__links">
              <a href="#">Instagram</a>
              <a
                href="#"
                onClick={(e) => { e.preventDefault(); setContactOpen(true); }}
              >
                Email us
              </a>
            </div>
          </div>
          <div></div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 picara goods co.</span>
          <span>made by hand · sewn on purpose</span>
        </div>
      </footer>
      {contactOpen && <ContactModal onClose={() => setContactOpen(false)} />}
    </>
  );
};

// Tiny inline botanical glyph for inline decoration
const Glyph = ({ kind = "lavender", size = 18 }) => {
  if (kind === "lavender") {
    return (
      <svg width={size} height={size} viewBox="-12 -12 24 24" aria-hidden="true">
        <path d="M 0 12 L 0 -2" stroke="var(--charcoal)" strokeWidth="1.2" fill="none" />
        <ellipse cx="0" cy="-5" rx="3" ry="5" fill="var(--lavender)" stroke="var(--charcoal)" strokeWidth="1" />
        <ellipse cx="-2" cy="-9" rx="2.4" ry="3.4" fill="var(--lavender)" stroke="var(--charcoal)" strokeWidth="1" />
        <ellipse cx="2" cy="-9" rx="2.4" ry="3.4" fill="var(--lavender)" stroke="var(--charcoal)" strokeWidth="1" />
      </svg>
    );
  }
  if (kind === "poppy") {
    return (
      <svg width={size} height={size} viewBox="-12 -12 24 24" aria-hidden="true">
        <path d="M -8 4 C -10 -4, -2 -10, 0 -6 C 2 -10, 10 -4, 8 4 Z" fill="var(--poppy)" stroke="var(--charcoal)" strokeWidth="1" />
        <circle cx="0" cy="-1" r="1.6" fill="var(--charcoal)" />
      </svg>
    );
  }
  if (kind === "yellow") {
    return (
      <svg width={size} height={size} viewBox="-12 -12 24 24" aria-hidden="true">
        {Array.from({ length: 8 }).map((_, i) => {
          const a = (i / 8) * Math.PI * 2;
          const cx = Math.cos(a) * 6;
          const cy = Math.sin(a) * 6;
          return (
            <ellipse key={i} cx={cx} cy={cy} rx="2.2" ry="4.5" transform={`rotate(${(a * 180) / Math.PI} ${cx} ${cy})`} fill="var(--yellow)" stroke="var(--charcoal)" strokeWidth="0.8" />
          );
        })}
        <circle cx="0" cy="0" r="2.5" fill="var(--poppy-deep)" stroke="var(--charcoal)" strokeWidth="0.8" />
      </svg>
    );
  }
  return null;
};

window.Nav = Nav;
window.Footer = Footer;
window.Strip = Strip;
window.Glyph = Glyph;