// About, Contact, Book pages — BJO Automations

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() {
  // ── Webhook URL ─────────────────────────────────────────────────
  // Points at the n8n workflow that handles the 60-second auto-reply, contact
  // logging, and downstream GHL contact creation. n8n is the orchestrator —
  // it forwards to GHL internally so we don't need to fire two webhooks here.
  const CONTACT_WEBHOOK = 'https://bjoventuresllc.app.n8n.cloud/webhook/contact-form-response';
  // ─────────────────────────────────────────────────────────────────

  const [form, setForm] = React.useState({ name: '', email: '', business: '', phone: '', message: '', smsConsent: false });
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error | consent_required

  const handleChange = (field) => (e) => setForm(prev => ({ ...prev, [field]: e.target.value }));
  const handleCheckbox = (field) => (e) => setForm(prev => ({ ...prev, [field]: e.target.checked }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;
    // A2P 10DLC compliance: if a phone is provided, the user must explicitly consent to SMS.
    if (form.phone && !form.smsConsent) {
      setStatus('consent_required');
      return;
    }
    setStatus('sending');
    try {
      await fetch(CONTACT_WEBHOOK, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          contact: {
            name: form.name,
            email: form.email,
            company: form.business,
            phone: form.phone,
            message: form.message,
          },
          customData: {
            source: 'website_contact_form',
            sms_consent: form.smsConsent,
            sms_consent_text: form.smsConsent
              ? 'By providing my phone number and checking this box, I agree to receive text messages from BJO Ventures LLC about my inquiry. Message frequency varies. Message and data rates may apply. Reply STOP to opt out, HELP for help.'
              : '',
            submitted_at: new Date().toISOString(),
          },
        }),
      });
      setStatus('sent');
      setForm({ name: '', email: '', business: '', phone: '', message: '', smsConsent: false });
    } catch (err) {
      console.error('Contact form error:', err);
      setStatus('error');
    }
  };

  const inputStyle = {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)'};
  const labelStyle = {fontFamily:'var(--font-body)',fontSize:12,letterSpacing:'0.12em',textTransform:'uppercase',color:'var(--accent-clay)',fontWeight:500};

  if (status === 'sent') return (
    <section style={{background:'var(--bg-cream)',padding:'140px var(--container-pad)',minHeight:'80vh'}}>
      <div style={{maxWidth:620,margin:'0 auto',textAlign:'center'}}>
        <h1 style={{fontFamily:'var(--font-display)',fontWeight:400,fontSize:'clamp(38px,5vw,56px)',lineHeight:1.1,letterSpacing:'-0.02em',margin:'0 0 20px'}}>
          Got it.
        </h1>
        <p style={{fontFamily:'var(--font-body)',fontSize:20,lineHeight:1.6,color:'var(--text-charcoal)',opacity:0.85,margin:'0 0 36px'}}>
          You&rsquo;ll hear back within 60 seconds &mdash; check your inbox. If you want to skip the back-and-forth and just talk, grab a time below.
        </p>
        <Button to="/book" variant="primary" icon="calendar">Book a 45-min call</Button>
      </div>
    </section>
  );

  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>
          {status === 'error' && (
            <div style={{fontFamily:'var(--font-body)',fontSize:15,color:'#c0392b',background:'#fdf0ef',padding:'14px 18px',borderRadius:8,marginBottom:22}}>
              Something went wrong. Try again, or <a href="/book" style={{color:'#c0392b',fontWeight:600}}>book a call instead</a>.
            </div>
          )}
          {status === 'consent_required' && (
            <div style={{fontFamily:'var(--font-body)',fontSize:15,color:'#7a5a2f',background:'var(--accent-clay-soft)',padding:'14px 18px',borderRadius:8,marginBottom:22}}>
              You entered a phone number. Please check the SMS consent box below before sending, or remove the phone number to submit by email only.
            </div>
          )}
          <form onSubmit={handleSubmit} style={{display:'flex',flexDirection:'column',gap:22,maxWidth:560}}>
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              <label style={labelStyle}>Name</label>
              <input value={form.name} onChange={handleChange('name')} placeholder="Your full name" required style={inputStyle}/>
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              <label style={labelStyle}>Email</label>
              <input type="email" value={form.email} onChange={handleChange('email')} placeholder="hello@example.com" required style={inputStyle}/>
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              <label style={labelStyle}>Business</label>
              <input value={form.business} onChange={handleChange('business')} placeholder="Your company's name" style={inputStyle}/>
            </div>
            {/* Phone + SMS consent \u2014 A2P 10DLC compliant opt-in. Phone is optional; consent only required if phone is provided. */}
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              <label style={labelStyle}>Phone <span style={{textTransform:'none',letterSpacing:0,color:'var(--text-muted)',fontWeight:400,marginLeft:8}}>(optional)</span></label>
              <input type="tel" value={form.phone} onChange={handleChange('phone')} placeholder="(555) 555-5555" style={inputStyle}/>
              <label style={{display:'flex',gap:10,alignItems:'flex-start',marginTop:4,cursor:'pointer'}}>
                <input
                  type="checkbox"
                  checked={form.smsConsent}
                  onChange={handleCheckbox('smsConsent')}
                  style={{marginTop:4,width:16,height:16,accentColor:'var(--accent-clay)',flexShrink:0}}
                />
                <span style={{fontFamily:'var(--font-body)',fontSize:13.5,lineHeight:1.5,color:'var(--text-muted)'}}>
                  By providing my phone number and checking this box, I agree to receive text messages from BJO Ventures LLC about my inquiry. Message frequency varies. Message and data rates may apply. Reply <strong>STOP</strong> to opt out, <strong>HELP</strong> for help. See our <a href="/sms-programs.html" style={{color:'var(--text-charcoal)',fontWeight:500}}>SMS Messaging Programs</a>, <a href="/terms.html" style={{color:'var(--text-charcoal)',fontWeight:500}}>SMS Terms</a>, and <a href="/privacy.html" style={{color:'var(--text-charcoal)',fontWeight:500}}>Privacy Policy</a>.
                </span>
              </label>
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              <label style={labelStyle}>What automation are you interested in, or where could AI help?</label>
              <textarea value={form.message} onChange={handleChange('message')} placeholder="Tell me in plain language." required rows={5} style={{...inputStyle,resize:'vertical'}}/>
            </div>
            <div style={{marginTop:8}}>
              <Button variant="primary" disabled={status === 'sending'}>
                {status === 'sending' ? 'Sending\u2026' : 'Send'}
              </Button>
            </div>
            {/* Belt-and-suspenders disclosure \u2014 visible to every submitter regardless of phone field state */}
            <div style={{marginTop:4,padding:'14px 16px',background:'rgba(196,154,108,0.08)',border:'1px solid rgba(196,154,108,0.25)',borderRadius:8,fontFamily:'var(--font-body)',fontSize:12.5,lineHeight:1.55,color:'var(--text-muted)'}}>
              <strong style={{color:'var(--text-charcoal)',fontWeight:600}}>About our messaging:</strong> If you provide your phone number and opt in above, BJO Ventures LLC may text you in response to your inquiry, including appointment confirmations, follow-ups, and replies from Bennett directly. Frequency varies based on the conversation. Message and data rates may apply. Reply STOP at any time to cancel; reply HELP for help. We never sell, share, or rent your phone number. Full terms at <a href="/sms-programs.html" style={{color:'var(--text-charcoal)',fontWeight:500}}>SMS Messaging Programs</a> and <a href="/privacy.html" style={{color:'var(--text-charcoal)',fontWeight:500}}>Privacy Policy</a>.
            </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 28px'}}>
          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>
        {/* A2P 10DLC consent disclosure — booking submits to GHL which fires a confirmation SMS, so the disclosure must be visible on this page. */}
        <div style={{maxWidth:680,margin:'0 auto 40px',padding:'16px 20px',background:'rgba(196,154,108,0.08)',border:'1px solid rgba(196,154,108,0.3)',borderRadius:10,fontFamily:'var(--font-body)',fontSize:13,lineHeight:1.55,color:'var(--text-muted)',textAlign:'left'}}>
          <strong style={{color:'var(--text-charcoal)',fontWeight:600}}>About SMS:</strong> By booking a call and providing your phone number below, you agree to receive text messages from BJO Ventures LLC about your appointment &mdash; including confirmation, reminders, and follow-ups. Message frequency varies. Message and data rates may apply. Reply <strong>STOP</strong> to opt out, <strong>HELP</strong> for help. See our <a href="/sms-programs.html" style={{color:'var(--text-charcoal)',fontWeight:500}}>SMS Messaging Programs</a>, <a href="/terms.html" style={{color:'var(--text-charcoal)',fontWeight:500}}>SMS Terms</a>, and <a href="/privacy.html" style={{color:'var(--text-charcoal)',fontWeight:500}}>Privacy Policy</a>.
        </div>
        <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 Automations"
            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 });
