// OtherPages.jsx — Services, Work, About, Contact page components

const _dark  = { background:'var(--color-neutral-darkest)', color:'#fff', padding:'80px 5%' };
const _cx    = { maxWidth:'1280px', margin:'0 auto' };
const _cxSm  = { maxWidth:'576px', margin:'0 auto', textAlign:'center' };
const _eye   = { fontSize:'13px', fontWeight:600, marginBottom:'14px', color:'rgba(255,255,255,0.85)', letterSpacing:'0.04em' };
const _h1    = { fontFamily:'var(--font-heading)', fontSize:'clamp(2.5rem,6vw,5.25rem)', lineHeight:1.05, fontWeight:400, color:'#fff', marginBottom:'24px', letterSpacing:'0.01em' };
const _h2    = { fontFamily:'var(--font-heading)', fontSize:'clamp(2rem,4vw,3.75rem)', lineHeight:1.15, fontWeight:400, color:'#fff', marginBottom:'20px', letterSpacing:'0.01em' };
const _h4    = { fontFamily:'var(--font-heading)', fontSize:'clamp(1.25rem,2.2vw,2rem)', lineHeight:1.2, fontWeight:400, color:'#fff', marginBottom:'12px', letterSpacing:'0.01em' };
const _body  = { fontSize:'clamp(14px,1.5vw,17px)', lineHeight:1.65, color:'rgba(255,255,255,0.7)' };
const _fill  = { display:'inline-flex', alignItems:'center', gap:'8px', padding:'11px 24px', background:'linear-gradient(135deg,#2563EB 20%,#D94F4F)', color:'#fff', border:'none', borderRadius:0, fontSize:'14px', fontWeight:500, fontFamily:'var(--font-body)', cursor:'pointer' };
const _out   = { display:'inline-flex', alignItems:'center', gap:'8px', padding:'11px 24px', background:'transparent', border:'2px solid rgba(255,255,255,0.7)', color:'#fff', borderRadius:0, fontSize:'14px', fontWeight:500, fontFamily:'var(--font-body)', cursor:'pointer' };
const _link  = { display:'inline-flex', alignItems:'center', gap:'6px', background:'none', border:'none', padding:0, color:'rgba(255,255,255,0.65)', fontSize:'14px', fontFamily:'var(--font-body)', cursor:'pointer' };
const _grid3 = { display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(220px,1fr))', gap:'48px' };
const _div   = { height:'1px', background:'rgba(255,255,255,0.1)' };

// ── PageHero — shared cinematic dark hero ──────────────────────────────────
function PageHero({ eyebrow, headline, subhead }) {
  return (
    <section style={{ ..._dark, padding:'96px 5% 80px', textAlign:'center', borderBottom:'1px solid rgba(255,255,255,0.08)' }}>
      <div style={_cxSm}>
        <p style={_eye}>{eyebrow}</p>
        <h1 style={_h1}>{headline}</h1>
        {subhead && <p style={{ ..._body, fontSize:'clamp(15px,1.8vw,19px)' }}>{subhead}</p>}
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════════════════════
//  SERVICES PAGE
// ════════════════════════════════════════════════════════════════════════════
function ServicesPage({ onNavigate }) {
  const pillars = [
    { icon:'https://cdn.jsdelivr.net/npm/@material-symbols/svg-500@latest/rounded/architecture.svg', title:'Identity architecture', body:'Strategic brand identity and visual language tailored for authority in healthcare.' },
    { icon:'https://cdn.jsdelivr.net/npm/@material-symbols/svg-500@latest/rounded/strategy.svg', title:'Content presence', body:'Cinematic, trust-building content systems for perpetual visibility.' },
    { icon:'https://cdn.jsdelivr.net/npm/@material-symbols/svg-500@latest/rounded/identity_platform.svg', title:'Authority systems', body:'End-to-end frameworks to amplify credibility, manage perception, and scale premium trust.' },
  ];
  const steps = [
    { n:'01', title:'Discovery', body:'Audit your current market perception, patient touchpoints, and competitive landscape.' },
    { n:'02', title:'Strategy', body:'Define your authority angle, positioning, and the narrative that sets you apart.' },
    { n:'03', title:'Execution', body:'Build the visual identity, content systems, and authority infrastructure.' },
    { n:'04', title:'Elevation', body:'Launch, optimise, and sustain your authority across every platform.' },
  ];
  return (
    <main>
      <PageHero eyebrow="Services" headline="Three systems. One authority." subhead="Every doctor's reputation is built on structure, presence, and proof." />

      <section style={_dark}>
        <div style={_cx}>
          <div style={{ ..._cxSm, marginBottom:'56px' }}>
            <p style={_eye}>Systems</p>
            <h2 style={_h2}>Three pillars of premium authority</h2>
            <p style={_body}>We architect the systems that make trust visible.</p>
          </div>
          <div style={_grid3}>
            {pillars.map(({ icon, title, body }) => (
              <div key={title} style={{ textAlign:'center' }}>
                <div style={{ marginBottom:'20px' }}>
                  <img src={icon} alt="" style={{ width:'48px', height:'48px', filter:'invert(1)', opacity:0.8 }} />
                </div>
                <h3 style={_h4}>{title}</h3>
                <p style={{ ..._body, fontSize:'13px' }}>{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ ..._dark, borderTop:'1px solid rgba(255,255,255,0.08)' }}>
        <div style={_cx}>
          <div style={{ ..._cxSm, marginBottom:'56px' }}>
            <p style={_eye}>Process</p>
            <h2 style={_h2}>How it works</h2>
            <p style={_body}>A linear, elegant, four-stage authority build — from insight to elevation.</p>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(180px,1fr))', gap:'40px 32px' }}>
            {steps.map(({ n, title, body }) => (
              <div key={n}>
                <div style={{ fontSize:'clamp(3rem,6vw,5rem)', fontFamily:'var(--font-heading)', color:'rgba(255,255,255,0.07)', lineHeight:1, marginBottom:'16px', fontWeight:400 }}>{n}</div>
                <h3 style={{ ..._h4, fontSize:'clamp(1rem,1.8vw,1.4rem)' }}>{title}</h3>
                <p style={{ ..._body, fontSize:'13px' }}>{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTASection onNavigate={onNavigate} />
    </main>
  );
}

// ════════════════════════════════════════════════════════════════════════════
//  WORK PAGE
// ════════════════════════════════════════════════════════════════════════════
function WorkPage({ onNavigate }) {
  const cases = [
    { img:'./assets/images/home-portfolio-list-section-0.png', title:'Cosmetic surgeon positioning', specialty:'Aesthetic', body:'From commodity pricing to premium authority through visual identity and content strategy.', tags:['Branding','Positioning','Content'] },
    { img:'./assets/images/home-portfolio-list-section-1.png', title:'Dental practice authority', specialty:'Dental', body:'Building trust through founder-led content and editorial brand presence.', tags:['Authority','Content','Strategy'] },
    { img:'./assets/images/home-portfolio-list-section-2.png', title:'Wellness founder branding', specialty:'Wellness', body:'Premium perception through cinematic visual identity and strategic positioning.', tags:['Identity','Branding','Positioning'] },
  ];
  return (
    <main>
      <PageHero eyebrow="Work" headline="The work speaks for itself." subhead="Strategic positioning studies and authority transformations across healthcare." />

      <section style={{ ..._dark, position:'relative', overflow:'hidden' }}>
        <div style={_cx}>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(260px,1fr))', gap:'48px 32px' }}>
            {cases.map(({ img, title, specialty, body, tags }, i) => (
              <article key={title} className="aso-portfolio-card" data-reveal data-reveal-delay={String(i+1)} style={{ borderRadius:'8px', overflow:'hidden', border:'1px solid rgba(255,255,255,0.1)', background:'rgba(255,255,255,0.02)' }}>
                <div style={{ overflow:'hidden' }}>
                  <img src={img} alt={title} style={{ width:'100%', aspectRatio:'3/2', objectFit:'cover', display:'block' }}
                    onError={e => { e.target.style.display='none'; e.target.parentElement.style.background='#1E1C23'; e.target.parentElement.style.height='180px'; }} />
                </div>
                <div style={{ padding:'20px 22px 24px' }}>
                <p style={{ fontSize:'11px', fontWeight:600, color:'rgba(255,255,255,0.4)', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:'8px' }}>{specialty}</p>
                <h3 style={{ ..._h4, fontSize:'clamp(1rem,1.8vw,1.4rem)', marginBottom:'10px' }}>{title}</h3>
                <p style={{ ..._body, fontSize:'13px', marginBottom:'14px' }}>{body}</p>
                <div style={{ display:'flex', gap:'8px', flexWrap:'wrap', marginBottom:'16px' }}>
                  {tags.map(t => <span key={t} style={{ fontSize:'11px', padding:'3px 8px', border:'2px solid rgba(255,255,255,0.25)', color:'rgba(255,255,255,0.55)', borderRadius:0 }}>{t}</span>)}
                </div>
                <button style={_link}>View case ›</button>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <CTASection onNavigate={onNavigate} />
    </main>
  );
}

// ════════════════════════════════════════════════════════════════════════════
//  ABOUT PAGE
// ════════════════════════════════════════════════════════════════════════════
function AboutPage({ onNavigate }) {
  return (
    <main>
      <PageHero eyebrow="About" headline="Authority strategy for doctors who are ready." subhead="Premium branding for a new era of healthcare." />

      {/* Founder intro */}
      <section style={_dark}>
        <div style={_cx}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr', gap:'48px', alignItems:'center' }} className="aso-about-grid">
            <div>
              <p style={_eye}>Founder</p>
              <h2 style={_h2}>Irishi Geevarghese builds authority for doctors</h2>
              <p style={{ ..._body, marginBottom:'24px' }}>A healthcare authority strategist obsessed with branding psychology. Irishi founded ASO HQ to solve the gap between clinical excellence and patient perception — the invisible barrier that keeps good doctors unknown.</p>
              <p style={{ ..._body, fontSize:'13px', marginBottom:'32px' }}>Based in Bangalore, India. Working with a limited number of doctors each year to ensure depth over scale.</p>
              <div style={{ display:'flex', gap:'12px', flexWrap:'wrap' }}>
                <button style={_out} className="aso-btn-out" onClick={() => onNavigate('work')}>View work</button>
                <button style={_link}>LinkedIn ›</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Philosophy */}
      <section style={{ ..._dark, borderTop:'1px solid rgba(255,255,255,0.08)' }}>
        <div style={_cx}>
          <div style={{ ..._cxSm, marginBottom:'56px' }}>
            <p style={_eye}>Philosophy</p>
            <h2 style={_h2}>Why authority matters</h2>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(260px,1fr))', gap:'0' }}>
            {[
              { q:'Why doctors?', a:'Doctors face a unique credibility gap. They have earned clinical authority, but that expertise is invisible online. We make it visible.' },
              { q:'Why authority?', a:'Patients decide based on perception before a single conversation. Authority strategy engineers that perception, closing the trust gap before it forms.' },
              { q:'Why now?', a:'Healthcare is becoming a buyer\'s market. The doctors who build their brand today will own the premium segment of tomorrow.' },
            ].map(({ q, a }, i) => (
              <div key={q} style={{ padding:'32px 0', borderTop:'1px solid rgba(255,255,255,0.1)', paddingRight: i < 2 ? '40px' : '0' }}>
                <h3 style={{ ..._h4, fontSize:'clamp(1rem,1.8vw,1.4rem)', marginBottom:'12px' }}>{q}</h3>
                <p style={{ ..._body, fontSize:'13px' }}>{a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team */}
      <section style={{ ..._dark, borderTop:'1px solid rgba(255,255,255,0.08)' }}>
        <div style={_cx}>
          <div style={{ ..._cxSm, marginBottom:'48px' }}>
            <p style={_eye}>Studio</p>
            <h2 style={_h2}>One strategist</h2>
            <p style={_body}>Boutique authority strategy built on depth, not scale</p>
          </div>
          <div style={{ maxWidth:'320px', textAlign:'center', margin:'0 auto' }}>
            <div style={{ width:'100%', aspectRatio:'1', background:'#1E1C23', borderRadius:'8px', marginBottom:'20px', display:'flex', alignItems:'center', justifyContent:'center' }}>
              <span style={{ fontSize:'48px', color:'rgba(255,255,255,0.1)', fontFamily:'var(--font-heading)' }}>IG</span>
            </div>
            <p style={{ fontSize:'17px', fontWeight:600, color:'#fff', marginBottom:'4px' }}>Irishi Geevarghese</p>
            <p style={{ fontSize:'14px', color:'rgba(255,255,255,0.55)', marginBottom:'12px' }}>Founder and strategist</p>
            <p style={{ ..._body, fontSize:'13px', marginBottom:'16px' }}>Healthcare authority strategist obsessed with branding psychology and patient perception.</p>
          </div>
        </div>
      </section>

      <CTASection onNavigate={onNavigate} />
    </main>
  );
}

// ════════════════════════════════════════════════════════════════════════════
//  CONTACT PAGE
// ════════════════════════════════════════════════════════════════════════════
function ContactPage() {
  const [form, setForm] = React.useState({ firstName:'', lastName:'', email:'', phone:'', specialty:'', type:'', message:'' });
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const inputStyle = { width:'100%', padding:'10px 14px', border:'2px solid rgba(255,255,255,0.25)', background:'transparent', color:'#fff', fontFamily:'var(--font-body)', fontSize:'14px', borderRadius:0, outline:'none', boxSizing:'border-box' };
  const labelStyle = { display:'block', fontSize:'12px', fontWeight:500, color:'rgba(255,255,255,0.65)', marginBottom:'6px', letterSpacing:'0.04em', textTransform:'uppercase' };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const res = await fetch('https://formspree.io/f/xnjronvq', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          firstName: form.firstName,
          lastName:  form.lastName,
          email:     form.email,
          phone:     form.phone,
          specialty: form.specialty,
          message:   form.message,
        }),
      });
      if (res.ok) {
        setStatus('sent');
        setForm({ firstName:'', lastName:'', email:'', phone:'', specialty:'', type:'', message:'' });
      } else {
        setStatus('error');
      }
    } catch {
      setStatus('error');
    }
  };

  return (
    <main>
      <PageHero eyebrow="Contact" headline="Start with a conversation." subhead="Share your practice details and vision. We'll take it from there." />

      <section style={_dark}>
        <div style={_cx}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr', gap:'48px' }} className="aso-contact-grid">
            {/* Contact info */}
            <div>
              <p style={_eye}>Connect</p>
              <h2 style={{ ..._h2, fontSize:'clamp(1.5rem,3vw,2.5rem)' }}>Get in touch</h2>
              <div style={{ display:'flex', flexDirection:'column', gap:'16px', marginBottom:'32px' }}>
                {[
                  { icon:'✉', label:'contact@asohq.com' },
                  { icon:'◉', label:'rishi@asohq.com' },
                  { icon:'⌖', label:'Bangalore, India' },
                ].map(({ icon, label }) => (
                  <div key={label} style={{ display:'flex', alignItems:'center', gap:'14px' }}>
                    <span style={{ fontSize:'18px', color:'rgba(255,255,255,0.4)', width:'24px', textAlign:'center' }}>{icon}</span>
                    <p style={{ ..._body, fontSize:'14px' }}>{label}</p>
                  </div>
                ))}
              </div>
              <a href="https://calendly.com/officialrishigee" target="_blank" rel="noreferrer">
                <button style={{ ..._fill, padding:'12px 28px', fontSize:'13px', letterSpacing:'0.04em' }} className="aso-btn-fill">
                  SCHEDULE YOUR STRATEGY CALL
                </button>
              </a>
            </div>

            {/* Form */}
            <form style={{ display:'flex', flexDirection:'column', gap:'20px' }} onSubmit={handleSubmit}>
              <div className="aso-form-row" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'16px' }}>
                <div><label style={labelStyle}>First name</label><input style={inputStyle} value={form.firstName} onChange={set('firstName')} disabled={status === 'sending'} /></div>
                <div><label style={labelStyle}>Last name</label><input style={inputStyle} value={form.lastName} onChange={set('lastName')} disabled={status === 'sending'} /></div>
              </div>
              <div className="aso-form-row" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'16px' }}>
                <div><label style={labelStyle}>Email</label><input type="email" style={inputStyle} value={form.email} onChange={set('email')} disabled={status === 'sending'} /></div>
                <div><label style={labelStyle}>Phone</label><input style={inputStyle} value={form.phone} onChange={set('phone')} disabled={status === 'sending'} /></div>
              </div>
              <div>
                <label style={labelStyle}>Your specialty</label>
                <select style={{ ...inputStyle, appearance:'none' }} value={form.specialty} onChange={set('specialty')} disabled={status === 'sending'}>
                  <option value="">Select specialty</option>
                  {['Surgical','Dental','Aesthetic / Cosmetic','Wellness / Preventive','General Practice','Other'].map(s => <option key={s}>{s}</option>)}
                </select>
              </div>
              <div>
                <label style={labelStyle}>Message</label>
                <textarea style={{ ...inputStyle, minHeight:'120px', resize:'vertical' }} value={form.message} onChange={set('message')} placeholder="Tell us your vision" disabled={status === 'sending'} />
              </div>
              <div style={{ display:'flex', flexDirection:'column', gap:'10px' }}>
                <button type="submit" style={{ ..._fill, padding:'12px 28px', opacity: status === 'sending' ? 0.6 : 1 }} className="aso-btn-fill" disabled={status === 'sending' || status === 'sent'}>
                  {status === 'idle'    && 'SUBMIT'}
                  {status === 'sending' && 'SENDING…'}
                  {status === 'sent'    && 'MESSAGE SENT ✓'}
                  {status === 'error'   && 'TRY AGAIN'}
                </button>
                {status === 'sent'  && <p style={{ fontSize:'13px', color:'rgba(255,255,255,0.5)', textAlign:'center' }}>We'll be in touch shortly.</p>}
                {status === 'error' && <p style={{ fontSize:'13px', color:'#D94F4F', textAlign:'center' }}>Something went wrong. Please email us directly at contact@asohq.com</p>}
              </div>
            </form>
          </div>
        </div>
      </section>
    </main>
  );
}

// Re-export CTASection so it's available from this file too
function CTASection({ onNavigate }) {
  return (
    <section style={{ ..._dark, borderTop:'1px solid rgba(255,255,255,0.08)', textAlign:'center' }}>
      <div style={{ ..._cx, ..._cxSm }}>
        <p style={_eye}>Ready?</p>
        <h2 style={{ ..._h2, marginBottom:'24px' }}>Book your strategy call</h2>
        <p style={{ ..._body, marginBottom:'36px' }}>Work with a limited number of doctors each year. Private, strategic, and designed for those ready to build lasting authority.</p>
        <button style={{ ..._fill, padding:'14px 32px', fontSize:'14px', letterSpacing:'0.06em' }} className="aso-btn-fill" onClick={() => onNavigate('contact')}>
          BOOK A STRATEGY CALL
        </button>
      </div>
    </section>
  );
}

Object.assign(window, { ServicesPage, WorkPage, AboutPage, ContactPage });