/* global React, Icon, Button, Eyebrow, BrassRule, DishPlaceholder */
const { useState } = React;

// DoorDash and Square links — pulled from menu PDF context (Square pickup, DoorDash delivery).
// Real merchant URLs aren't in the provided menu — using canonical brand URLs as placeholders.
const SQUARE_URL = "https://cash.app/order/$tandooriflames";
const DOORDASH_URL = "https://www.doordash.com/store/tandoori-flames-central-point-42893607/106600349/";

// Brand wordmarks as inline SVG — DoorDash red #FF3008, Uber Eats black
const DoorDashLogo = ({ height = 18, color = "#FF3008" }) => (
  <svg height={height} viewBox="0 0 200 32" fill={color} xmlns="http://www.w3.org/2000/svg" aria-label="DoorDash" style={{ display: "block" }}>
    <text x="0" y="24" fontFamily="Inter, system-ui, -apple-system, sans-serif" fontWeight="700" fontSize="26" letterSpacing="-0.5">DoorDash</text>
  </svg>
);
const UberEatsLogo = ({ height = 18, color = "#000" }) => (
  <svg height={height} viewBox="0 0 220 32" fill={color} xmlns="http://www.w3.org/2000/svg" aria-label="Uber Eats" style={{ display: "block" }}>
    <text x="0" y="24" fontFamily="Inter, system-ui, -apple-system, sans-serif" fontWeight="700" fontSize="26" letterSpacing="-0.5">Uber </text>
    <text x="74" y="24" fontFamily="Inter, system-ui, -apple-system, sans-serif" fontWeight="500" fontSize="26" fontStyle="italic" letterSpacing="-0.5">Eats</text>
  </svg>
);

function OrderSection({ mode, setMode }) {
  return (
    <section id="order" style={{ background: "var(--tf-parchment)", padding: "64px 22px" }}>
      <div style={{ maxWidth: 1000, margin: "0 auto", textAlign: "center" }}>
        <Eyebrow>Order online</Eyebrow>
        <h2 style={{ fontFamily: "var(--tf-font-display)", fontWeight: 500, fontSize: "clamp(30px, 4.4vw, 44px)", lineHeight: 1.1, letterSpacing: "-0.01em", margin: "10px 0 12px", color: "var(--tf-ink-700)", textWrap: "balance" }}>
          Pickup or delivery — ready in 20&ndash;30 minutes.
        </h2>
        <p style={{ fontFamily: "var(--tf-font-prose)", fontSize: 17, lineHeight: 1.6, color: "var(--tf-fg-muted)", margin: "0 auto", maxWidth: 540, textWrap: "pretty" }}>
          Order online for pickup at the host stand, or have it delivered hot to your door. Or call to order: <a href="tel:+15414235109" style={{ color: "var(--tf-crimson-600)", borderBottom: "1px solid var(--tf-brass-400)" }}>(541) 423-5109</a>.
        </p>

        {/* Two side-by-side option cards */}
        <div className="tf-order-grid" style={{
          marginTop: 36,
          display: "grid",
          gridTemplateColumns: "1fr",
          gap: 18,
          textAlign: "left",
        }}>
          {/* PICKUP CARD */}
          <article style={{
            position: "relative",
            background: "#fff",
            border: "1px solid var(--tf-border)",
            borderRadius: 16,
            padding: "26px 24px 24px",
            boxShadow: "var(--tf-shadow-md)",
            display: "flex",
            flexDirection: "column",
            gap: 16,
          }}>
            <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12 }}>
              <div>
                <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "4px 10px", borderRadius: 999, background: "var(--tf-brass-50)", color: "var(--tf-brass-600)", fontSize: 11, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase" }}>
                  <Icon.Pickup /> Pickup
                </div>
                <h3 style={{ margin: "12px 0 4px", fontFamily: "var(--tf-font-display)", fontWeight: 500, fontSize: 26, color: "var(--tf-ink-700)", lineHeight: 1.15 }}>
                  Pickup at 210 Peninger Rd
                </h3>
                <div style={{ fontSize: 14, color: "var(--tf-fg-muted)" }}>Ready in 20–25 min · powered by Square</div>
              </div>
            </div>
            <Button variant="primary" size="lg" fullWidth href={SQUARE_URL} target="_blank" rel="noopener">
              Order Pickup <Icon.Arrow />
            </Button>
            <div style={{ fontSize: 12, color: "var(--tf-fg-subtle)", letterSpacing: "0.02em" }}>
              Please inform your server of any dietary restrictions.
            </div>
          </article>

          {/* DELIVERY CARD */}
          <article style={{
            position: "relative",
            background: "#fff",
            border: "1px solid var(--tf-border)",
            borderRadius: 16,
            padding: "26px 24px 24px",
            boxShadow: "var(--tf-shadow-md)",
            display: "flex",
            flexDirection: "column",
            gap: 16,
          }}>
            <div>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "4px 10px", borderRadius: 999, background: "rgba(168,49,30,0.08)", color: "var(--tf-crimson-600)", fontSize: 11, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase" }}>
                <Icon.Truck /> Delivery
              </div>
              <h3 style={{ margin: "12px 0 4px", fontFamily: "var(--tf-font-display)", fontWeight: 500, fontSize: 26, color: "var(--tf-ink-700)", lineHeight: 1.15 }}>
                Delivered to your door
              </h3>
              <div style={{ fontSize: 14, color: "var(--tf-fg-muted)" }}>30–40 min typical · choose your platform</div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {/* DoorDash — active */}
              <a href={DOORDASH_URL} target="_blank" rel="noopener" style={{
                display: "flex", alignItems: "center", justifyContent: "space-between",
                padding: "14px 20px", borderRadius: 12,
                background: "#fff", border: "1.5px solid #FF3008",
                textDecoration: "none", cursor: "pointer",
                transition: "transform 160ms var(--tf-ease-warm), box-shadow 160ms var(--tf-ease-warm)",
                boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-1px)"; e.currentTarget.style.boxShadow = "0 6px 16px rgba(255,48,8,0.18)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 1px 2px rgba(0,0,0,0.04)"; }}>
                <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                  <DoorDashLogo height={20} />
                  <span style={{ fontFamily: "var(--tf-font-body)", fontSize: 14, fontWeight: 600, color: "var(--tf-ink-700)" }}>Order on DoorDash</span>
                </div>
                <span style={{ color: "#FF3008", display: "flex", alignItems: "center" }}><Icon.Arrow /></span>
              </a>

              {/* Uber Eats — coming soon, disabled */}
              <div style={{
                display: "flex", alignItems: "center", justifyContent: "space-between",
                padding: "14px 20px", borderRadius: 12,
                background: "var(--tf-cream)", border: "1px dashed var(--tf-border-strong)",
                cursor: "not-allowed", opacity: 0.85,
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                  <span style={{ filter: "grayscale(1)", opacity: 0.6 }}><UberEatsLogo height={20} /></span>
                  <span style={{ fontFamily: "var(--tf-font-body)", fontSize: 14, fontWeight: 600, color: "var(--tf-fg-muted)" }}>Uber Eats</span>
                </div>
                <span style={{
                  fontFamily: "var(--tf-font-body)", fontSize: 11, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase",
                  padding: "4px 10px", borderRadius: 999,
                  background: "var(--tf-brass-50)", color: "var(--tf-brass-600)", border: "1px solid var(--tf-border-brass)",
                }}>Coming Soon</span>
              </div>
            </div>
            <div style={{ fontSize: 12, color: "var(--tf-fg-subtle)", letterSpacing: "0.02em" }}>
              Delivery fees and ETAs vary by platform.
            </div>
          </article>
        </div>
      </div>

      <style>{`
        @media (min-width: 760px) {
          .tf-order-grid { grid-template-columns: 1fr 1fr !important; gap: 22px !important; }
        }
      `}</style>
    </section>);

}

// Legacy ToggleButton retained for any external imports — no-op for layout.
function ToggleButton({ active, onClick, icon, label, sub }) {
  return (
    <button onClick={onClick} style={{
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2,
      padding: "10px 22px",
      borderRadius: 999,
      border: "0",
      background: active ? "var(--tf-crimson-500)" : "transparent",
      color: active ? "#fff" : "var(--tf-ink-600)",
      cursor: "pointer",
      transition: "background 200ms var(--tf-ease-warm), color 200ms var(--tf-ease-warm)",
      minWidth: 130
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--tf-font-body)", fontWeight: 600, fontSize: 14, letterSpacing: "0.04em" }}>
        {icon} {label}
      </div>
      <div style={{ fontSize: 11, opacity: active ? 0.85 : 0.65, letterSpacing: "0.06em" }}>{sub}</div>
    </button>);

}

const FEATURED = [
{ name: "Butter Chicken", desc: "Tender chicken in a rich, creamy tomato-butter sauce. A timeless classic.", price: "$16.99", idx: 0, photo: "assets/gallery/butter-chicken.png", pos: "center" },
{ name: "Chicken Tikka Masala", desc: "Marinated chicken tikka simmered in a smoky, spiced masala gravy.", price: "$16.99", idx: 1, photo: "assets/dishes/tikka-masala.png", pos: "center" },
{ name: "Lamb Biryani", desc: "Fall-off-the-bone lamb dum biryani with saffron-infused rice and crispy onions.", price: "$14.00", idx: 2, photo: "assets/dishes/lamb-biryani.png", pos: "center" },
{ name: "Tandoori Tikka", desc: "Assorted tikka platter straight from the tandoor with mint chutney.", price: "$17.00", idx: 3, photo: "assets/gallery/tandoori-chicken.png", pos: "center" },
{ name: "Garlic Naan", desc: "White flour naan baked in our tandoor, garnished with garlic butter and herbs.", price: "$3.99", idx: 4, photo: "assets/dishes/garlic-naan.png", pos: "center" },
{ name: "Mango Lassi", desc: "Thick, chilled blend of yogurt, fresh mango and a touch of cardamom.", price: "$4.99", idx: 5, photo: "assets/dishes/mango-lassi.png", pos: "center" }];


function FeaturedDishes() {
  return (
    <section id="menu" style={{ background: "var(--tf-cream)", padding: "72px 0" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 22px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16, marginBottom: 28 }}>
          <div>
            <Eyebrow>From the menu</Eyebrow>
            <h2 style={{ fontFamily: "var(--tf-font-display)", fontWeight: 500, fontSize: "clamp(30px, 4.4vw, 44px)", lineHeight: 1.1, letterSpacing: "-0.01em", margin: "10px 0 0", color: "var(--tf-ink-700)" }}>
              Guest Favourites
            </h2>
            <p style={{ fontFamily: "var(--tf-font-prose)", fontSize: 16, color: "var(--tf-fg-muted)", margin: "8px 0 0", maxWidth: 520 }}>
              The dishes our regulars order on repeat. Slow-cooked sauces, fire-finished tandoor, naan straight from the clay oven.
            </p>
          </div>
          <a href="#order" style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 600, color: "var(--tf-crimson-600)", letterSpacing: "0.04em" }}>
            Order from the full menu <Icon.Arrow />
          </a>
        </div>
      </div>

      {/* Horizontal scroll on mobile, 4-col grid on desktop */}
      <div className="tf-hscroll" style={{ overflowX: "auto", WebkitOverflowScrolling: "touch", scrollSnapType: "x mandatory", paddingBottom: 12 }}>
        <div className="tf-featured-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(6, minmax(240px, 1fr))",
          gap: 16,
          padding: "0 22px",
          maxWidth: 1200,
          margin: "0 auto"
        }}>
          {FEATURED.map((d, i) =>
          <article key={d.name} style={{
            scrollSnapAlign: "start",
            background: "#fff",
            borderRadius: 14,
            overflow: "hidden",
            boxShadow: "var(--tf-shadow-md)",
            border: "1px solid var(--tf-border)",
            display: "flex",
            flexDirection: "column"
          }}>
              {d.photo ?
            <div style={{ aspectRatio: "4 / 3", width: "100%", overflow: "hidden", background: "var(--tf-charcoal)" }}>
                  <img src={d.photo} alt={d.name} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: d.pos || "center", display: "block" }} />
                </div> :

            <DishPlaceholder name={d.name} idx={d.idx} aspect="4 / 3" />
            }
              <div style={{ padding: "14px 16px 16px", display: "flex", flexDirection: "column", gap: 6, flex: 1 }}>
                <h3 style={{ margin: 0, fontFamily: "var(--tf-font-display)", fontWeight: 500, fontSize: 22, lineHeight: 1.15, color: "var(--tf-ink-700)", textWrap: "balance" }}>{d.name}</h3>
                <p style={{ margin: 0, fontSize: 13, lineHeight: 1.5, color: "var(--tf-fg-muted)", flex: 1 }}>{d.desc}</p>
                <div style={{ marginTop: 6, fontFamily: "var(--tf-font-body)", fontWeight: 600, fontSize: 16, color: "var(--tf-brass-600)", fontVariantNumeric: "tabular-nums" }}>{d.price}</div>
              </div>
            </article>
          )}
        </div>
      </div>

      <style>{`
        @media (min-width: 980px) {
          .tf-hscroll { overflow: visible; }
          .tf-featured-grid { grid-template-columns: repeat(4, 1fr) !important; }
          .tf-featured-grid > article:nth-child(n+5) { display: none; }
        }
        @media (min-width: 1240px) {
          .tf-featured-grid { grid-template-columns: repeat(6, 1fr) !important; }
          .tf-featured-grid > article:nth-child(n+5) { display: flex !important; }
        }
      `}</style>
    </section>);

}

window.OrderSection = OrderSection;
window.FeaturedDishes = FeaturedDishes;