// iffs-pages.jsx — page composers (Home, RM, AA, FAQ+Contact)

const { useState: useStateP } = React;

function HomePage({ copy, emblem, rmMark, aaMark, onPage }) {
  return (
    <div data-screen-label="01 Home">
      <Hero copy={copy} emblem={emblem} onPage={onPage}/>

      <section className="section container" data-screen-label="Values">
        <SecHead data={copy.sectionHeads.values}/>
        <Values copy={copy}/>
      </section>

      <section className="section container" data-screen-label="Products">
        <SecHead data={copy.sectionHeads.products}/>
        <ProductCards copy={copy} onPage={onPage} rmMark={rmMark} aaMark={aaMark}/>
      </section>

      <section className="section container" data-screen-label="Founder">
        <SecHead data={copy.sectionHeads.founder}/>
        <Founder copy={copy}/>
      </section>

      <CTABand copy={copy}/>
    </div>
  );
}

function RMPage({ copy, emblem, rmMark, onPage }) {
  const c = copy.rm;
  return (
    <div data-screen-label="02 RM">
      <section className="page-band" data-screen-label="RM Band">
        <img src="img/rm-canyon.jpg" alt="" className="page-band-img"/>
        <div className="page-band-shade"/>
        <div className="container hero" style={{ position:'relative', zIndex: 2 }}>
          <span className="badge"><span className="dot"></span>{c.hero.badge}</span>
          <h1 style={{ marginTop: 22, maxWidth: 1100 }}>
            {c.hero.title[0]}<br/>
            <span className="display-italic">{c.hero.title[1]}</span>
          </h1>
          <p className="hero-sub" style={{ maxWidth: 580 }}>{c.hero.sub}</p>
          <div className="hero-ctas">
            <button className="btn btn-primary btn-lg" onClick={()=>onPage('contact')}>{copy.hero.cta} <span className="arr">→</span></button>
            <button className="btn btn-quiet btn-lg" onClick={()=>onPage('aa')}>{copy.products[1].link}</button>
          </div>
        </div>
      </section>

      <section className="container" style={{ paddingBottom: 56, paddingTop: 56 }}>
        <div style={{ border: '1px solid var(--line)', height: 540, position: 'relative', overflow: 'hidden', borderRadius: 3, boxShadow: '0 30px 60px -30px rgba(0,0,0,.6)' }}>
          <RMShot/>
          <div style={{ position: 'absolute', top: 14, right: 14, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--ink-4)', background: 'rgba(244,239,228,.85)', padding: '5px 10px', border: '1px solid var(--line)' }}>console.iffs.is</div>
        </div>
      </section>

      <section className="section container" data-screen-label="RM Steps">
        <SecHead data={copy.sectionHeads.steps}/>
        <div className="steps">
          {c.steps.map(s => (
            <div className="step" key={s.num}>
              <span className="num">{s.num}</span>
              <span className="label">{s.label}</span>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="section container" data-screen-label="RM Modules">
        <SecHead data={copy.sectionHeads.modules}/>
        <div className="modules">
          {c.modules.map((m, i) => {
            const icons = ['cal', 'fish', 'doc', 'crm', 'bell', 'people', 'pin', 'map'];
            return (
              <div className={`module ${m.addOn ? 'add-on' : ''}`} key={i}>
                <div className="ico"><Icon name={icons[i]} size={26}/></div>
                <h5>{m.t}</h5>
                <p>{m.d}</p>
                <span className="tag">{m.tag}</span>
              </div>
            );
          })}
        </div>
      </section>

      <CTABand copy={copy}/>
    </div>
  );
}

function AAPage({ copy, emblem, aaMark, onPage }) {
  const c = copy.aa;
  return (
    <div data-screen-label="03 AA">
      <section className="page-band" data-screen-label="AA Band">
        <img src="img/cta-sunset.jpg" alt="" className="page-band-img"/>
        <div className="page-band-shade"/>
        <div className="container hero" style={{ position:'relative', zIndex: 2 }}>
          <div className="aa-hero">
            <div>
              <span className="badge"><span className="dot"></span>{c.hero.badge}</span>
              <h1 style={{ marginTop: 22 }}>
                {c.hero.title[0]}<br/>
                <span className="display-italic">{c.hero.title[1]}</span>
              </h1>
              <p className="hero-sub">{c.hero.sub}</p>
              <div className="hero-ctas">
                <button className="btn btn-primary btn-lg" onClick={()=>onPage('contact')}>{c.hero.cta} <span className="arr">→</span></button>
                <button className="btn btn-quiet btn-lg" onClick={()=>onPage('rm')}>{copy.products[0].link}</button>
              </div>
            </div>
            <div className="phone">
              <div className="notch"></div>
              <div className="phone-screen">
                <AAShot/>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section container" data-screen-label="AA Features">
        <SecHead data={copy.sectionHeads.aaFeatures}/>
        <div className="aa-features">
          {c.features.map((f, i) => {
            const icons = ['map', 'sketch', 'fly', 'fish', 'bell', 'pin'];
            return (
              <div className="aa-feature" key={i}>
                <div className="ico"><Icon name={icons[i]} size={36}/></div>
                <h4>{f.t}</h4>
                <p>{f.d}</p>
              </div>
            );
          })}
        </div>
      </section>

      <section className="container" style={{ paddingBottom: 88 }}>
        <div className="offline-bar">
          <div style={{ position: 'relative', zIndex: 1 }}>
            <div className="meta"><Icon name="wifi" size={18} color="var(--gold)"/> {c.offline.meta}</div>
            <h3 style={{ marginTop: 12 }}>{c.offline.t}</h3>
            <p style={{ marginTop: 8 }}>{c.offline.d}</p>
          </div>
        </div>
      </section>

      <section className="section container" data-screen-label="AA Whitelabel">
        <SecHead data={copy.sectionHeads.whitelabel}/>
        <div className="whitelabel">
          {c.whitelabel.map((w, i) => (
            <div className="wl-phone" key={i}>
              <div className="label">iffs.is/{w.name.split(' ')[0].toLowerCase()}</div>
              <div className="strip" style={{ background: w.strip }}></div>
              <div className="name">{w.name}</div>
              <div className="frame">
                <div className="hd">
                  <div className="ix" style={{ background: w.strip, color: 'var(--paper)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-display)', fontSize: 12 }}>{w.initial}</div>
                  <div className="t">{w.name}</div>
                </div>
                <div style={{ height: 80, background: '#222', borderRadius: 3, marginTop: 6, position:'relative', overflow:'hidden' }}>
                  <img src={`img/${['atmos-river','atmos-pano','faq-falls'][i % 3]}.jpg`} alt="" style={{ width:'100%', height:'100%', objectFit:'cover', filter:'saturate(.85)' }}/>
                  <div style={{ position:'absolute', inset: 0, background: `linear-gradient(180deg, transparent 30%, ${w.strip}80)`, mixBlendMode:'multiply' }}/>
                </div>
                <div className="blk"></div>
                <div className="blk s"></div>
                <div style={{ marginTop: 'auto', display:'flex', gap: 6 }}>
                  <div style={{ flex:1, height: 24, background: w.strip, borderRadius: 2, color: 'var(--paper)', fontSize: 10, display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-mono)', letterSpacing:'.1em', textTransform:'uppercase' }}>Skrá afla</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <CTABand copy={copy}/>
    </div>
  );
}

function FAQContactPage({ copy, lang, onPage }) {
  return (
    <div data-screen-label="04 Contact">
      <section className="page-band page-band-sm" data-screen-label="Contact Band">
        <img src="img/faq-falls.jpg" alt="" className="page-band-img"/>
        <div className="page-band-shade"/>
        <div className="container" style={{ position:'relative', zIndex:2, padding:'80px 32px 56px' }}>
          <span className="badge"><span className="dot"></span>{lang==='is'?'Hafa samband':'Get in touch'}</span>
          <h1 style={{ marginTop: 22, maxWidth: 900 }}>
            {lang==='is' ? <>Sendu okkur línu,<br/><span className="display-italic">við svörum sama dag.</span></>
                          : <>Send us a line,<br/><span className="display-italic">we reply the same day.</span></>}
          </h1>
        </div>
      </section>

      <section className="section container" data-screen-label="Contact">
        <SecHead data={copy.sectionHeads.contact}/>
        <div className="contact-grid">
          <div className="contact-meta">
            <p style={{ fontFamily:'var(--font-display)', fontSize: 22, lineHeight: 1.4, color: 'var(--paper)', maxWidth: 420, fontWeight: 400 }}>
              {copy.contact.sub}
            </p>
            {copy.contact.meta.map(m => (
              <div className="row" key={m.l}>
                <span className="label">{m.l}</span>
                <span className="val">{m.v}</span>
              </div>
            ))}
            <div style={{ marginTop: 24 }}>
              <button className="btn btn-primary btn-lg" onClick={()=>alert(lang==='is'?'Bókunarflæði':'Booking flow')}>{copy.nav.cta} <span className="arr">→</span></button>
            </div>
          </div>

          <form className="form" onSubmit={(e)=>e.preventDefault()}>
            <div className="grid2">
              <div className="field">
                <label>{copy.contact.labels.name}</label>
                <input type="text" placeholder={lang==='is'?'Jón Jónsson':'Jane Doe'}/>
              </div>
              <div className="field">
                <label>{copy.contact.labels.email}</label>
                <input type="email" placeholder="jon@dæmi.is"/>
              </div>
            </div>
            <div className="field">
              <label>{copy.contact.labels.subject}</label>
              <select defaultValue="">
                {copy.contact.subjects.map((s, i) => <option key={s} value={i===0?'':s} disabled={i===0}>{s}</option>)}
              </select>
            </div>
            <div className="field">
              <label>{copy.contact.labels.message}</label>
              <textarea placeholder="..."/>
            </div>
            <div style={{ marginTop: 8 }}>
              <button type="submit" className="btn btn-primary btn-lg">{copy.contact.labels.send} <span className="arr">→</span></button>
            </div>
          </form>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage, RMPage, AAPage, FAQContactPage });