// Cedar Hills · Couples' Template Library · landing page
// Shows the 3 style collections. One is ready, two are coming soon.

const COLLECTIONS = [
  {
    id: 'editorial',
    no: '01',
    name: 'Editorial',
    descriptor: 'Quiet · Modern · Type-led',
    description: 'Quiet typography, generous margins, small touches of italic. Wears well in any wedding palette.',
    pieces: 'Welcome · Bar · Seating · Cards & Gifts · Unplugged · In Loving Memory · Table Numbers · Photo Album',
    href: 'Editorial.html',
    status: 'ready',
  },
  {
    id: 'heirloom',
    no: '02',
    name: 'Heirloom',
    descriptor: 'Classic · Arched · Monogrammed',
    description: 'Arched frames, formal italic, traditional ornaments. For weddings that lean classic and timeless.',
    pieces: 'Welcome · Bar · Seating · Cards & Gifts · Unplugged · In Loving Memory · Table Numbers · Photo Album',
    href: 'Heirloom.html',
    status: 'ready',
  },
  {
    id: 'almanac',
    no: '03',
    name: 'Almanac',
    descriptor: 'Editorial · Stacked · Layered',
    description: 'Stacked display type, header rails, magazine-cover energy. Modern with a sense of occasion.',
    pieces: 'Welcome · Bar · Seating · Cards & Gifts · Unplugged · In Loving Memory · Table Numbers · Photo Album',
    href: 'Almanac.html',
    status: 'ready',
  },
  {
    id: 'meadow',
    no: '04',
    name: 'Meadow',
    descriptor: 'Garden · Modern · Restful',
    description: 'Tracked serif uppercase with a delicate script ‘and’ between names. Generous breathing room.',
    pieces: 'Welcome · Bar · Seating · Cards & Gifts · Unplugged · In Loving Memory · Table Numbers · Photo Album',
    href: 'Meadow.html',
    status: 'ready',
  },
  {
    id: 'lyric',
    no: '05',
    name: 'Lyric',
    descriptor: 'Minimal · Script · Gallery',
    description: 'An oversized flowing script as the hero, tracked sans support, calm negative space. The most contemporary look.',
    pieces: 'Welcome · Bar · Seating · Cards & Gifts · Unplugged · In Loving Memory · Table Numbers · Photo Album',
    href: 'Lyric.html',
    status: 'ready',
  },
  {
    id: 'harbor',
    no: '06',
    name: 'Harbor',
    descriptor: 'Coastal · Formal · Bordered',
    description: 'A thin double-line frame, copperplate script for the names, a quiet italic flourish at the bottom. Coastal preppy.',
    pieces: 'Welcome · Bar · Seating · Cards & Gifts · Unplugged · In Loving Memory · Table Numbers · Photo Album',
    href: 'Harbor.html',
    status: 'ready',
  },
];

// ─────────── Mini sign previews — actual welcome sign, scaled ───────────
// Each collection's welcome sign component is loaded into
// window.CollectionWelcomes by its signs-*.jsx file. We render it at full
// design size (540×720) and let CSS transform-scale (driven by a container
// query) fit it to the card preview area — so the preview is identical to
// what couples see when they open the collection.
function CollectionWelcomeMini({ id }) {
  const Component = window.CollectionWelcomes?.[id];
  const palette = window.PALETTES?.neutral;
  if (!Component || !palette) {
    return <div className="mini mini--loading">Loading preview&hellip;</div>;
  }
  return (
    <div className="mini-actual">
      <Component p={palette} w={540} h={720} />
    </div>
  );
}

function CollectionCard({ c }) {
  const isReady = c.status === 'ready';

  const body = (
    <article className={`cx-card ${isReady ? 'is-ready' : 'is-coming'}`}>
      <div className="cx-card__preview">
        <CollectionWelcomeMini id={c.id} />
        {!isReady && <span className="cx-card__badge">Coming soon</span>}
      </div>
      <div className="cx-card__meta">
        <div className="cx-card__no">No. {c.no}</div>
        <h3 className="cx-card__name">{c.name}</h3>
        <div className="cx-card__descriptor">{c.descriptor}</div>
        <p className="cx-card__desc">{c.description}</p>
        <div className="cx-card__pieces">{c.pieces}</div>
        {isReady
          ? <div className="cx-card__cta">Explore the kit &rarr;</div>
          : <div className="cx-card__cta cx-card__cta--muted">In the studio</div>}
      </div>
    </article>
  );

  return isReady
    ? <a href={c.href} className="cx-card-link">{body}</a>
    : <div className="cx-card-link is-disabled">{body}</div>;
}

function App() {
  const [bandOpen, setBandOpen] = React.useState(false);
  const [navOpen, setNavOpen] = React.useState(false);
  const headerRef = React.useRef(null);

  React.useEffect(() => {
    function handleKey(e) {
      if (e.key === 'Escape') { setBandOpen(false); setNavOpen(false); }
    }
    document.addEventListener('keydown', handleKey);
    return () => document.removeEventListener('keydown', handleKey);
  }, []);

  React.useEffect(() => {
    function handleClick(e) {
      if (headerRef.current && !headerRef.current.contains(e.target)) setBandOpen(false);
    }
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, []);

  return (
    <div className="cx-page">
      {/* NAV */}
      <header className="tmpl-nav" ref={headerRef}>
        <a href="/" className="tmpl-nav__logo" aria-label="Cedar Hills Farm — Home">
          <img src="../photos/logo.png" alt="Cedar Hills Farm" />
        </a>
        <nav className="tmpl-nav__links">
          <a href="/whats-included" className="tmpl-nav__link">The Details</a>
          <a href="/pricing" className="tmpl-nav__link">Pricing</a>
          <a href="/availability" className="tmpl-nav__link">Availability</a>
          <a href="/gallery" className="tmpl-nav__link">Gallery</a>
          <a href="/faq" className="tmpl-nav__link">FAQ</a>
          <a href="/contact" className="tmpl-nav__link">Inquire</a>
          <button
            className={`tmpl-nav__link tmpl-couples-trigger${bandOpen ? ' tmpl-couples-trigger--open' : ''} tmpl-nav__link--active`}
            aria-expanded={bandOpen}
            onClick={() => setBandOpen(v => !v)}
          >
            For Couples
            <span className="tmpl-couples-trigger__chevron" aria-hidden="true" />
          </button>
        </nav>

        {/* Hamburger — mobile only */}
        <button className="tmpl-nav__hamburger" aria-label="Open menu" onClick={() => setNavOpen(true)}>
          <span /><span /><span />
        </button>

        <div className={`tmpl-band${bandOpen ? ' tmpl-band--open' : ''}`} role="menu">
          <div className="tmpl-band__inner">
            <a href="/plan-your-layout" className="tmpl-band__item" role="menuitem" onClick={() => setBandOpen(false)}>
              <span className="tmpl-band__num">01</span>
              <span className="tmpl-band__label">Layout Planner</span>
              <span className="tmpl-band__desc">Design your reception floor plan</span>
            </a>
            <a href="/album" className="tmpl-band__item" role="menuitem" onClick={() => setBandOpen(false)}>
              <span className="tmpl-band__num">02</span>
              <span className="tmpl-band__label">Wedding Album</span>
              <span className="tmpl-band__desc">View &amp; download your photos</span>
            </a>
            <a href="index.html" className="tmpl-band__item" role="menuitem" onClick={() => setBandOpen(false)}>
              <span className="tmpl-band__num">03</span>
              <span className="tmpl-band__label">Template Library</span>
              <span className="tmpl-band__desc">Day-of signage, yours to customize</span>
            </a>
          </div>
        </div>
      </header>

      {/* Mobile overlay */}
      {navOpen && (
        <div className="tmpl-mobile-overlay">
          <button className="tmpl-mobile-overlay__close" onClick={() => setNavOpen(false)} aria-label="Close menu">×</button>
          <a href="/whats-included" className="tmpl-mobile-overlay__link">The Details</a>
          <a href="/pricing" className="tmpl-mobile-overlay__link">Pricing</a>
          <a href="/availability" className="tmpl-mobile-overlay__link">Availability</a>
          <a href="/gallery" className="tmpl-mobile-overlay__link">Gallery</a>
          <a href="/faq" className="tmpl-mobile-overlay__link">FAQ</a>
          <a href="/contact" className="tmpl-mobile-overlay__link">Inquire</a>
          <div className="tmpl-mobile-overlay__cta">
            <a href="/contact" className="tmpl-mobile-overlay__btn">Schedule a Tour</a>
          </div>
          <div className="tmpl-mobile-overlay__group">
            <span className="tmpl-mobile-overlay__group-label">For Couples</span>
            <a href="/plan-your-layout" className="tmpl-mobile-overlay__sub">Layout Planner</a>
            <a href="/album" className="tmpl-mobile-overlay__sub">Wedding Album</a>
            <a href="index.html" className="tmpl-mobile-overlay__sub">Template Library</a>
          </div>
        </div>
      )}

      {/* HERO */}
      <header className="cx-hero">
        <div className="cx-hero__eyebrow">A SMALL GIFT FOR OUR COUPLES</div>
        <h1 className="cx-hero__title">Templates, <em>on us.</em></h1>
        <p className="cx-hero__lede">
          We made these for couples getting married with us. Pick a collection that fits your style, customize the details right in your browser, then print at home or send the PDFs to a print shop. <em>No accounts. No fees. No Etsy.</em>
        </p>
        <div className="cx-hero__how">
          <div className="cx-hero__step">
            <span className="cx-hero__num">01</span>
            <div>
              <strong>Pick a collection</strong>
              <span>Three styles below. More on the way.</span>
            </div>
          </div>
          <div className="cx-hero__step">
            <span className="cx-hero__num">02</span>
            <div>
              <strong>Type in your details</strong>
              <span>Click any text on a sign to edit it.</span>
            </div>
          </div>
          <div className="cx-hero__step">
            <span className="cx-hero__num">03</span>
            <div>
              <strong>Save as PDF &amp; print</strong>
              <span>Home, Staples, FedEx, framed online.</span>
            </div>
          </div>
        </div>
      </header>

      {/* COLLECTIONS */}
      <section className="cx-collections">
        <div className="cx-collections__head">
          <span className="cx-eyebrow">— THE COLLECTIONS —</span>
          <h2>Six styles. <em>Pick yours.</em></h2>
          <p>Each collection includes eight day-of signs: <em>welcome, bar, seating chart, cards &amp; gifts, unplugged ceremony, in loving memory, table numbers,</em> and a <em>photo album QR</em> for guests to share their photos. Save-the-dates, programs, and more on the way.</p>
        </div>
        <div className="cx-collections__grid">
          {COLLECTIONS.map((c) => <CollectionCard key={c.id} c={c} />)}
        </div>
      </section>

      {/* OUTRO */}
      <footer className="cx-foot">
        <div className="cx-foot__inner">
          <div className="cx-foot__eyebrow">— WITH LOVE —</div>
          <p>If you'd like a piece we haven't made yet, or a palette beyond the six we offer, <a href="/contact">just ask</a>. We add to this library based on what couples actually need.</p>
          <div className="cx-foot__sig">Cedar Hills Farm</div>
        </div>
      </footer>

      {/* SITE FOOTER */}
      <footer className="tmpl-site-footer">
        <div className="tmpl-site-footer__meta">
          Cedar Hills Farm &nbsp;&middot;&nbsp;
          <a href="https://maps.google.com/?q=10152+Denali+Trail+Soddy+Daisy+TN+37379" target="_blank" rel="noopener noreferrer" className="tmpl-site-footer__link">
            10152 Denali Trail, Soddy Daisy, TN 37379
          </a>
          &nbsp;&middot;&nbsp;
          <a href="tel:+14237586316" className="tmpl-site-footer__link">423&#8209;758&#8209;6316</a>
        </div>
      </footer>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);