// AttireBoard — Pinterest-curated dress code inspiration board.
// The pins below are pulled from Audrey's "Black-tie" Pinterest board:
//   https://au.pinterest.com/audreyme04/black-tie/
// Hot-linked from i.pinimg.com/564x/ at retina-friendly resolution.
//
// Pins are split into a "female" tab (gowns, dresses) and a "male" tab
// (tuxedos, suits). Categorisation came from each pin's description plus
// Pinterest's auto-generated alt text. Pins without descriptive text were
// distributed by their position in the board (the male suits cluster in
// the latter half). If anything ends up in the wrong tab, edit the lists
// below and the masonry grid re-flows automatically.

function AttireBoard({ active, onBack }) {
  const [tab, setTab] = React.useState('female'); // 'female' | 'male'

  // ratio = imageHeight / imageWidth (used to size each masonry cell).
  const femalePins = [
    { src: 'https://i.pinimg.com/564x/cf/3c/82/cf3c8238b5ad5ec4d6a5402ee7442d6d.jpg', ratio: 1.78 },
    { src: 'https://i.pinimg.com/564x/68/b7/4d/68b74ddd50e91688a1fc5dcd1227262a.jpg', ratio: 1.78 },
    { src: 'https://i.pinimg.com/564x/a3/ad/7c/a3ad7c7d61ef78ab04a0a739ab4ec138.jpg', ratio: 1.78 },
    { src: 'https://i.pinimg.com/564x/af/fc/4e/affc4e3dcf941e30767b4f27fd4222a4.jpg', ratio: 1.62 },
    { src: 'https://i.pinimg.com/564x/d8/f7/6d/d8f76d869307463f34cd0b710e7d7773.jpg', ratio: 1.66 },
    { src: 'https://i.pinimg.com/564x/12/63/9c/12639c47aa6f7e863ec523c81436171c.jpg', ratio: 2.07 },
    { src: 'https://i.pinimg.com/564x/ae/f3/a5/aef3a508f9001e32e07d17664b56b104.jpg', ratio: 1.50 },
    { src: 'https://i.pinimg.com/564x/63/a1/91/63a1917f174301c1bac4d49677d50250.jpg', ratio: 1.33 },
    { src: 'https://i.pinimg.com/564x/86/21/59/862159fff7510d56789df268f953f285.jpg', ratio: 1.22 },
    { src: 'https://i.pinimg.com/564x/67/76/b1/6776b1fc199ac323820d8e25babf14e7.jpg', ratio: 1.49 },
    { src: 'https://i.pinimg.com/564x/db/3e/a6/db3ea612dec5cf3444fe1e6bad090301.jpg', ratio: 2.16 },
    { src: 'https://i.pinimg.com/564x/44/24/c4/4424c4c7580de0eaf832477a5152882a.jpg', ratio: 1.54 },
    { src: 'https://i.pinimg.com/564x/c3/78/2d/c3782d5611c068f51c5941ae1704fbff.jpg', ratio: 1.50 },
    { src: 'https://i.pinimg.com/564x/a5/15/da/a515da8dd6822643ec147c3f70adeec4.jpg', ratio: 1.22 },
    { src: 'https://i.pinimg.com/564x/36/45/18/364518dea9334d0a938faa368f6b8fab.jpg', ratio: 1.60 },
    { src: 'https://i.pinimg.com/564x/a7/a9/04/a7a9044614f7a1dbe26ffbd91b5b95bc.jpg', ratio: 2.65 },
    { src: 'https://i.pinimg.com/564x/8b/7d/2e/8b7d2eed848d0a85304f9fc716e6f340.jpg', ratio: 1.78 },
    { src: 'https://i.pinimg.com/564x/c2/09/0b/c2090baab051acf867bf64c64cadd868.jpg', ratio: 1.50 },
    { src: 'https://i.pinimg.com/564x/de/11/a4/de11a419b46da890afb27c2e853cd43d.jpg', ratio: 1.50 },
    { src: 'https://i.pinimg.com/564x/4a/68/19/4a68196b842bfdfccc7017adca92150e.jpg', ratio: 1.38 },
    { src: 'https://i.pinimg.com/564x/b2/8a/5a/b28a5a4b6f7b268b97e0e244d8c69d43.jpg', ratio: 1.50 },
    { src: 'https://i.pinimg.com/564x/a6/15/7c/a6157cb7c5e6f9a40082ea07479433cc.jpg', ratio: 1.63 },
    { src: 'https://i.pinimg.com/564x/cd/a3/87/cda3878f6f378cd3fed1c7485b530fce.jpg', ratio: 1.50 },
    { src: 'https://i.pinimg.com/564x/53/39/87/533987d2f720927a7633e59c82a40bf9.jpg', ratio: 1.50 },
    { src: 'https://i.pinimg.com/564x/90/b3/74/90b374b7e5d801140afec037c5101f6c.jpg', ratio: 2.04 },
    // Visually identified as women's attire from the Pinterest thumbnails.
    { src: 'https://i.pinimg.com/564x/ae/3f/eb/ae3feba84a41eb5a69faf5bf1dac0780.jpg', ratio: 1.74 }, // pale-blue chiffon dress + pearls
    { src: 'https://i.pinimg.com/564x/b0/c6/61/b0c66156b25b641614ad9ad6c83a0d45.jpg', ratio: 1.50 }, // orange ruffle gown + tote
    // Moved from male tab on user review (M3).
    { src: 'https://i.pinimg.com/564x/d1/3e/34/d13e343265340e93b34c9034e4746255.jpg', ratio: 1.78 },
  ];

  // Pins whose Pinterest description explicitly mentions male attire
  // (tuxedo, suit, groom, etc.) plus pins that were visually verified as
  // men's looks from the thumbnail grid.
  const malePins = [
    { src: 'https://i.pinimg.com/564x/83/c1/1d/83c11d19bddceb8d9b4d785c5bac9c6f.jpg', ratio: 1.25 }, // Peak Lapel Dinner Suit Jacket
    { src: 'https://i.pinimg.com/564x/4f/67/da/4f67dac027638550dcfcc64759be3008.jpg', ratio: 1.78 }, // collage of men in tuxedos
    { src: 'https://i.pinimg.com/564x/6c/8a/93/6c8a93c0b8b502093003b08b87edbd86.jpg', ratio: 1.78 }, // dress to impress men suits
    { src: 'https://i.pinimg.com/564x/75/6d/9f/756d9fac14c662bedaa52408f4382105.jpg', ratio: 1.25 }, // Ring Jacket
    { src: 'https://i.pinimg.com/564x/a5/a9/e8/a5a9e85b7cff05668cca4f5e39118ed4.jpg', ratio: 1.50 }, // Groom with best men
    { src: 'https://i.pinimg.com/564x/9d/9f/ec/9d9fec1b063cc700db5784caf62da5eb.jpg', ratio: 1.78 }, // man in tuxedo
    { src: 'https://i.pinimg.com/564x/48/8f/18/488f180b109cfd1faba32aed020ed877.jpg', ratio: 1.20 }, // Tuxedo Jacket Italian viscose-linen
    // Visually identified as men's attire from the thumbnail grid.
    { src: 'https://i.pinimg.com/564x/15/4b/9e/154b9ea45c437bcfa0c39b2ea6da0546.jpg', ratio: 1.54 }, // olive double-breasted suit
    { src: 'https://i.pinimg.com/564x/da/6e/8c/da6e8ca0cf4d605b50dc7608d0bc24fb.jpg', ratio: 1.50 }, // dark double-breasted with tie
    { src: 'https://i.pinimg.com/564x/29/09/42/29094294ed321601f512274523ea3026.jpg', ratio: 1.78 }, // tuxedo + bow tie + watch
    { src: 'https://i.pinimg.com/564x/80/9a/7a/809a7ad4a8fe85a28302160eeed7ceaf.jpg', ratio: 1.50 }, // black tuxedo on white backdrop
    // Couples — included as black-tie reference for the male tab.
    { src: 'https://i.pinimg.com/564x/19/9d/e8/199de8374af1d4e3e6152c085d1b1242.jpg', ratio: 1.50 }, // older couple, man in tux + woman in green
    { src: 'https://i.pinimg.com/564x/dd/ac/bc/ddacbcb74d45b4b2db5f15ca359f544e.jpg', ratio: 1.50 }, // groom in black tux + partner in navy
    // Moved from the female tab on user review (F0, F11, F13, F17, F19).
    { src: 'https://i.pinimg.com/564x/00/12/f5/0012f53edd8ad38c15cd4b6c0024bb4c.jpg', ratio: 1.79 },
    { src: 'https://i.pinimg.com/564x/dd/a3/9e/dda39e4ad0c80dd467ab766321c3976c.jpg', ratio: 1.76 },
    { src: 'https://i.pinimg.com/564x/e2/3f/4c/e23f4c5b6737431fe589f1913986b318.jpg', ratio: 1.50 },
  ];

  const pins = tab === 'female' ? femalePins : malePins;

  return (
    <div className={`attire-wrap ${active ? 'attire-active' : ''}`}>

      <div className="attire-head">
        <h1 className="attire-title">Attire</h1>
        <div className="attire-sub">Black Tie</div>
        <p className="attire-copy">
          Black tie is a formal dress code that reflects elegance and timeless style.
          Guests are encouraged to dress in refined evening wear.
        </p>
      </div>

      <div className="attire-divider"><span>Consideration</span></div>

      <p className="attire-copy">
        The bridesmaids will be wearing <strong>chocolate brown</strong> on the day.
      </p>

      <div className="attire-divider"><span>Inspiration</span></div>

      <div className="attire-tabs">
        <button className={`attire-tab ${tab === 'female' ? 'on' : ''}`} onClick={() => setTab('female')}>
          <span className="attire-tab-label">female</span>
        </button>
        <button className={`attire-tab ${tab === 'male' ? 'on' : ''}`} onClick={() => setTab('male')}>
          <span className="attire-tab-label">male</span>
        </button>
      </div>

      <div className="attire-intro">
        {tab === 'female' ? (
          <>For women, black tie attire calls for long evening dresses or gowns. Designs should be elegant and sophisticated, with minimal or understated patterns. We kindly ask guests to avoid bold, extreme, or overly busy prints, and instead opt for timeless silhouettes and refined fabrics.</>
        ) : (
          <>For men, this includes a well-fitted suit or tuxedo, ideally in black or dark tones. A bow tie is traditional, though a classic tie is also acceptable. A three-piece suit or tailored two-piece suit paired with a crisp white shirt and polished dress shoes completes the look.</>
        )}
      </div>

      <div className="attire-masonry" key={tab}>
        {pins.map((pin, i) => (
          <AttirePin key={pin.src} pin={pin} index={i} />
        ))}
      </div>

      <div className="attire-footer">
        <div className="attire-footer-mark">
          <img src="assets/Logos/A%26N-logo-small.png" alt="A & N" />
        </div>
        <div className="attire-footer-line">29 · 08 · 2026 · Audrey &amp; Nicholas</div>
      </div>
    </div>
  );
}

function AttirePin({ pin }) {
  return (
    <figure
      className="attire-pin"
      style={{ gridRowEnd: `span ${Math.round(20 * pin.ratio)}` }}
    >
      <div className="attire-pin-img">
        <img
          src={pin.src}
          alt=""
          loading="lazy"
          /* `pin.focus` lets us shift the crop on a per-image basis when the
             default centred crop hides the subject we care about. */
          style={pin.focus ? { objectPosition: pin.focus } : undefined}
        />
      </div>
    </figure>
  );
}

window.AttireBoard = AttireBoard;