// Everyday List — email + SMS + birthday signup.

function ListBlock() {
  const D = "var(--c-dark-green)";
  const C = "var(--c-cream)";
  const Y = "var(--c-yellow)";
  const S = "var(--c-sea-green)";

  return (
    <section className="cream-deep">
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
          gap: 56, alignItems: "stretch",
        }}>
          {/* Left — pitch */}
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", gap: 22 }}>
            <p className="eyebrow" style={{ color: D }}>The Everyday List</p>
            <h2 style={{ color: D, maxWidth: "14ch" }}>
              Sign up. Free drink on your <em style={{ fontStyle: "italic", color: S }}>birthday.</em>
            </h2>
            <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6, maxWidth: "44ch",
                         color: "color-mix(in oklab, " + D + " 82%, transparent)" }}>
              One email a month — what's new in the market, what Chef Frank is cooking, when the
              next pop-up drops. Plus a free drink on your birthday and first dibs on seasonal
              launches.
            </p>
            <ul style={{ margin: 0, padding: 0, listStyle: "none",
                          fontFamily: "var(--font-mono)", fontSize: 11,
                          letterSpacing: "0.14em", textTransform: "uppercase", color: D,
                          display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px 24px" }}>
              <li>· Free birthday drink</li>
              <li>· First dibs on drops</li>
              <li>· Pop-up market alerts</li>
              <li>· Member-only specials</li>
            </ul>
          </div>

          {/* Right — form */}
          <div style={{
            background: D, color: C, borderRadius: 10,
            padding: "36px 36px 32px",
            display: "flex", flexDirection: "column", gap: 18,
          }}>
            <div className="mono" style={{ color: Y }}>Join · takes 20 seconds</div>

            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <span className="mono" style={{ color: Y, opacity: 0.8 }}>Email</span>
                <input type="email" placeholder="you@oakcliff.com"
                       style={{ padding: "12px 14px", borderRadius: 6,
                                 border: "1px solid color-mix(in oklab, " + C + " 26%, transparent)",
                                 background: "color-mix(in oklab, " + C + " 6%, transparent)",
                                 color: C, fontFamily: "var(--font-body)", fontSize: 14.5 }} />
              </label>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <span className="mono" style={{ color: Y, opacity: 0.8 }}>Phone · optional</span>
                  <input type="tel" placeholder="(214) 555-0123"
                         style={{ padding: "12px 14px", borderRadius: 6,
                                   border: "1px solid color-mix(in oklab, " + C + " 26%, transparent)",
                                   background: "color-mix(in oklab, " + C + " 6%, transparent)",
                                   color: C, fontFamily: "var(--font-body)", fontSize: 14.5 }} />
                </label>
                <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <span className="mono" style={{ color: Y, opacity: 0.8 }}>Birthday</span>
                  <input type="text" placeholder="MM / DD"
                         style={{ padding: "12px 14px", borderRadius: 6,
                                   border: "1px solid color-mix(in oklab, " + C + " 26%, transparent)",
                                   background: "color-mix(in oklab, " + C + " 6%, transparent)",
                                   color: C, fontFamily: "var(--font-body)", fontSize: 14.5 }} />
                </label>
              </div>
            </div>

            <label style={{ display: "flex", alignItems: "flex-start", gap: 10,
                              fontSize: 12.5, lineHeight: 1.5, marginTop: 6,
                              color: "color-mix(in oklab, " + C + " 75%, transparent)" }}>
              <input type="checkbox" defaultChecked style={{ marginTop: 3 }} />
              <span>SMS me a coupon on my birthday + the occasional drop. Standard rates apply.</span>
            </label>

            <button className="btn btn-primary" style={{ marginTop: 6 }}>
              Sign me up →
            </button>

            <div className="mono" style={{ opacity: 0.6, marginTop: 4 }}>
              No spam. Unsubscribe any time.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ListBlock = ListBlock;