/* global React */
// Shared small components — exported to window so other Babel scripts can use them.

const { useState, useEffect, useMemo, useRef } = React;

// Logomark — a small stylized sun/produce icon used in the brand mark + footer.
function LogoMark({ size = 34, fill = "var(--cream-warm)", bg = "var(--green)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" aria-hidden="true">
      <circle cx="20" cy="20" r="20" fill={bg} />
      {/* sun rays */}
      <g stroke={fill} strokeWidth="1.4" strokeLinecap="round" opacity="0.95">
        {Array.from({ length: 12 }).map((_, i) => {
          const a = (i / 12) * Math.PI * 2;
          const x1 = 20 + Math.cos(a) * 9;
          const y1 = 20 + Math.sin(a) * 9;
          const x2 = 20 + Math.cos(a) * 13;
          const y2 = 20 + Math.sin(a) * 13;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} />;
        })}
      </g>
      <circle cx="20" cy="20" r="7.5" fill={fill} />
    </svg>
  );
}

// A reusable "TopBar" with anchor nav.
function TopBar({ activeId }) {
  const links = [
    { href: "#markets",    label: "Markets" },
    { href: "#map",        label: "Find us" },
    { href: "#in-season",  label: "In season" },
    { href: "#vendors",    label: "Vendors" },
    { href: "#about",      label: "About" },
  ];
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <a className="brand" href="#top" aria-label="OC's Best Farmers Markets, home">
          <span className="brand-mark"><LogoMark size={34} /></span>
          <span>OC's Best <span style={{ fontStyle: "normal", fontWeight: 400, opacity: 0.6 }}>—</span> Farmers Markets</span>
        </a>
        <nav className="nav">
          {links.map((l) => (
            <a key={l.href} href={l.href} className={activeId === l.href.slice(1) ? "is-active" : ""}>
              {l.label}
            </a>
          ))}
        </nav>
        <a href="#apply" className="nav-cta">Apply to vend</a>
      </div>
    </header>
  );
}

// Section header — eyebrow + huge italic title + lede
function SectionHead({ eyebrow, title, lede }) {
  return (
    <div className="section-head">
      <div>
        {eyebrow && <div className="eyebrow" style={{ marginBottom: 14 }}>{eyebrow}</div>}
        <h2 className="display">{title}</h2>
      </div>
      {lede && <p className="lede">{lede}</p>}
    </div>
  );
}

// Calendar icon — used inline in the hero
function CalIcon({ day }) {
  return (
    <svg width="46" height="46" viewBox="0 0 46 46" aria-hidden="true">
      <rect x="2" y="6" width="42" height="38" rx="4" fill="var(--paper)" stroke="var(--ink)" strokeWidth="1.2"/>
      <rect x="2" y="6" width="42" height="9" fill="var(--ink)"/>
      <text x="23" y="34" textAnchor="middle"
        fontFamily="Cormorant Garamond, serif" fontStyle="italic" fontWeight="600"
        fontSize="20" fill="var(--ink)">{day}</text>
    </svg>
  );
}

// Helper: get the next upcoming market based on real day-of-week.
// Returns { market, when: 'today'|'tomorrow'|'soon', daysUntil }
function getNextMarket() {
  const ms = window.MARKETS;
  const now = new Date();
  const dow = now.getDay(); // 0..6
  const hour = now.getHours();

  // sort markets by daysUntil from today, considering the market is "today"
  // only if it hasn't ended yet (treat 14:00 as cutoff)
  const todayIsActive = (m) => m.dayIdx === dow && hour < 14;

  let best = null;
  for (const m of ms) {
    let daysUntil = (m.dayIdx - dow + 7) % 7;
    // If today's market window has passed, push to next week
    if (m.dayIdx === dow && !todayIsActive(m)) daysUntil = 7;
    if (best === null || daysUntil < best.daysUntil) best = { market: m, daysUntil };
  }

  const when =
    best.daysUntil === 0 ? "today" :
    best.daysUntil === 1 ? "tomorrow" :
    "soon";

  return { ...best, when };
}

Object.assign(window, {
  LogoMark, TopBar, SectionHead, CalIcon, getNextMarket,
});