/* global React */
/* ============================================================
   WV Smokehouse — Sections (Menu, Stage, Bar, Pit, Find Us, Header, Footer)
   ============================================================ */

/* ---------- THE MENU ---------- */
const MENU_DATA = [
  {
    section: 'Appetizers',
    items: [
      { name: 'Smoked Sausage',         price: '$7 each',  desc: '' },
      { name: 'Brisket Jalapeño Poppers', price: '4 for $8',
        desc: 'Bacon-wrapped jalapeño poppers stuffed with cream cheese and smoked brisket. (8 pcs.)' },
    ],
  },
  {
    section: 'Proteins & Platters',
    note: 'Smoked with locally sourced White Oak and served with 2 sides of your choice. Extra sides are $3 each.',
    items: [
      { name: 'Large Platter — 4 People', price: '$58',
        desc: 'Your choice of 6 meats and 3 sides.', featured: true },
      { name: 'Small Platter — 2 People', price: '$35',
        desc: 'Your choice of 3 meats and 3 sides.' },
      { name: 'Pork Rib Platter', price: '$24  /  $36', smoke: '8 hrs',
        desc: 'Smoked for 8 hours; choose a ½ rack or full rack, and 2 sides.' },
      { name: 'Smoked Brisket', price: '$22', smoke: '17 hrs', proud: true,
        desc: 'Smoked 17 hours to mouth-watering perfection.' },
      { name: 'Pork Belly', price: '$19', smoke: '4 hrs',
        desc: 'Smoked 4 hours and seared for a crispy finish.' },
      { name: 'Chicken Thighs', price: '$17', smoke: '2 hrs',
        desc: 'Seasoned and smoked for 2 hours. Perfect for a mid-week meal or to grab on your way to the game.' },
      { name: 'Pulled Pork', price: '$18', smoke: '14 hrs', proud: true,
        desc: 'Smoked for 14 hours. Packed with flavor and piled high on a toasted bun. Pairs perfectly with our baked beans, coleslaw, and a beer.' },
      { name: 'Smoked Tri-Tip', price: '$22', smoke: '6 hrs',
        desc: 'Six hours in the smoker, served with freshly made chimichurri on top.' },
      { name: 'Smoked Sausage', price: '$17',
        desc: 'Grilled and served with your choice of 2 sides.' },
    ],
  },
  {
    section: 'Sandwiches',
    note: 'Comes with your choice of 2 sides. Extra sides are $3 each.',
    items: [
      { name: 'Pulled Pork Sandwich', price: '$19',
        desc: 'Served on a toasted brioche bun with our homemade BBQ sauce.' },
      { name: 'Tri-Tip Sandwich', price: '$22',
        desc: 'Homemade tangy Australian BBQ sauce, chimichurri, and sharp cheddar on a toasted brioche bun.' },
      { name: 'Chicken & Pork Belly Sandwich', price: '$21',
        desc: 'Slow-smoked chicken thigh with smoked and seared pork, topped with Tillamook cheddar on a toasted brioche bun.' },
      { name: 'Grilled Cheeseburger', price: '$19',
        desc: '80/20 grass-fed Willamette Valley beef topped with Tillamook cheddar on a toasted brioche bun.' },
      { name: 'Kids Grilled Cheese', price: '$7',
        desc: 'Made with creamy melted Tillamook cheese.' },
    ],
  },
  {
    section: 'Salad & Sides',
    note: 'Sides subject to change based on ingredient availability and item sell-out.',
    items: [
      { name: 'Smoked Tri-Tip Salad', price: '$10  /  +$19 meat',
        desc: 'Local mixed greens, bell peppers, almonds, queso blanco, and smoky juicy tri-tip. Served with our own freshly made strawberry vinaigrette.' },
    ],
    sides: {
      heading: 'Our Smokehouse Sides',
      price: '$3 each',
      list: [
        'Smoky Campfire Street Corn',
        'BBQ Baked Beans (contains meat)',
        'Coleslaw',
        'Bavarian Potato Salad',
        'Homemade Cornbread with Honey Butter',
      ],
    },
  },
];

function Menu(){
  return (
    <section id="menu" className="menu-section" data-screen-label="The Menu">
      <div className="menu-inner">
        <header className="menu-head">
          <div className="menu-eyebrow">
            <span className="ornament">❦</span>
            <span>The Menu</span>
            <span className="ornament">❦</span>
          </div>
          <h2 className="menu-title">Smokin' Good.</h2>
          <p className="menu-sub">
            Every cut goes over locally sourced White Oak — low, slow, and honest.
            The hours under each meat are what they actually take.
          </p>
          <p className="menu-change">Menu subject to change based on supply and ingredient availability.</p>
          <div className="menu-rule"><span className="diamond"></span></div>
        </header>

        <div className="menu-grid">
          {MENU_DATA.map((sec, i) => (
            <MenuSection key={i} {...sec} />
          ))}
        </div>
      </div>
    </section>
  );
}

function MenuSection({ section, note, items, sides }){
  return (
    <div className="menu-block">
      <div className="block-head">
        <h3 className="block-title">{section}</h3>
        <span className="block-stroke" aria-hidden="true"></span>
      </div>
      {note && <p className="block-note">{note}</p>}
      <ul className="item-list">
        {items.map((it, i) => <MenuItem key={i} {...it} />)}
      </ul>
      {sides && (
        <div className="sides-block">
          <div className="sides-head">
            <h4 className="sides-title">{sides.heading}</h4>
            <span className="sides-price">{sides.price}</span>
          </div>
          <ul className="sides-list">
            {sides.list.map((s, i) => <li key={i}>{s}</li>)}
          </ul>
        </div>
      )}
    </div>
  );
}

function MenuItem({ name, price, desc, smoke, proud, featured }){
  return (
    <li className={`item ${proud ? 'is-proud' : ''} ${featured ? 'is-featured' : ''}`}>
      <div className="item-row">
        <div className="item-name-wrap">
          <span className="item-name">{name}</span>
          {smoke && (
            <span className={`smoke-tag ${proud ? 'is-proud' : ''}`}>
              <SmokeTagSvg />
              <span>Smoked {smoke}</span>
            </span>
          )}
        </div>
        <span className="leaders" aria-hidden="true"></span>
        <span className="item-price">{price}</span>
      </div>
      {desc && <p className="item-desc">{desc}</p>}
    </li>
  );
}

function SmokeTagSvg(){
  return (
    <svg viewBox="0 0 14 14" width="11" height="11" fill="none" aria-hidden="true">
      <path d="M7 1 C 8 3 9.5 3.6 9.5 5.6 C 9.5 7.3 8.4 8.4 7 8.4 C 5.6 8.4 4.5 7.3 4.5 5.6 C 4.5 4 6 3 7 1 Z"
            fill="currentColor"/>
    </svg>
  );
}

/* ---------- ON THE STAGE ---------- */
function Stage(){
  // events are clearly-marked placeholders the owner will fill in
  const EVENTS = [
    { kind: 'LIVE MUSIC',   placeholder: true, color: 'crimson' },
    { kind: 'PAINT NIGHT',  placeholder: true, color: 'walnut' },
    { kind: 'CAR MEET',     placeholder: true, color: 'ember' },
  ];

  return (
    <section id="stage" className="stage-section" data-screen-label="On the Stage">
      <div className="stage-bg" aria-hidden="true">
        <div className="stage-haze haze-1"></div>
        <div className="stage-haze haze-2"></div>
        <div className="stage-haze haze-3"></div>
      </div>

      <div className="stage-inner">
        <header className="stage-head">
          <div className="stage-eyebrow">
            <span className="ornament">❦</span>
            <span>On the Stage</span>
            <span className="ornament">❦</span>
          </div>
          <h2 className="stage-title">
            What's on<br/>
            <em>tonight.</em>
          </h2>
          <p className="stage-body">
            Our venue features live music, paint nights, workshops, car meets, bike nights,
            swap meets, crafters markets, and more. Check our calendar for upcoming events,
            and follow our socials for the most current updates.
          </p>
        </header>

        <div className="poster-wall">
          {EVENTS.map((ev, i) => (
            <EventPoster key={i} ev={ev} idx={i} />
          ))}
        </div>

        <div className="stage-foot">
          <p className="booking-line">
            For talent, vendor, and event booking, message our coordinator at{' '}
            <a href="mailto:hello@wvsmokehouse.com" className="email-link">hello@wvsmokehouse.com</a>.
          </p>
          <a className="ghost-link" href="#" aria-label="See the full events calendar">
            See the full calendar
            <span className="arrow-r" aria-hidden="true">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

function EventPoster({ ev, idx }){
  return (
    <article className={`poster poster-${ev.color}`} style={{ '--rot': `${(idx-1)*1.4}deg` }}>
      <div className="poster-pin" aria-hidden="true"></div>
      <div className="poster-inner">
        <div className="poster-kind">{ev.kind}</div>
        <div className="poster-hr"></div>
        <div className="poster-body">
          <div className="poster-date">
            <span className="day-name">FRI</span>
            <span className="day-num">—</span>
            <span className="day-month">date TBA</span>
          </div>
          <h3 className="poster-headline">An evening at The Corner</h3>
          <p className="poster-sub">Owner fills in artist / event details — placeholder copy.</p>
        </div>
        <div className="poster-foot">
          <span className="poster-time">7:00 — 10:00 pm</span>
          <span className="poster-no">No cover</span>
        </div>
        <div className="poster-stamp" aria-hidden="true">PLACEHOLDER</div>
      </div>
    </article>
  );
}

/* ---------- THE BAR ---------- */
function Bar(){
  return (
    <section id="bar" className="bar-section" data-screen-label="The Bar">
      <div className="bar-inner">
        <div className="bar-text">
          <div className="bar-eyebrow">
            <span className="ornament">❦</span>
            <span>The Bar</span>
            <span className="ornament">❦</span>
          </div>
          <h2 className="bar-title">
            Twelve taps. <em>Cheers.</em>
          </h2>
          <p className="bar-body">
            We have 12 taps and wine. We carry a great selection of Oregon craft beer, and
            for our non-beer drinkers, a popular selection of local wines.
          </p>
          <div className="bar-stats">
            <div><span className="stat-num">12</span><span className="stat-lbl">taps</span></div>
            <div><span className="stat-num">OR</span><span className="stat-lbl">craft beer & cider</span></div>
            <div><span className="stat-num">∴</span><span className="stat-lbl">local wines</span></div>
          </div>
        </div>

        <aside className="bar-feature">
          <div className="feature-label">Featured Pour</div>
          <div className="feature-name">
            <span className="brand">Two Towns</span>
            <span className="line">Raspberry Cosmic Crisp Cider</span>
          </div>
          <p className="feature-tasting">
            Crafted with Northwest raspberries, cranberries, and Cosmic Crisp apples,
            this celestial sipper will have you ripping the whitewaters of the milky way.
          </p>
          <div className="feature-meta">
            <span>Cider</span>
            <span className="dot">·</span>
            <span>Corvallis, Oregon</span>
          </div>
        </aside>
      </div>
    </section>
  );
}

/* ---------- THE PIT (Jimmy + craft) ---------- */
function Pit(){
  return (
    <section id="pit" className="pit-section" data-screen-label="The Pit">
      <div className="pit-bg" aria-hidden="true">
        <div className="pit-smoke pit-smoke-1"></div>
        <div className="pit-smoke pit-smoke-2"></div>
        <div className="pit-smoke pit-smoke-3"></div>
      </div>

      <div className="pit-inner">
        <div className="pit-content">
          <div className="pit-eyebrow">
            <span className="ornament">❦</span>
            <span>The Pit</span>
            <span className="ornament">❦</span>
          </div>

          <h2 className="pit-title">
            Thirty years <br/>
            in <em>the smoke.</em>
          </h2>

          <p className="pit-body">
            With over 30 years of experience, owner Jimmy Brundage has perfected
            his signature style of smoking the juiciest, most flavorful cuts of meat.
          </p>

          <p className="pit-atmos">
            Sit by the campfire and relax with a glass of locally sourced cold beer or wine
            in the company of good people, and enjoy the sounds of live local musicians while
            being served by our friendly staff. We look forward to seeing you.
          </p>

          <div className="pit-proof">
            <ProofTile big="17" unit="hr" label="brisket" />
            <ProofTile big="14" unit="hr" label="pulled pork" />
            <ProofTile big="8" unit="hr"  label="ribs" />
            <ProofTile big="6" unit="hr"  label="tri-tip" />
            <ProofTile big="4" unit="hr"  label="pork belly" />
            <ProofTile big="2" unit="hr"  label="chicken thigh" />
          </div>

          <div className="pit-tagline">
            <span className="hand-line">All of it. Over locally sourced White Oak.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProofTile({ big, unit, label }){
  return (
    <div className="proof-tile">
      <div className="proof-num">
        <span className="proof-big">{big}</span>
        <span className="proof-unit">{unit}</span>
      </div>
      <div className="proof-label">{label}</div>
    </div>
  );
}

/* ---------- FIND US ---------- */
function FindUs(){
  return (
    <section id="find-us" className="findus-section" data-screen-label="Find Us">
      <div className="findus-inner">
        <header className="findus-head">
          <div className="findus-eyebrow">
            <span className="ornament">❦</span>
            <span>Find Us</span>
            <span className="ornament">❦</span>
          </div>
          <h2 className="findus-title">
            Pull up<br/>
            <em>a chair.</em>
          </h2>
          <p className="findus-body">
            It's easy to find us — we're just off I-5 at the Delaney Rd exit
            (a.k.a. the <em>Enchanted Forest</em> exit).
          </p>
        </header>

        <div className="findus-grid">
          <div className="findus-card findus-addr">
            <div className="card-label">Address</div>
            <p className="card-body">
              2411 Delaney Road SE<br/>
              Salem, Oregon 97392
            </p>
            <a className="card-cta" href="https://www.google.com/maps/dir/?api=1&destination=2411+Delaney+Road+SE+Salem+OR+97392" target="_blank" rel="noopener noreferrer">
              Get directions <span aria-hidden="true">→</span>
            </a>
          </div>

          <div className="findus-card findus-hours">
            <div className="card-label">Hours</div>
            <p className="card-body big">
              <span>Open daily</span><br/>
              <strong>11am — 9pm</strong>
            </p>
            <p className="card-sub">We look forward to seeing you.</p>
          </div>

          <div className="findus-card findus-cta-card">
            <div className="ember-glow" aria-hidden="true"></div>
            <h3 className="big-cta-title">Come in soon.</h3>
            <p className="big-cta-body">Bring a friend. Bring two. We'll save you the corner.</p>
            <a className="cta" href="https://www.google.com/maps/dir/?api=1&destination=2411+Delaney+Road+SE+Salem+OR+97392" target="_blank" rel="noopener noreferrer">
              Take me there
              <span className="cta-arrow" aria-hidden="true"></span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- HEADER / FOOTER ---------- */
function SiteHeader({ onMenu }){
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`site-header ${scrolled ? 'is-scrolled' : ''}`}>
      <a className="brand" href="#" aria-label="Willamette Valley Smokehouse home">
        <span className="mark">
          <svg viewBox="0 0 40 40" fill="none">
            <defs>
              <linearGradient id="flame-g" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="#f5a35a"/>
                <stop offset="60%" stopColor="#d97843"/>
                <stop offset="100%" stopColor="#7a2a1f"/>
              </linearGradient>
            </defs>
            <path d="M20 6 C 23 12, 28 14, 28 22 C 28 29, 23 33, 20 33 C 17 33, 12 29, 12 22 C 12 16, 17 14, 20 6 Z" fill="url(#flame-g)"/>
            <path d="M20 14 C 22 18, 24 19, 24 24 C 24 28, 22 30, 20 30 C 18 30, 16 28, 16 24 C 16 20, 18 19, 20 14 Z" fill="#fff3c5" opacity=".55"/>
          </svg>
        </span>
        <span className="wordmark">
          <span className="top">WV Smokehouse</span>
          <span className="bottom">at The Corner</span>
        </span>
      </a>
      <button className="menu-button" onClick={onMenu} aria-label="Open menu">
        <span className="bars"><span></span><span></span><span></span></span>
      </button>
    </header>
  );
}

function SiteFooter(){
  return (
    <footer className="site-footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <div className="footer-mark">
            <svg viewBox="0 0 40 40" width="44" height="44" fill="none">
              <defs>
                <linearGradient id="flame-g-foot" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stopColor="#f5a35a"/>
                  <stop offset="60%" stopColor="#d97843"/>
                  <stop offset="100%" stopColor="#7a2a1f"/>
                </linearGradient>
              </defs>
              <path d="M20 6 C 23 12, 28 14, 28 22 C 28 29, 23 33, 20 33 C 17 33, 12 29, 12 22 C 12 16, 17 14, 20 6 Z" fill="url(#flame-g-foot)"/>
            </svg>
          </div>
          <div className="footer-name">
            <div className="top">Willamette Valley Smokehouse</div>
            <div className="bottom">at The Corner — Salem, Oregon</div>
          </div>
        </div>

        <div className="footer-cols">
          <div className="footer-col">
            <div className="footer-col-label">Reach out</div>
            <ul className="footer-emails">
              <li>
                <span className="ftr-role">Owner</span>
                <a href="mailto:jimmy@wvsmokehouse.com">jimmy@wvsmokehouse.com</a>
              </li>
              <li>
                <span className="ftr-role">Talent & events</span>
                <a href="mailto:hello@wvsmokehouse.com">hello@wvsmokehouse.com</a>
              </li>
              <li>
                <span className="ftr-role">Catering</span>
                <a href="mailto:catering@wvsmokehouse.com">catering@wvsmokehouse.com</a>
              </li>
            </ul>
          </div>

          <div className="footer-col">
            <div className="footer-col-label">Visit</div>
            <p className="footer-addr">
              2411 Delaney Road SE<br/>
              Salem, Oregon 97392<br/>
              <span className="ftr-hours">Open daily, 11am — 9pm</span>
            </p>
          </div>

          <div className="footer-col">
            <div className="footer-col-label">Follow & gift</div>
            <div className="social-row">
              <a className="social" href="#" aria-label="Facebook">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M13 22v-8h3l1-4h-4V7.5c0-1.1.4-2 2-2h2V2c-.4 0-1.6-.1-2.9-.1-2.9 0-4.6 1.7-4.6 4.8V10H6v4h3.5v8H13z"/></svg>
              </a>
              <a className="social" href="#" aria-label="Instagram">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
              </a>
            </div>
            <a className="gift-link" href="#">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="8" width="18" height="13" rx="1.5"/><path d="M3 12h18"/><path d="M12 8v13"/><path d="M8 8c-1.5 0-3-1-3-2.5S6 3 8 3c2 0 4 5 4 5s2-5 4-5c2 0 3 1 3 2.5S17.5 8 16 8H8z"/></svg>
              Gift cards available
            </a>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} Willamette Valley Smokehouse.</span>
          <span className="ftr-tag">Smokin' Good BBQ — at The Corner.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Menu, Stage, Bar, Pit, FindUs, SiteHeader, SiteFooter });