/* global React */
const { useState: useStateGC } = React;

const AMOUNTS = [25, 50, 100, 150, 250];

function GiftCards() {
  const [amount, setAmount] = useStateGC(50);
  const [custom, setCustom] = useStateGC("");

  const pick = (v) => () => { setAmount(v); setCustom(""); };
  const value = custom ? Number(custom) : amount;

  return (
    <section id="giftcards" className="dh-party" style={{background:'var(--beige-100)'}}>
      <div className="dh-party-inner">

        {/* left — pitch */}
        <div>
          <span className="dh-party-eyebrow">A taste of Dimi's</span>
          <h2 className="dh-party-title">Digital<br/>gift cards</h2>
          <p className="dh-party-lead">
            Share a taste of the Mediterranean &mdash; delivered by email, instantly, redeemable for anything on the menu.
          </p>
          <ul className="dh-catering-meta" style={{ listStyle: "none", padding: 0, margin: "16px 0 0", display: "flex", flexDirection: "column", gap: 8 }}>
            <li style={listItem}>Never expires</li>
          </ul>
          <a
            href="https://www.toasttab.com/dimis-hospitality-157-us-1-tequesta-fl-33469/findcard"
            target="_blank"
            rel="noopener"
            style={{ display: "block", marginTop: 20, fontFamily: "var(--font-body)", fontSize: 14, color: "var(--olive-700)", textDecoration: "underline" }}
          >
            Check gift card balance
          </a>
        </div>

        {/* right — purchase card */}
        <div style={{
          background: "var(--marble)",
          border: "1px solid var(--border)",
          borderRadius: 16,
          padding: "28px 28px 24px",
          boxShadow: "var(--shadow-md)",
          display: "flex",
          flexDirection: "column",
          gap: 18,
          maxWidth: 420
        }}>
          <div>
            <p style={{
              fontFamily: "var(--font-display)",
              fontSize: 11,
              letterSpacing: ".18em",
              textTransform: "uppercase",
              color: "var(--ink-500)",
              margin: "0 0 12px"
            }}>Choose an amount</p>

            <div className="dh-pillrow" style={{ marginBottom: 12 }}>
              {AMOUNTS.map(v => (
                <button
                  type="button" key={v}
                  className={`dh-pill ${(!custom && amount === v) ? "is-on" : ""}`}
                  onClick={pick(v)}
                >${v}</button>
              ))}
            </div>

            <label style={{
              fontFamily: "var(--font-display)",
              fontSize: 10,
              letterSpacing: ".16em",
              textTransform: "uppercase",
              color: "var(--ink-700)",
              display: "block",
              marginBottom: 6
            }}>
              Or enter a custom amount
            </label>
            <div style={{ position: "relative" }}>
              <span style={{
                position: "absolute",
                left: 14,
                top: "50%",
                transform: "translateY(-50%)",
                fontFamily: "var(--font-body)",
                fontSize: 15,
                color: "var(--ink-500)"
              }}>$</span>
              <input
                className="dh-input"
                type="number"
                min={10}
                max={1000}
                step={5}
                value={custom}
                onChange={(e) => setCustom(e.target.value)}
                placeholder="100"
                style={{ paddingLeft: 26 }}
              />
            </div>
          </div>

          <a
            className="dh-btn dh-btn-primary"
            href="https://order.toasttab.com/egiftcards/dimis-hospitality-157-us-1-tequesta-fl-33469"
            target="_blank"
            rel="noopener"
            style={{ justifyContent: "center" }}
          >
            Purchase gift card
          </a>

          <p style={{
            fontFamily: "var(--font-body)",
            fontStyle: "italic",
            fontSize: 13,
            color: "var(--ink-700)",
            margin: 0,
            textAlign: "center"
          }}>
            You'll choose the recipient on the next step.
          </p>
        </div>

      </div>
    </section>
  );
}

const listItem = {
  fontFamily: "var(--font-body)",
  fontSize: 15,
  color: "var(--ink-700)",
  display: "flex",
  alignItems: "baseline",
  gap: 10
};

window.GiftCards = GiftCards;