/* global React, Nav, Footer, setupReveals, pageBase */
const { useState: useStateP, useEffect: useEffectP, useMemo } = React;

function PageHero({ eyebrow, title, sub, crumbs, mood = 'warm', images }) {
  const base = pageBase();
  const [current, setCurrent] = useStateP(0);

  useEffectP(() => {
    if (!images || images.length <= 1) return;
    const id = setInterval(() => setCurrent(c => (c + 1) % images.length), 5500);
    return () => clearInterval(id);
  }, [images]);

  return (
    <section className="page-hero" data-mood={mood}>
      <div className="hero-media">
        <div className="hero-grain"></div>
        {(images || []).map((src, i) => (
          <img key={src} className={'hero-slide' + (i === current ? ' active' : '')} src={src} alt="" loading={i === 0 ? 'eager' : 'lazy'} />
        ))}
      </div>
      <div className="hero-inner">
        <nav className="crumbs">
          <a href={base + 'index.html'}>Home</a>
          <span>/</span>
          {(crumbs || []).map((c, i) => (
            <React.Fragment key={i}>
              {c.href ? <a href={c.href}>{c.label}</a> : <span>{c.label}</span>}
              {i < crumbs.length - 1 && <span>/</span>}
            </React.Fragment>
          ))}
        </nav>
        <div className="hero-eyebrow"><span className="bar"></span>{eyebrow}</div>
        <h1 dangerouslySetInnerHTML={{ __html: title }} />
        {sub && <p className="sub">{sub}</p>}
      </div>
    </section>
  );
}

function SplitBlock({ eyebrow, title, paragraphs, lead, reverse, photoVariant = 'a', photoTag, checklist, imageSrc }) {
  return (
    <section>
      <div className="container">
        <div className={'split-block' + (reverse ? ' reverse' : '')}>
          <div className="copy reveal">
            {eyebrow && <span className="eyebrow">{eyebrow}</span>}
            {title && <h2 className="section-title">{title}</h2>}
            {lead && <p className="lead">{lead}</p>}
            {(paragraphs || []).map((p, i) => <p key={i}>{p}</p>)}
            {checklist && (
              <ul className="checklist">
                {checklist.map((c, i) => <li key={i}>{c}</li>)}
              </ul>
            )}
          </div>
          <div className="img reveal" style={{ transitionDelay: '120ms' }}>
            <div className={'ph variant-' + photoVariant}>
              {imageSrc && <img className="ph-img" src={imageSrc} alt="" loading="lazy" />}
              {!imageSrc && photoTag && <span className="ph-tag">{photoTag}</span>}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatRow({ items }) {
  return (
    <section className="tight">
      <div className="stat-row">
        {items.map((it, i) => (
          <div className="cell" key={i}>
            <div className="num">{it.num}</div>
            <div className="lab">{it.lab}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

const G_SHAPES = ['s-tall', 's-portrait', 's-square', 's-landscape', 's-portrait', 's-pano', 's-tall', 's-square', 's-portrait', 's-landscape', 's-tall', 's-portrait'];
const G_VARS = ['a','b','c','d','e','a','b','c','d','e','a','b'];

function Gallery({ eyebrow, title, sub, count = 12, tag = 'placeholder', images }) {
  const total = images ? images.length : count;
  return (
    <section className="cream">
      <div className="container">
        <div className="section-head-c reveal">
          {eyebrow && <span className="eyebrow">{eyebrow}</span>}
          {title && <h2 className="section-title">{title}</h2>}
          {sub && <p>{sub}</p>}
        </div>
        <div className="gallery-masonry reveal-stagger">
          {Array.from({ length: total }, (_, i) => (
            <div className={'item ' + G_SHAPES[i % G_SHAPES.length]} key={i}>
              <div className={'ph variant-' + G_VARS[i % G_VARS.length]}>
                {images && images[i]
                  ? <img className="ph-img" src={images[i]} alt="" loading="lazy" />
                  : <span className="ph-tag">{tag} · {String(i + 1).padStart(2, '0')}</span>
                }
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process({ eyebrow, title, steps }) {
  return (
    <section>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 8 }}>
          {eyebrow && <span className="eyebrow">{eyebrow}</span>}
          {title && <h2 className="section-title">{title}</h2>}
        </div>
        <div className="process reveal-stagger">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="n">Step {String(i + 1).padStart(2, '0')}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Packages({ eyebrow, title, sub, items, featuredIndex = 1, note }) {
  return (
    <section className="cream">
      <div className="container">
        <div className="section-head-c reveal">
          {eyebrow && <span className="eyebrow">{eyebrow}</span>}
          {title && <h2 className="section-title">{title}</h2>}
          {sub && <p>{sub}</p>}
        </div>
        <div className="packages reveal-stagger">
          {items.map((p, i) => (
            <div className={'pkg' + (i === featuredIndex ? ' featured' : '')} key={p.name}>
              {i === featuredIndex && <span className="tag">Most chosen</span>}
              <h3>{p.name}</h3>
              <div className="price">${p.price}<small> {p.unit || 'AUD'}</small></div>
              <ul>{p.items.map((it, j) => <li key={j}>{it}</li>)}</ul>
              <a href="#enquire" className="btn">Enquire <span className="arr">→</span></a>
            </div>
          ))}
        </div>
        {note && <p style={{ textAlign: 'center', marginTop: 36, color: 'var(--charcoal)', fontSize: 14 }}>{note}</p>}
      </div>
    </section>
  );
}

function PackagesGrid({ eyebrow, title, sub, items, note }) {
  return (
    <section className="cream">
      <div className="container">
        <div className="section-head-c reveal">
          {eyebrow && <span className="eyebrow">{eyebrow}</span>}
          {title && <h2 className="section-title">{title}</h2>}
          {sub && <p>{sub}</p>}
        </div>
        <div className="pkg-grid reveal-stagger">
          {items.map((p) => (
            <div className="pkg-card" key={p.name}>
              <div className="pkg-card-photo">
                {p.image && <img src={p.image} alt="" loading="lazy" />}
              </div>
              <div className="pkg-card-body">
                <div className="pkg-meta">{p.duration} · {p.photos} photos</div>
                <h3>{p.name}</h3>
                <div className="price">${p.price}<small> Inc. GST</small></div>
                <p className="pkg-best">Best for: {p.bestFor}</p>
                <a href="#enquire" className="btn">Enquire <span className="arr">→</span></a>
              </div>
            </div>
          ))}
        </div>
        {note && <p style={{ textAlign: 'center', marginTop: 36, color: 'var(--charcoal)', fontSize: 14 }}>{note}</p>}
      </div>
    </section>
  );
}

function Quote({ quote, name, where, loyalty }) {
  return (
    <section>
      <div className="container">
        <div className="quote-block reveal">
          <div className="mark">"</div>
          <blockquote>{quote}</blockquote>
          <div className="who">
            <strong>{name}</strong>
            {where}{loyalty ? ' · ' + loyalty : ''}
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactForm({ variant = 'personal', eyebrow, title, sub }) {
  const [sent, setSent] = useStateP(false);

  const personalFields = [
    { id: 'name', label: 'Your name', type: 'text', required: true },
    { id: 'email', label: 'Email', type: 'email', required: true },
    { id: 'phone', label: 'Phone', type: 'tel' },
    { id: 'session', label: 'Session type', type: 'select', options: ['Maternity', 'Newborn', 'Families', 'Couples & Engagements', 'Weddings & Elopements', 'Not sure yet'] },
    { id: 'date', label: 'Preferred date', type: 'date' },
    { id: 'found', label: 'How did you find me?', type: 'text' },
    { id: 'message', label: 'Tell me more', type: 'textarea', full: true, required: true },
  ];

  const brandFields = [
    { id: 'name', label: 'Your name', type: 'text', required: true },
    { id: 'brand', label: 'Brand name', type: 'text', required: true },
    { id: 'email', label: 'Email', type: 'email', required: true },
    { id: 'website', label: 'Website or Instagram', type: 'text' },
    { id: 'type', label: 'Type of content', type: 'select', options: ['Half-day lifestyle', 'Full-day lifestyle', 'Product in use', 'Campaign', 'Ongoing content', 'Not sure yet'] },
    { id: 'window', label: 'Shoot date range', type: 'text' },
    { id: 'brief', label: 'Brief description', type: 'textarea', full: true, required: true },
  ];

  const maternityFields = [
    { id: 'name', label: 'Your name', type: 'text', required: true },
    { id: 'email', label: 'Email', type: 'email', required: true },
    { id: 'phone', label: 'Phone', type: 'tel' },
    { id: 'due', label: 'Due date', type: 'date' },
    { id: 'window', label: 'Recommended photo window', type: 'text', helper: 'Auto-filled from the calculator above' },
    { id: 'date', label: 'Preferred session date', type: 'date' },
    { id: 'message', label: 'Tell me more', type: 'textarea', full: true, required: true },
  ];

  const weddingFields = [
    { id: 'name', label: 'Your name', type: 'text', required: true },
    { id: 'partner', label: "Partner's name", type: 'text' },
    { id: 'email', label: 'Email', type: 'email', required: true },
    { id: 'date', label: 'Wedding date', type: 'date' },
    { id: 'location', label: 'Location or venue', type: 'text' },
    { id: 'guests', label: 'Guest count', type: 'text' },
    { id: 'found', label: 'How did you hear about me?', type: 'text' },
    { id: 'message', label: 'Tell me about your day', type: 'textarea', full: true, required: true },
  ];

  const fields = variant === 'brand' ? brandFields
    : variant === 'maternity' ? maternityFields
    : variant === 'wedding' ? weddingFields
    : personalFields;

  return (
    <section id="enquire">
      <div className="container">
        <div className="form-block reveal">
          <div className="copy">
            {eyebrow && <span className="eyebrow">{eyebrow}</span>}
            {title && <h2 className="section-title">{title}</h2>}
            {sub && <p>{sub}</p>}
            <div className="contact-direct">
              <span className="label">Or reach out directly</span>
              <div className="val">hello@jpazphotography.com</div>
              <span className="label">Phone</span>
              <div className="val">0479 039 539</div>
            </div>
          </div>
          <form className="form-grid" onSubmit={e => { e.preventDefault(); setSent(true); }}>
            {fields.map(f => (
              <div className={'field' + (f.full ? ' full' : '')} key={f.id}>
                <label htmlFor={f.id}>{f.label}{f.required && ' *'}</label>
                {f.type === 'textarea' ? (
                  <textarea id={f.id} required={f.required} />
                ) : f.type === 'select' ? (
                  <select id={f.id}>
                    <option value="">Choose one</option>
                    {f.options.map(o => <option key={o}>{o}</option>)}
                  </select>
                ) : (
                  <input id={f.id} type={f.type} required={f.required} />
                )}
                {f.helper && <span className="helper">{f.helper}</span>}
              </div>
            ))}
            <div className="full actions">
              <button type="submit" className="btn">Send enquiry <span className="arr">→</span></button>
              <span style={{ fontSize: 12, color: 'var(--charcoal)', opacity: 0.7 }}>I reply the same day, usually within a few hours.</span>
            </div>
            {sent && <div className="full form-success">Thanks — your enquiry came through. I'll be in touch shortly.</div>}
          </form>
        </div>
      </div>
    </section>
  );
}

function MaternityCalc() {
  const [due, setDue] = useStateP('');
  const result = useMemo(() => {
    if (!due) return null;
    const d = new Date(due);
    if (isNaN(d)) return null;
    const fmt = dt => dt.toLocaleDateString('en-AU', { day: 'numeric', month: 'long' });
    const conception = new Date(d.getTime() - 280 * 86400000);
    const w26 = new Date(conception.getTime() + 26 * 7 * 86400000);
    const w30 = new Date(conception.getTime() + 30 * 7 * 86400000);
    const w34 = new Date(conception.getTime() + 34 * 7 * 86400000);
    return { ideal: `${fmt(w26)} — ${fmt(w34)}`, sweet: fmt(w30) };
  }, [due]);

  return (
    <section>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 36 }}>
          <span className="eyebrow">Timing calculator</span>
          <h2 className="section-title" style={{ maxWidth: '20ch' }}>When is the right week?</h2>
          <p className="lead" style={{ marginTop: 18 }}>Most maternity sessions feel best between 26 and 34 weeks. Drop in your due date and I'll show you your window.</p>
        </div>
        <div className="calc reveal">
          <div className="input-side">
            <div className="field">
              <label>Due date</label>
              <input type="date" value={due} onChange={e => setDue(e.target.value)} />
              <span className="helper">We'll work out a 26–34 week window. The sweet spot is usually around 30.</span>
            </div>
          </div>
          <div className="out">
            <div className="row">
              <div className="lab">Ideal session window</div>
              <div className="big">{result ? result.ideal : 'Pick a date →'}</div>
            </div>
            <div className="row">
              <div className="lab">Sweet spot (30 weeks)</div>
              <div className="big">{result ? result.sweet : '—'}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PageFooter() {
  const base = pageBase();
  const L = window.__navLinks || {};
  return (
    <footer>
      <div className="container">
        <div className="foot-top">
          <div className="logo-row">
            <img src={base + 'assets/logo.png'} alt="JPaz Photography" />
            <p className="blurb">Sydney lifestyle photographer creating genuine content that shows the real feeling of your brand, your products and your life.</p>
          </div>
          <div>
            <h4>Personal</h4>
            <ul>
              <li><a href={L.maternity}>Maternity</a></li>
              <li><a href={L.newborn}>Newborn</a></li>
              <li><a href={L.families}>Families</a></li>
              <li><a href={L.couples}>Couples</a></li>
              <li><a href={L.weddings}>Weddings</a></li>
            </ul>
          </div>
          <div>
            <h4>Studio</h4>
            <ul>
              <li><a href={L.brand}>Brand &amp; Lifestyle</a></li>
              <li><a href={L.about}>About Jorge</a></li>
              <li><a href={L.blog}>Blog</a></li>
              <li><a href={L.contact}>Contact</a></li>
            </ul>
          </div>
          <div>
            <h4>Elsewhere</h4>
            <ul>
              <li><a href="#">Instagram</a></li>
              <li><a href="https://jpazphotography.pixieset.com/" target="_blank" rel="noopener noreferrer">Client galleries</a></li>
              <li><a href="mailto:hello@jpazphotography.com">hello@jpazphotography.com</a></li>
              <li><a href="tel:+61479039539">0479 039 539</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 JPaz Photography. All rights reserved.</span>
          <span className="ack">I acknowledge the Gayamaygal and Garigal people, the traditional custodians of the land on which I live and work, and pay my respects to their Elders past, present and emerging.</span>
        </div>
      </div>
    </footer>
  );
}

window.PageHero = PageHero;
window.SplitBlock = SplitBlock;
window.StatRow = StatRow;
window.Gallery = Gallery;
window.Process = Process;
window.Packages = Packages;
window.PackagesGrid = PackagesGrid;
window.Quote = Quote;
window.ContactForm = ContactForm;
window.MaternityCalc = MaternityCalc;
window.PageFooter = PageFooter;