/**
 * Pages — Home, About (What We Do), Why (Services), Clients, Contact
 */

const { useState } = React;
const A = window.BFM_ASSETS; // './assets/'

const SERVICES = [
  { id: 'social',  label: 'Social Media', sub: 'Management',  icon: 'social-media',
    body: 'Keeping your channels active with consistent posting, planning and engagement.' },
  { id: 'content', label: 'Content',       sub: 'Creation',    icon: 'content-creation',
    body: 'Photography and visual content designed around your brand.' },
  { id: 'video',   label: 'Video &',       sub: 'Reels',       icon: 'video-reels',
    body: 'Short-form content built to capture attention and drive engagement.' },
  { id: 'brand',   label: 'Brand',         sub: 'Visibility',  icon: 'brand-visibility',
    body: 'Helping businesses strengthen their presence and get noticed.' },
];

/* ════════════════════════════════════════════════════════════════════════
   HOME
   ════════════════════════════════════════════════════════════════════════ */
function HomePage({ onNav, showToast }) {
  return (
    <>
      <HeroBlock onNav={onNav} />

      <section className="section services-teaser" id="services">
        <div className="section-inner">
          <div className="section-eyebrow"><span></span><b>Our Focus</b><span></span></div>
          <h2 className="section-title">What <span className="alt">We Do</span></h2>
          <p className="section-lede">
            Four services, one job: bring your brand into focus. Pick one or stack them — we tailor the engagement
            to where your business needs the most lift.
          </p>
          <div className="services-list">
            {SERVICES.map(s => (
              <a className="service-card" key={s.id} onClick={() => onNav('why')}>
                <div className="badge"><img src={`${A}icon-${s.icon}.png`} alt="" /></div>
                <div>
                  <h3>{s.label} <span className="alt">{s.sub}</span></h3>
                  <p>{s.body}</p>
                </div>
                <div className="arrow">→</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="quote-band">
        <div className="quote">Because being good at what<br/>you do isn't <span className="alt">always enough.</span></div>
        <div className="punchline">People need to see it.</div>
      </section>

      <CTAStrip onNav={onNav} />
    </>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   ABOUT / WHAT WE DO
   ════════════════════════════════════════════════════════════════════════ */
function AboutPage({ onNav }) {
  const steps = [
    { num: '01', h: 'Listen',  b: "We start with a conversation. What's working, what isn't, who you're talking to, and what you actually want from this." },
    { num: '02', h: 'Plan',    b: 'A content calendar built around your business — not a generic template. Pillars, posting cadence, channels, KPIs.' },
    { num: '03', h: 'Create',  b: "Photo, video, copy, graphics — produced in batches so your channels stay full and consistent." },
    { num: '04', h: 'Publish', b: "We handle posting, community management, and the weekly check-ins so you can stay in your business." },
  ];
  return (
    <>
      <PageBanner
        eyebrow="What We Do"
        title="What"
        titleAlt="We Do"
        subtitle="Black Frame Media was built to help businesses stay visible, active and memorable online."
      />

      <section className="story">
        <div className="story-inner">
          <div className="story-grid">
            <div className="label">The Studio</div>
            <div>
              <p>
                We're a small studio for businesses that want their social presence handled properly — not posted to
                when there's a spare minute on a Friday afternoon.
              </p>
              <p>
                Our work sits in the space where <b>content</b> and <b>strategy</b> meet. We make the photos, the
                reels, the captions, the calendar; we manage the channels day-to-day; and we measure what actually
                moves the needle for your business.
              </p>
              <p>
                One job: bring your brand into focus.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="approach">
        <div className="approach-inner">
          <div className="section-eyebrow"><span></span><b>Our Approach</b><span></span></div>
          <h2 className="section-title">A simple <span className="alt">four-step</span> rhythm.</h2>
          <p className="section-lede">No 14-page onboarding decks. We listen, plan, create, publish — then repeat with what we learned.</p>
          <div className="approach-grid">
            {steps.map(s => (
              <div className="step" key={s.num}>
                <div className="num">{s.num}</div>
                <h4>{s.h}</h4>
                <p>{s.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="quote-band">
        <div className="quote">Because being good at what<br/>you do isn't <span className="alt">always enough.</span></div>
        <div className="punchline">People need to see it.</div>
      </section>

      <CTAStrip onNav={onNav} headline={['Let\'s', 'talk.']} punch="Tell us about your brand." cta="Get In Touch" />
    </>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   WHY / SERVICES
   ════════════════════════════════════════════════════════════════════════ */
function WhyPage({ onNav }) {
  const pillars = [
    {
      icon: 'social-media',
      num: '01',
      title: 'Social Media',
      alt: 'Management',
      lede: 'We keep your channels active with consistent posting, planning and community management — so your audience never wonders if you\'re still around.',
      delivers: [
        'Monthly content calendar tailored to your channels',
        'Daily posting across IG, TikTok, LinkedIn or wherever you live',
        'Community management and DM response',
        'Monthly reporting on what moved and what didn\'t',
      ],
    },
    {
      icon: 'content-creation',
      num: '02',
      title: 'Content',
      alt: 'Creation',
      lede: 'Photography and visual content designed around your brand. On-site shoot days, edited assets, ready to roll for weeks.',
      delivers: [
        'Half-day or full-day shoot on location',
        'Edited photo + short-form video assets',
        'Caption + copy library written to your voice',
        'Branded templates you can reuse forever',
      ],
    },
    {
      icon: 'video-reels',
      num: '03',
      title: 'Video &',
      alt: 'Reels',
      lede: 'Short-form content built to capture attention and drive engagement. We script, shoot, edit and deliver vertical-first.',
      delivers: [
        'Reel concept + script direction',
        'Hands-on shoot, in our studio or yours',
        'Vertical-first edit with motion graphics + captions',
        'Reusable assets across IG, TikTok, YouTube Shorts',
      ],
    },
    {
      icon: 'brand-visibility',
      num: '04',
      title: 'Brand',
      alt: 'Visibility',
      lede: 'Helping businesses strengthen their presence and get noticed. Strategy work for when more posting isn\'t the answer.',
      delivers: [
        'Audit of current presence + competitor scan',
        'Brand voice and visual identity sweep',
        'Channel + audience strategy',
        'PR and partnership outreach where it fits',
      ],
    },
  ];

  const reasons = [
    { num: '01', h: 'Consistency over heroics',
      b: 'A great post every six months loses to a steady drumbeat. We show up every week so you don\'t have to.' },
    { num: '02', h: 'On-brand, never templated',
      b: 'Every asset is composed for your brand — not pulled from a stock library and recolored. The work looks like you.' },
    { num: '03', h: 'Measured by results',
      b: 'Visibility, engagement, brand recall — and the conversations they spark with real customers. We report what moved.' },
  ];

  return (
    <>
      <PageBanner
        eyebrow="Why Us"
        title="Why"
        titleAlt="Black Frame."
        subtitle="Four service pillars built around the way your business actually shows up online."
      />

      <section className="why-intro">
        <div className="section-inner">
          <div className="section-eyebrow"><span></span><b>Services</b><span></span></div>
          <h2 className="section-title">Pick one, or <span className="alt">stack them.</span></h2>
          <p className="section-lede">
            Most clients start with one pillar — usually content creation or social media management — and add the
            others as their channels grow. We scale up or down with your business.
          </p>
        </div>
      </section>

      <section className="pillars-stack">
        <div className="pillars-stack-inner">
          {pillars.map(p => (
            <div className="pillar-row" key={p.num}>
              <div className="badge"><img src={`${A}icon-${p.icon}.png`} alt="" /></div>
              <div>
                <div className="num-label">{p.num}</div>
                <h3>{p.title} <span className="alt">{p.alt}</span></h3>
                <p className="lede">{p.lede}</p>
              </div>
              <div className="deliverables">
                <h5>What you get</h5>
                <ul>
                  {p.delivers.map((d, i) => <li key={i}>{d}</li>)}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="reasons">
        <div className="reasons-inner">
          <div className="section-eyebrow on-dark"><span></span><b>The Why</b><span></span></div>
          <h2 className="section-title" style={{ color: 'var(--bfm-cream)' }}>
            Three things we <span className="alt" style={{ color: 'var(--bfm-yellow)' }}>commit to.</span>
          </h2>
          <p className="section-lede" style={{ color: 'rgba(255,252,240,0.85)', marginBottom: 56 }}>
            The pillars are the what. These are the how.
          </p>
          <div className="reasons-grid">
            {reasons.map(r => (
              <div className="reason" key={r.num}>
                <div className="num">{r.num}</div>
                <h4>{r.h}</h4>
                <p>{r.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTAStrip onNav={onNav} headline={['Ready to go', 'live?']} punch="One conversation away." cta="Book A Call" />
    </>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   CLIENTS — Meet our clients
   ════════════════════════════════════════════════════════════════════════ */
function ClientsPage({ onNav, showToast }) {
  const [tab, setTab] = useState('all');
  const tabs = [
    { id: 'all',     label: 'All' },
    { id: 'social',  label: 'Social' },
    { id: 'content', label: 'Content' },
    { id: 'video',   label: 'Video' },
    { id: 'brand',   label: 'Brand' },
  ];
  const tiles = [
    { id: 0, kind: 'brand',   tone: 'navy',   meta: 'New Client · Just Signed', title: ['ABC', 'SSG'], sub: 'Football & sports centre — full-service partnership', stat: ['NEW', 'Client'], isNew: true, hero: 'clients/abc-ssg-logo.png' },
  ];
  const visible = tab === 'all' ? tiles : tiles.filter(t => t.kind === tab);

  const testimonials = [
    { who: 'EM', name: 'Esther Marlow', role: 'Founder · Bramble & Co.',
      body: 'Black Frame took our channels from sporadic to consistent in about three weeks. The content actually looks like us — and the engagement followed.' },
    { who: 'TR', name: 'Tom Reece', role: 'Director · Heron Studio',
      body: 'They produce more in a half-day shoot than we used to manage in a month. Worth every minute.' },
  ];

  return (
    <>
      <PageBanner
        eyebrow="Meet Our Clients"
        title="Brands we've"
        titleAlt="brought into focus."
        subtitle="A small selection of recent and ongoing work — social, content, video, and brand projects across food, lifestyle, and independent retail."
      />

      <section className="section">
        <div className="section-inner">
          <div className="section-eyebrow"><span></span><b>Selected Work</b><span></span></div>
          <h2 className="section-title">Recent <span className="alt">projects.</span></h2>
          <div className="tabs">
            {tabs.map(t => (
              <button key={t.id}
                      className={tab === t.id ? 'active' : ''}
                      onClick={() => setTab(t.id)}>
                {t.label}
              </button>
            ))}
          </div>
          <div className="clients-grid">
            {visible.map(t => (
              <div className={`client-tile ${t.tone}${t.isNew ? ' is-new' : ''}${t.hero ? ' has-hero' : ''}`} key={t.id} onClick={() => showToast(`Case Study — ${t.title.join(' ')}`)}>
                {t.isNew && <div className="new-flag">New</div>}
                {t.hero && <div className="tile-hero"><img src={`${A}${t.hero}`} alt="" /></div>}
                <div className="meta"><span className="dot"></span>{t.meta}</div>
                <div>
                  <div className="title">{t.title[0]} <span className="alt">{t.title[1]}</span></div>
                  <div className="sub">{t.sub}</div>
                  <div className="stat">
                    <div>
                      <span className="num">{t.stat[0]}</span>
                      {t.stat[1]}
                    </div>
                  </div>
                </div>
                <div className="arrow">→</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="testimonial-band">
        <div className="section-eyebrow"><span></span><b>What Clients Say</b><span></span></div>
        <h2 className="section-title">Words from <span className="alt">the work.</span></h2>
        <p className="section-lede">Real notes from real clients — names changed where they prefer the quiet life.</p>
        <div className="testimonials">
          {testimonials.map((t, i) => (
            <div className="testimonial" key={i}>
              <div className="mark-q">"</div>
              <p className="quote-body">{t.body}</p>
              <div className="who">
                <div className="avatar">{t.who}</div>
                <div>
                  <div className="name">{t.name}</div>
                  <div className="role">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <CTAStrip onNav={onNav} headline={['Be next', 'in focus.']} punch="Let's talk about your brand." cta="Start Your Project" />
    </>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   CONTACT
   ════════════════════════════════════════════════════════════════════════ */
function ContactPage({ onNav, showToast }) {
  const [vals, setVals] = useState({ name: '', email: '', co: '', budget: '', timeline: '', msg: '' });
  const [interests, setInterests] = useState([]);
  const [sent, setSent] = useState(false);

  const set = (k, v) => setVals(s => ({ ...s, [k]: v }));
  const toggleInterest = (id) => {
    setInterests(arr => arr.includes(id) ? arr.filter(x => x !== id) : [...arr, id]);
  };

  const submit = (e) => {
    e.preventDefault();
    if (!vals.email || !vals.name) {
      showToast('Add your name and email to continue');
      return;
    }
    setSent(true);
    showToast(`Sent — we'll reply to ${vals.email}`);
  };

  return (
    <>
      <PageBanner
        eyebrow="Contact"
        title="Tell us about"
        titleAlt="your brand."
        subtitle="We'll get back within one business day. No 50-step intake form — just enough to know what you're working on."
      />

      <section className="contact-area">
        <div className="contact-area-inner">
          <div className="contact-side">
            <h2>Let's go <span className="alt">live.</span></h2>
            <p className="lede">
              The fastest way to start is a 20-minute call. Drop your details and we'll book a slot that works for both of us.
            </p>
            <div className="contact-meta">
              <div className="row">
                <div className="ico">@</div>
                <div>
                  <div className="label">Email</div>
                  <div className="value"><a href="mailto:hello@blackframemedia.com">hello@blackframemedia.com</a></div>
                </div>
              </div>
              <div className="row">
                <div className="ico">☏</div>
                <div>
                  <div className="label">Phone / WhatsApp</div>
                  <div className="value"><a href="tel:+447803251798">07803 251798</a></div>
                </div>
              </div>
              <div className="row">
                <div className="ico">⏱</div>
                <div>
                  <div className="label">Response time</div>
                  <div className="value">One business day, usually faster</div>
                </div>
              </div>
            </div>
          </div>

          {sent ? (
            <div className="contact-success">
              <div className="check">✓</div>
              <h3>Message <span style={{ color: 'var(--bfm-gold)' }}>received.</span></h3>
              <p>Thanks {vals.name.split(' ')[0]}. We'll be in touch at {vals.email} within one business day — usually a lot sooner.</p>
              <div style={{ marginTop: 22 }}>
                <button className="btn btn-outline" onClick={() => { setSent(false); setVals({ name: '', email: '', co: '', budget: '', timeline: '', msg: '' }); setInterests([]); }}>Send Another</button>
              </div>
            </div>
          ) : (
            <form className="contact-form" onSubmit={submit}>
              <div className="field">
                <label>Your name</label>
                <input type="text" value={vals.name} onChange={(e) => set('name', e.target.value)} placeholder="Jordan Smith" required />
              </div>
              <div className="field">
                <label>Email</label>
                <input type="email" value={vals.email} onChange={(e) => set('email', e.target.value)} placeholder="you@brand.com" required />
              </div>
              <div className="field full">
                <label>Company</label>
                <input type="text" value={vals.co} onChange={(e) => set('co', e.target.value)} placeholder="Brand or business name" />
              </div>
              <div className="field full">
                <label>What are you interested in? (select any)</label>
                <div className="chips">
                  {SERVICES.map(s => (
                    <button type="button"
                            key={s.id}
                            className={`chip ${interests.includes(s.id) ? 'active' : ''}`}
                            onClick={() => toggleInterest(s.id)}>
                      {s.label} {s.sub}
                    </button>
                  ))}
                </div>
              </div>
              <div className="field">
                <label>Budget</label>
                <select value={vals.budget} onChange={(e) => set('budget', e.target.value)}>
                  <option value="">Not sure yet</option>
                  <option>Under £1k / month</option>
                  <option>£1–3k / month</option>
                  <option>£3–6k / month</option>
                  <option>£6k+ / month</option>
                  <option>One-off project</option>
                </select>
              </div>
              <div className="field">
                <label>Timeline</label>
                <select value={vals.timeline} onChange={(e) => set('timeline', e.target.value)}>
                  <option value="">No rush</option>
                  <option>This month</option>
                  <option>Next month</option>
                  <option>Within the quarter</option>
                </select>
              </div>
              <div className="field full">
                <label>What can we help with?</label>
                <textarea rows="4" value={vals.msg} onChange={(e) => set('msg', e.target.value)} placeholder="Tell us about your goals, channels, and what's not working today…"></textarea>
              </div>
              <div className="submit-row full">
                <div className="fineprint">By submitting you agree we may contact you about your enquiry.<br/>We don't share details with third parties.</div>
                <button type="submit" className="btn btn-primary">Send Message</button>
              </div>
            </form>
          )}
        </div>
      </section>
    </>
  );
}

/* expose */
Object.assign(window, { HomePage, AboutPage, WhyPage, ClientsPage, ContactPage });