// About, Contact, Book pages — BJO Automation

function About() {
  return <>
    {/* Hero — same 2-col pattern as service detail pages. Brief overview + Book CTA visible above the fold. */}
    <section style={{background:'var(--bg-cream)',padding:'120px var(--container-pad) 80px'}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',display:'grid',gridTemplateColumns:'1fr 1fr',gap:72,alignItems:'end'}} className="svc-hero">
        <div>
          <Eyebrow>About</Eyebrow>
          <h1 style={{fontFamily:'var(--font-display)',fontWeight:400,fontSize:'clamp(38px,5vw,62px)',lineHeight:1.06,letterSpacing:'-0.02em',margin:'20px 0 28px'}}>
            Who I am, how I work.
          </h1>
          <p style={{fontFamily:'var(--font-body)',fontSize:20,lineHeight:1.6,color:'var(--text-charcoal)',opacity:0.85,maxWidth:540,margin:'0 0 18px'}}>
            I&rsquo;m Bennett Orradre. I grew up on the Central Coast. I build automations for small businesses on the 805 and 831 &mdash; built once, owned by you, kept sharp month after month.
          </p>
          <p style={{fontFamily:'var(--font-body)',fontSize:17,lineHeight:1.55,color:'var(--text-muted)',maxWidth:540,margin:'0 0 36px'}}>
            Below: the longer story, and exactly what working with me looks like from first call to month six.
          </p>
          <Button to="/book" variant="primary" icon="calendar">Book a 45-min call</Button>
        </div>
        <div style={{aspectRatio:'5/4',borderRadius:16,background:'url(assets/photos/painting-coastal-road.png) center / cover no-repeat',boxShadow:'var(--shadow-photo)'}}/>
      </div>
    </section>

    {/* Story — the longer narrative */}
    <section style={{background:'var(--bg-bone)',padding:'100px var(--container-pad)'}}>
      <div style={{maxWidth:720,margin:'0 auto'}}>
        <Eyebrow>The story</Eyebrow>
        <div style={{fontFamily:'var(--font-body)',fontSize:19,lineHeight:1.75,color:'var(--text-charcoal)',display:'flex',flexDirection:'column',gap:'1.2em',marginTop:24}}>
          <p style={{margin:0}}>At the start of 2026, AI hit a different gear. The tools stopped being toys you&rsquo;d play with for ten minutes and started being things that could actually run real work in the background. I started putting them into my own business, small stuff first, then bigger things. Within a few weeks the work shrunk and the progress grew. So I started looking around for something to do.</p>
          <p style={{margin:0}}>The businesses I grew up next to weren&rsquo;t paying attention to any of it. Not because they&rsquo;re not sharp. Most of them are sharper than I am. They just have a payroll to make, a kid&rsquo;s game at 5pm, and a list longer than the day. I get it. Every month that goes by, the gap between the businesses using this and the ones who aren&rsquo;t gets a little wider.</p>
        </div>
      </div>
    </section>

    {/* Process — "Here's how I work" + 4 beats */}
    <section style={{background:'var(--bg-cream)',padding:'120px var(--container-pad)'}}>
      <div style={{maxWidth:820,margin:'0 auto'}}>
        <div style={{textAlign:'center',marginBottom:56}}>
          <Eyebrow>How it works</Eyebrow>
          <h2 style={{fontFamily:'var(--font-display)',fontStyle:'italic',fontWeight:400,fontSize:'clamp(34px,4.4vw,52px)',lineHeight:1.12,letterSpacing:'-0.02em',color:'var(--text-charcoal)',margin:'14px 0 0'}}>
            Here&rsquo;s how I work.
          </h2>
        </div>
        <div style={{fontFamily:'var(--font-body)',fontSize:19,lineHeight:1.75,color:'var(--text-charcoal)',display:'flex',flexDirection:'column',gap:'1.4em'}}>
          <p style={{margin:0}}><strong style={{fontWeight:600}}>First, I get to know your business.</strong> We sit down for 45 minutes, or longer if we need it, and I ask about your week. Where time goes. What piles up waiting on you. What you&rsquo;ve tried before that didn&rsquo;t stick. By the end of the call I know where the leaks actually are and which of my automations are going to fit. A few days later you get a written breakdown &mdash; the bleed points I found, what I&rsquo;d build to plug them, how long it&rsquo;ll take, and what it&rsquo;ll cost. You&rsquo;ll know exactly what&rsquo;s coming before we touch anything.</p>
          <p style={{margin:0}}><strong style={{fontWeight:600}}>Then we optimize.</strong> Most automation projects fail because people bolt AI onto a broken 12-step process and end up with the same broken process running faster. So we fix the workflow first. I&rsquo;ve seen 12 steps drop to 7 before a single line of automation gets built.</p>
          <p style={{margin:0}}><strong style={{fontWeight:600}}>Then we build.</strong> The build itself runs four working days &mdash; day one is access and setup, days two and three are the build, tested in a sandbox against your real data, day four is go-live and a 30-minute training call. Heads-up: any automation that sends SMS has to clear U.S. carrier registration (A2P 10DLC) before the first text can go out &mdash; typically 1&ndash;5 business days, outside my control. That registration runs in parallel with the build, but it can extend the actual go-live date depending on how fast the carriers move. I&rsquo;ll flag it on our call if it applies to your build, so the timeline is clear before you commit.</p>
          <p style={{margin:0}}><strong style={{fontWeight:600}}>After the build, I&rsquo;m on call.</strong> If something breaks, if something isn&rsquo;t working the way it should, if you&rsquo;re confused about a piece of it, I&rsquo;m there. I&rsquo;m not handing you a system and walking off telling you to figure it out. The service is continuous. You&rsquo;re paying a monthly fee, and that fee buys you a person who actually answers when you reach out.</p>
          <p style={{margin:0}}>I&rsquo;m always finding ways to make the automations I&rsquo;ve already built sharper. When I find one, you get it. The system you sign up for in month one isn&rsquo;t the system you&rsquo;ll be running in month six. It gets better the longer you have it.</p>
        </div>
      </div>
    </section>

    {/* Closing CTA — same forest band pattern as the service detail pages */}
    <section style={{background:'var(--bg-forest)',padding:'120px var(--container-pad)',textAlign:'center'}}>
      <h3 style={{fontFamily:'var(--font-display)',fontWeight:400,fontSize:'clamp(30px,3.8vw,44px)',lineHeight:1.2,letterSpacing:'-0.02em',color:'var(--text-cream)',margin:'0 auto 36px',maxWidth:720}}>
        Let&rsquo;s see if this fits your business.
      </h3>
      <Button to="/book" variant="cream" icon="calendar">Book a 45-min call</Button>
    </section>
  </>;
}

function Contact() {
  return (
    <section style={{background:'var(--bg-cream)',padding:'140px var(--container-pad)',minHeight:'80vh'}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',display:'grid',gridTemplateColumns:'1.6fr 1fr',gap:80,alignItems:'start'}} className="contact-grid">
        <div>
          <h1 style={{fontFamily:'var(--font-display)',fontWeight:400,fontSize:'clamp(44px,6vw,72px)',lineHeight:1.05,letterSpacing:'-0.02em',margin:'0 0 24px'}}>
            Get in touch.
          </h1>
          <p style={{fontFamily:'var(--font-body)',fontSize:20,lineHeight:1.6,color:'var(--text-charcoal)',opacity:0.85,maxWidth:520,margin:'0 0 52px'}}>
            Share what&rsquo;s eating your week. You&rsquo;ll get an automated reply within 60 seconds &mdash; and a personal one from me inside the hour. (Yes, that&rsquo;s the system I sell, working on me.)
          </p>
          <form onSubmit={e=>e.preventDefault()} style={{display:'flex',flexDirection:'column',gap:22,maxWidth:560}}>
            {[
              ['Name','Your full name','input'],
              ['Email','hello@example.com','input'],
              ['Business','What you run','input'],
              ['What are you trying to fix?','Tell me in plain language.','textarea'],
            ].map(([label,ph,tag])=>
              <div key={label} style={{display:'flex',flexDirection:'column',gap:8}}>
                <label style={{fontFamily:'var(--font-body)',fontSize:12,letterSpacing:'0.12em',textTransform:'uppercase',color:'var(--accent-clay)',fontWeight:500}}>{label}</label>
                {tag==='input'
                  ? <input placeholder={ph} style={{fontFamily:'var(--font-body)',fontSize:17,padding:'16px 18px',border:'1px solid var(--border-bone)',borderRadius:8,background:'#fff',outline:'none',color:'var(--text-charcoal)'}}/>
                  : <textarea placeholder={ph} rows={5} style={{fontFamily:'var(--font-body)',fontSize:17,padding:'16px 18px',border:'1px solid var(--border-bone)',borderRadius:8,background:'#fff',outline:'none',color:'var(--text-charcoal)',resize:'vertical'}}/>
                }
              </div>
            )}
            <div style={{marginTop:8}}><Button variant="primary">Send</Button></div>
          </form>
        </div>
        <aside style={{background:'var(--bg-bone)',borderRadius:16,padding:32,display:'flex',flexDirection:'column',gap:16}}>
          <div style={{fontFamily:'var(--font-body)',fontSize:12,letterSpacing:'0.12em',textTransform:'uppercase',color:'var(--accent-clay)',fontWeight:500}}>Prefer to talk?</div>
          <div style={{fontFamily:'var(--font-display)',fontSize:26,color:'var(--text-charcoal)',letterSpacing:'-0.015em',lineHeight:1.25}}>A 45-minute call, no pitch deck.</div>
          <div style={{height:1,background:'var(--border-hair)',margin:'4px 0'}}/>
          <div style={{fontFamily:'var(--font-body)',fontSize:15.5,color:'var(--text-muted)',lineHeight:1.6}}>
            A short conversation to figure out which of the 5 systems would save you the most time and money first.
          </div>
          <div style={{marginTop:8}}>
            <Button to="/book" variant="link">Book a call instead &rarr;</Button>
          </div>
        </aside>
      </div>
    </section>
  );
}

function BookACall() {
  // GHL native calendar embed. Bookings auto-create contacts in GHL CRM and can trigger
  // GHL workflows (intake forms, confirmation SMS, reminders) without an extra integration.
  // GHL's form_embed.js handles dynamic iframe height — that's why scrolling is disabled
  // and we don't hardcode a height: the script auto-sizes to the form's content.
  React.useEffect(() => {
    if (document.querySelector('script[data-ghl-embed]')) return;
    const s = document.createElement('script');
    s.src = 'https://api.leadconnectorhq.com/js/form_embed.js';
    s.async = true;
    s.setAttribute('data-ghl-embed', 'true');
    document.body.appendChild(s);
  }, []);

  const bookingUrl = 'https://api.leadconnectorhq.com/widget/booking/9dpz0kkHYCnWG3YRyugD';

  return (
    <section style={{background:'var(--bg-cream)',padding:'80px var(--container-pad) 120px'}}>
      <div style={{maxWidth:1080,margin:'0 auto',textAlign:'center'}}>
        <h1 style={{fontFamily:'var(--font-display)',fontWeight:400,fontSize:'clamp(40px,5.4vw,68px)',lineHeight:1.05,letterSpacing:'-0.02em',margin:'0 0 18px'}}>
          Pick a time.
        </h1>
        <p style={{fontFamily:'var(--font-body)',fontSize:19,lineHeight:1.6,color:'var(--text-charcoal)',opacity:0.85,maxWidth:620,margin:'0 auto 40px'}}>
          45 minutes. A short conversation to figure out which of the 5 systems would save you the most time and money first. No pitch deck.
        </p>
        <div style={{borderRadius:16,overflow:'hidden',background:'#fff',border:'1px solid var(--border-hair)',boxShadow:'0 4px 24px rgba(0,0,0,0.04)',position:'relative'}}>
          <iframe
            src={bookingUrl}
            id="9dpz0kkHYCnWG3YRyugD_1778106916146"
            title="Book a 45-minute call with BJO Automation"
            style={{width:'100%',border:'none',overflow:'hidden',display:'block',background:'#fff',minHeight:680}}
            scrolling="no">
          </iframe>
        </div>
        <div style={{marginTop:18,fontFamily:'var(--font-body)',fontSize:13,color:'var(--text-muted)'}}>
          Calendar not loading?{' '}
          <a href={bookingUrl} target="_blank" rel="noopener noreferrer"
            style={{color:'var(--text-charcoal)',fontWeight:500}}>
            Open it in a new tab &rarr;
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About, Contact, BookACall });
