/* Bloom Acoustic — site components */

const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header className={"site-header" + (scrolled ? " scrolled" : "")}>
      <a className="brand-logo" href="#top" aria-label="bloom acoustic">
        <img src="assets/bloom4.svg" alt="bloom acoustic" />
      </a>

      <nav className="nav-center" aria-label="hoofdmenu">
        <a href="#over">Over ons</a>
        <a href="#muziek">Muziek</a>
        <a href="#duo">Duo</a>
        <a href="#contact">Contact</a>
      </nav>

      <a className="boek-btn" href="#contact" aria-label="Even kennismaken?">
        <span className="stack">
          <span>Even kennismaken?</span>
          <span>Vrijblijvende belafspraak</span>
        </span>
        <span className="arrow" aria-hidden="true">→</span>
      </a>
    </header>);

};

/* Sticky bottom-left rotating "boek bloom nu" badge */
const BoekSpin = () => {
  const [rot, setRot] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => {
      // rotation = scroll-based, 1 deg per ~3px scrolled
      setRot(window.scrollY * 0.35);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <a className="boek-spin" href="#contact" aria-label="Boek bloom nu">
      <div className="ring" style={{ transform: `rotate(${rot}deg)` }}>
        <img src="assets/boek-ons-nu.svg" alt="" />
      </div>
    </a>);

};

/* Animated word-by-word headline */
const AnimWord = ({ children, delay = 0 }) =>
<span className="word">
    <span style={{ animationDelay: `${delay}ms` }}>{children}</span>
  </span>;


const Hero = ({ tweaks }) =>
<section className="hero" id="top">
    <div className="hero-bg">
      <div className="hero-photo-wrap" data-parallax="0.18">
        <img src="assets/team.jpg" alt="Liza en Timo, Bloom Acoustic" />
      </div>
    </div>

    <div className="container hero-inner">
      <span className="hero-eyebrow">
        <span className="pulse" aria-hidden="true"></span>
        Boekingen open · vanaf september 2026
      </span>

      <h1 style={{
        textAlign: tweaks?.h1Align || 'left',
        fontSize: tweaks?.h1Size ? `${tweaks.h1Size}px` : undefined,
        lineHeight: tweaks?.h1LineHeight ?? undefined,
        letterSpacing: tweaks?.h1LetterSpacing != null ? `${tweaks.h1LetterSpacing}em` : undefined,
        maxWidth: tweaks?.h1MaxWidth ? `${tweaks.h1MaxWidth}ch` : undefined,
      }}>
        <AnimWord delay={0}>Laat&nbsp;</AnimWord>
        <AnimWord delay={80}><em>jullie&nbsp;</em></AnimWord>
        <AnimWord delay={160}><em>ceremonie</em></AnimWord>
        <br />
        <AnimWord delay={240}>tot bloei komen</AnimWord>
        <br />
        <span style={{ fontSize: '0.40em', display: 'block', marginTop: '0.25em' }}>
          <AnimWord delay={320}>— live muziek voor&nbsp;</AnimWord>
          <br />
          <AnimWord delay={400}>bruiloften in Noord-Nederland.</AnimWord>
        </span>
      </h1>

      <p className="lead">
        Hét akoestische bruiloftsduo van Noord-Nederland.
        Liza &amp; Timo vertalen jullie favoriete nummers naar een akoestische
        setting die raakt — geen harde muziek waar je overheen moet schreeuwen,
        maar live muziek die de liefde versterkt.
      </p>

      <div className="hero-meta">
        <span className="label">Te boeken in</span>
        <span><span className="dot"></span> Noord- en Midden Nederland</span>
      </div>
    </div>

    <div className="scroll-cue" aria-hidden="true">
      <span>Scroll</span>
      <span className="line"></span>
    </div>
  </section>;


const Marquee = () => {
  const items = [
  "intiem", "puur", "akoestisch", "live", "kippenvel",
  "huiskamer", "ceremonie", "borrel", "samen", "bloei"];

  // duplicate for seamless loop
  const loop = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {loop.map((it, i) =>
        <React.Fragment key={i}>
            <span>{it}</span>
            <span className="sep">
              <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
                <path d="M50 8 C 58 30 70 42 92 50 C 70 58 58 70 50 92 C 42 70 30 58 8 50 C 30 42 42 30 50 8 Z" />
              </svg>
            </span>
          </React.Fragment>
        )}
      </div>
    </div>);

};

const Intro = () =>
<section className="intro" id="over">
    <div className="container">
      <div className="intro-grid">
        <div className="reveal">
          <span className="eyebrow">Wij zijn Bloom</span>
          <h2>Gaan jullie trouwen in het prachtige <em>Noorden?</em></h2>
          <div className="intro-copy">
            <p>
              Wij zijn Bloom Acoustic — Liza &amp; Timo — een akoestisch duo
              dat gespecialiseerd is in het omlijsten van de meest bijzondere
              momenten van jullie bruiloft.
            </p>
            <p>
              Van een kippenvelmoment tijdens de ceremonie tot een relaxte,
              warme sfeer tijdens de proost of de borrel: wij vertalen jullie
              favoriete nummers naar een akoestische setting die raakt.
            </p>
          </div>
        </div>
        <div className="intro-photo reveal delay-1">
          <img src="assets/team.jpg" alt="Liza en Timo samen" />
          <span className="tag">Liza &amp; Timo</span>
        </div>
      </div>
    </div>
  </section>;


const Values = () =>
<section className="values" id="muziek">
    <div className="container">
      <span className="eyebrow reveal">Waarom Bloom Acoustic</span>
      <h2 className="reveal delay-1">
        Wij de muziek, <em>jullie de liefde.</em>
      </h2>
      <div className="value-stack">
        <div className="value-row reveal">
          <span className="num">01</span>
          <h3>Persoonlijk</h3>
          <p>We denken graag mee over de setlist en studeren met liefde jullie 'special song' in.</p>
          <span className="arrow" aria-hidden="true">→</span>
        </div>
        <div className="value-row reveal delay-1">
          <span className="num">02</span>
          <h3>Lokaal</h3>
          <p>Gevestigd in Noord-Nederland, bekend met de mooiste locaties in Groningen, Friesland en Drenthe.</p>
          <span className="arrow" aria-hidden="true">→</span>
        </div>
        <div className="value-row reveal delay-2">
          <span className="num">03</span>
          <h3>Compact</h3>
          <p>Met enkel een gitaar en zang nemen we weinig ruimte in beslag, maar vullen we de ruimte met sfeer.</p>
          <span className="arrow" aria-hidden="true">→</span>
        </div>
      </div>
    </div>
  </section>;


const Duo = () =>
<section className="duo" id="duo">
    <div className="container">
      <div className="heading">
        <div className="reveal">
          <span className="eyebrow">Achter de muziek</span>
          <h2>Liza &amp; <em>Timo</em></h2>
        </div>
        <p className="duo-intro reveal delay-1">
          "Wij vonden elkaar online en na één keer repeteren wisten we:
          dit klopt."
        </p>
      </div>
      <div className="duo-grid">
        <article className="member reveal">
          <div className="member-photo">
            <img src="assets/liza.jpg" alt="Liza op het podium" />
            <span className="badge"><span className="dot"></span>De stem</span>
          </div>
          <div>
            <h3>Liza <small>— zang</small></h3>
            <p>
              Voor Liza begon het op jonge leeftijd; meezingend met
              'Wêr Bisto' met een (toen nog veel te grote) gitaar op schoot.
              Wat begon met huiskamerconcerten en het winnen van zangwedstrijden,
              groeide uit tot optredens voor groot publiek en duetten met
              artiesten als Iris Kroes.
            </p>
          </div>
        </article>

        <article className="member offset reveal delay-1">
          <div className="member-photo">
            <img src="assets/timo.jpg" alt="Timo met gitaar" />
            <span className="badge"><span className="dot"></span>De snaren</span>
          </div>
          <div>
            <h3>Timo <small>— gitaar</small></h3>
            <p>
              Timo staat al sinds zijn zesde met een gitaar in zijn handen.
              Hoewel hij klassiek is opgeleid, heeft hij de bladmuziek allang
              ingeruild voor gevoel en improvisatie. Voor Timo is muziek maken
              de ultieme manier om 'uit te zoomen' en de wereld op pauze te zetten.
            </p>
          </div>
        </article>
      </div>
    </div>
  </section>;


const Philosophy = () =>
<section className="philosophy">
    <div className="container">
      <span className="eyebrow reveal">Waarom we doen wat we doen</span>
      <blockquote className="reveal delay-1">
        Er is niets mooiers dan dat <em>ene liedje</em> dat precies vertelt
        hoe jullie je voelen.
      </blockquote>
      <div className="attribution reveal delay-2">
        Bloom Acoustic — Liza &amp; Timo
      </div>
    </div>
    <div className="mark-watermark" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210.52 233.68">
        <path d="M119.89,68.98c28.12-91.97-57.38-91.97-29.26,0C62.51-22.99-6.66,30.42,66.95,87.26c-73.61-56.84-100.03,29.58-9.04,29.58-90.99,0-64.57,86.42,9.04,29.58-73.61,56.84-4.44,110.25,23.68,18.28-28.12,91.97,57.38,91.97,29.26,0,28.12,91.97,97.28,38.56,23.68-18.28,73.61,56.84,100.03-29.58,9.04-29.58,90.99,0,64.57-86.42-9.04-29.58,73.61-56.84,4.44-110.25-23.68-18.28Z"/>
      </svg>
    </div>
  </section>;


const toSlug = (title) =>
  title.toLowerCase()
    .replace(/[ê]/g, 'e')
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-|-$/g, '');

const Setlist = () => {
  const [playing, setPlaying] = React.useState(null);
  const audioRef = React.useRef(null);
  const timerRef = React.useRef(null);

  const songs = [
    ["Iris", "Goo Goo Dolls"],
    ["Make You Feel My Love", "Adele"],
    ["Perfect", "Ed Sheeran"],
    ["Better Together", "Jack Johnson"],
    ["Can't Help Falling In Love", "Elvis"],
    ["Wêr Bisto", "Twarres"],
    ["The Night We Met", "Lord Huron"],
    ["Halo", "Beyoncé"],
    ["Ho Hey", "The Lumineers"],
    ["Skinny Love", "Bon Iver"],
    ["Hallelujah", "Leonard Cohen"],
    ["Lover", "Taylor Swift"],
    ["First Day Of My Life", "Bright Eyes"],
    ["Fix You", "Coldplay"],
    ["+ jullie special song", null],
  ];

  const stop = () => {
    if (audioRef.current) { audioRef.current.pause(); audioRef.current.currentTime = 0; }
    clearTimeout(timerRef.current);
    setPlaying(null);
  };

  const toggle = (slug) => {
    if (playing === slug) { stop(); return; }
    stop();
    const audio = new Audio(`audio/${slug}.mp3`);
    audioRef.current = audio;
    audio.play().catch(() => {});
    setPlaying(slug);
    timerRef.current = setTimeout(stop, 15000);
    audio.addEventListener('ended', stop);
  };

  React.useEffect(() => () => stop(), []);

  return (
    <section className="setlist">
      <div className="container">
        <span className="eyebrow reveal">Setlist</span>
        <h2 className="reveal delay-1">
          Een greep uit onze <em>akoestische</em> versies.
        </h2>
        <p className="lead reveal delay-2">
          Hebben jullie een nummer dat speciaal voor jullie is? We studeren
          'm met liefde voor jullie in. Stuur ons gewoon de Spotify-link.
        </p>
        <div className="chip-row reveal delay-3">
          {songs.map(([title, artist], i) => {
            const slug = artist ? toSlug(title) : null;
            const isPlaying = slug && playing === slug;
            return (
              <span
                className={"chip" + (isPlaying ? " chip--playing" : "")}
                key={i}
                onClick={slug ? () => toggle(slug) : undefined}
                style={slug ? { cursor: 'pointer' } : {}}
              >
                {slug && (
                  <span className="chip-play" aria-label={isPlaying ? "Stop" : "Speel fragment"}>
                    {isPlaying
                      ? <span className="chip-bars"><i/><i/><i/></span>
                      : <svg viewBox="0 0 10 12" width="10" height="12" fill="currentColor"><path d="M1 1l8 5-8 5V1z"/></svg>
                    }
                  </span>
                )}
                {title}
                {artist && <span className="by">— {artist}</span>}
              </span>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const FORMSPREE_ID = 'xlgaggpq';

const Contact = () => {
  const [status, setStatus] = React.useState('idle'); // idle | submitting | success | error

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('submitting');
    const data = new FormData(e.currentTarget);
    try {
      const res = await fetch(`https://formspree.io/f/${FORMSPREE_ID}`, {
        method: 'POST',
        body: data,
        headers: { Accept: 'application/json' },
      });
      setStatus(res.ok ? 'success' : 'error');
    } catch {
      setStatus('error');
    }
  };

  if (status === 'success') {
    return (
      <section className="contact" id="contact">
        <div className="container">
          <div className="contact-success reveal">
            <span className="eyebrow">Verstuurd 🤍</span>
            <h2>We komen er snel op terug!</h2>
            <p className="lead">Meestal binnen 24 uur. Tot snel!</p>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="contact" id="contact">
      <div className="container">
        <span className="eyebrow reveal">Zullen we kennismaken?</span>
        <h2 className="reveal delay-1">
          Stuur ons een <em>berichtje</em> 🤍
        </h2>
        <p className="lead reveal delay-2">
          Muziek is heel persoonlijk. Daarom hebben we eerst graag even contact
          voor we een boeking definitief maken — zodat we zeker weten dat de
          sfeer die wij neerzetten, precies is wat jullie voor ogen hebben.
        </p>
        <div className="contact-grid">
          <form className="contact-form reveal" onSubmit={handleSubmit}>
            <label>
              Jullie namen
              <input name="namen" type="text" placeholder="Eva &amp; Jasper" required />
            </label>
            <div className="row2">
              <label>
                Datum
                <input name="datum" type="text" placeholder="12 juni 2027" />
              </label>
              <label>
                Locatie
                <input name="locatie" type="text" placeholder="Landgoed Nienoord, Leek" />
              </label>
            </div>
            <label>
              E-mail
              <input name="email" type="email" placeholder="hallo@voorbeeld.nl" required />
            </label>
            <label>
              Vertel ons over jullie dag
              <textarea name="bericht" placeholder="Wij dromen van een intieme ceremonie, met aansluitend een borrel in de tuin..."></textarea>
            </label>
            {status === 'error' && (
              <p style={{ color: 'var(--bloom-red)', fontSize: 14 }}>
                Er ging iets mis. Probeer opnieuw of mail ons direct.
              </p>
            )}
            <button className="submit" type="submit" disabled={status === 'submitting'}>
              <span>{status === 'submitting' ? 'Versturen...' : 'Stuur ons een berichtje'}</span>
              <span aria-hidden="true">→</span>
            </button>
          </form>

          <aside className="contact-side">
            <div className="info-block reveal delay-1">
              <div className="key">Mail</div>
              <div className="val">hallo@<em>bloomacoustic</em>.nl</div>
            </div>
            <div className="info-block reveal delay-2">
              <div className="key">Telefoon</div>
              <div className="val">+31 6 12 34 56 78</div>
            </div>
            <div className="info-block reveal delay-3">
              <div className="key">Reactietijd</div>
              <div className="val">Meestal binnen <em>24 uur</em></div>
            </div>
            <div className="info-block reveal delay-3">
              <div className="key">Volg</div>
              <div className="val" style={{ fontSize: 18, fontFamily: 'var(--font-sans)' }}>
                Instagram · TikTok · Spotify
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>);

};

const Footer = () =>
<footer className="site-footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <a className="brand-logo" href="#top" aria-label="bloom acoustic">
            <img src="assets/bloom4.svg" alt="bloom acoustic" />
          </a>
          <p>
            Akoestisch bruiloftsduo · Noord-Nederland.
            Breng jouw bruiloft tot bloei.
          </p>
        </div>
        <div className="footer-col">
          <h4>Menu</h4>
          <ul>
            <li><a href="#over">Over ons</a></li>
            <li><a href="#muziek">Muziek</a></li>
            <li><a href="#duo">Duo</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Contact</h4>
          <ul>
            <li><a href="mailto:hallo@bloomacoustic.nl">hallo@bloomacoustic.nl</a></li>
            <li><a href="tel:+31612345678">+31 6 12 34 56 78</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Volg</h4>
          <ul>
            <li><a href="#">Instagram</a></li>
            <li><a href="#">TikTok</a></li>
            <li><a href="#">Spotify</a></li>
          </ul>
        </div>
      </div>

      <div className="footer-mega">bloom <em>acoustic</em></div>

      <div className="footer-bottom">
        <span>© 2026 Bloom Acoustic — KvK 87654321</span>
        <span>Met <em>liefde</em> in Noord-Nederland</span>
      </div>
    </div>
  </footer>;


Object.assign(window, {
  Header, BoekSpin, Hero, Marquee, Intro, Values, Duo, Philosophy, Setlist, Contact, Footer
});