const { Header, Card, Button, Input, Select } = window.AcornTitleDesignSystem_b6a569;

function SiteFooter() {
  return (
    <footer style={{ background: 'var(--surface-section)', padding: '64px 24px 40px' }}>
      <div style={{ maxWidth: 1160, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 48, marginBottom: 48 }}>
          <div style={{ flex: '1 1 220px' }}>
            <img src="assets/logo.svg" alt="Acorn Title" style={{ height: 40, marginBottom: 12 }} />
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-muted)', maxWidth: 260, margin: 0 }}>A trusted guide through title and escrow clear, calm, and always a step ahead.</p>
          </div>
          <div style={{ minWidth: 160 }}>
            <div style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, color: 'var(--text-heading)', marginBottom: 14 }}>Company</div>
            <a href="Acorn Homepage.html" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', marginBottom: 10 }}>Home</a>
            <a href="For Professionals.html" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', marginBottom: 10 }}>For Professionals</a>
            <a href="https://app.acorn-title.com" target="_blank" rel="noopener" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', marginBottom: 10 }}>Acorn App</a>
            <a href="Contact.html" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', marginBottom: 10 }}>Contact</a>
          </div>
          <div style={{ minWidth: 160 }}>
            <div style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, color: 'var(--text-heading)', marginBottom: 14 }}>Clients</div>
            <a href="Buying.html" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', marginBottom: 10 }}>Buying</a>
            <a href="Selling.html" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', marginBottom: 10 }}>Selling</a>
            <a href="Order Title.html" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', marginBottom: 10 }}>Order Title</a>
          </div>
          <div style={{ minWidth: 200 }}>
            <div style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, color: 'var(--text-heading)', marginBottom: 14 }}>Visit Us</div>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', margin: '0 0 10px', lineHeight: 1.5 }}>1100 NW Loop 410<br />Castle Hills, TX 78213</p>
            <a href="tel:+12104653033" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', marginBottom: 6 }}>(210) 465-3033</a>
            <a href="mailto:info@acorn-title.com" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none' }}>info@acorn-title.com</a>
          </div>
        </div>
        <div style={{ borderTop: '1px solid var(--warm-300)', paddingTop: 24, display: 'flex', flexWrap: 'wrap', gap: '10px 20px', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)' }}>© 2026 Acorn Title. Licensed Texas title insurance agent.</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 18px' }}>
            <a href="Privacy Policy.html" style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', textDecoration: 'none' }}>Privacy Policy</a>
            <a href="Terms of Use.html" style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', textDecoration: 'none' }}>Terms of Use</a>
            <a href="Cookie Policy.html" style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', textDecoration: 'none' }}>Cookie Policy</a>
            <a href="Accessibility.html" style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', textDecoration: 'none' }}>Accessibility</a>
            <a href="Website Disclaimer.html" style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', textDecoration: 'none' }}>Website Disclaimer</a>
            <button onClick={() => window.AcornConsent && window.AcornConsent.open()} style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', textDecoration: 'none', background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}>Cookie Settings</button>
          </div>
        </div>
      </div>
    </footer>
  );
}


const CONTACT_EMAIL = 'info@acorn-title.com';
const CONTACT_PHONE = '(210) 465-3033';
const CONTACT_PHONE_TEL = 'tel:+12104653033';
const CONTACT_ADDRESS_LINES = ['1100 NW Loop 410', 'Castle Hills, TX 78213'];

const logoSizeOverride = <style>{'@media(min-width:760px){header img[alt="Acorn Title"]{height:79px!important;width:196px!important}}.contact-nav .acorn-nav-desktop a:nth-child(6){color:var(--blue-600)!important}form input,form select,form textarea{box-sizing:border-box!important}'}</style>;

function AppQuickLink() {
  React.useEffect(() => {
    const header = document.querySelector('header');
    if (!header) return;
    const rightGroup = header.querySelector(':scope > div > div:last-child');
    if (!rightGroup || rightGroup.querySelector('.app-quick-link')) return;
    const a = document.createElement('a');
    a.href = 'https://app.acorn-title.com';
    a.target = '_blank';
    a.rel = 'noopener';
    a.className = 'app-quick-link';
    a.setAttribute('aria-label', 'Open the Acorn App');
    a.style.cssText = 'display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0;color:inherit';
    a.innerHTML = '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="6.5" y="2" width="11" height="20" rx="3"></rect><rect x="10.3" y="3.4" width="3.4" height="1" rx="0.5" fill="currentColor" stroke="none"></rect></svg>';
    rightGroup.insertBefore(a, rightGroup.firstChild);
    return () => a.remove();
  }, []);
  return null;
}

function LogoHomeLink() {
  React.useEffect(() => {
    const header = document.querySelector('header');
    if (!header) return;
    const img = header.querySelector('img[alt="Acorn Title"]');
    if (!img || img.closest('a')) return;
    const a = document.createElement('a');
    a.href = 'Acorn Homepage.html';
    a.setAttribute('aria-label', 'Acorn Title home');
    a.style.cssText = 'display:flex;align-items:center';
    img.parentNode.insertBefore(a, img);
    a.appendChild(img);
    return () => {
      if (a.parentNode) { a.parentNode.insertBefore(img, a); a.remove(); }
    };
  }, []);
  return null;
}


const headerLinks = () => [
  { label: 'Home', href: 'Acorn Homepage.html' },
  { label: 'Buying', href: 'Buying.html' },
  { label: 'Selling', href: 'Selling.html' },
  { label: 'For Professionals', href: 'For Professionals.html' },
  { label: 'About', href: 'About.html' },
  { label: 'Contact', href: '#' },
];

function Eyebrow({ children }) {
  return <div style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-caption-size)', fontWeight: 700, color: 'var(--blue-600)', textTransform: 'uppercase', letterSpacing: 'var(--text-caption-tracking)', marginBottom: 'var(--space-3)' }}>{children}</div>;
}
function H2({ children, align = 'left', style }) {
  return <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--text-h2-weight)', fontSize: 'clamp(26px, 3.6vw, 38px)', lineHeight: 'var(--text-h2-lh)', color: 'var(--text-heading)', margin: '0 0 var(--space-5)', textAlign: align, ...style }}>{children}</h2>;
}
function Section({ children, background, id, pad }) {
  return <section id={id} style={{ background, padding: pad || 'var(--space-9) var(--space-5)' }}><div style={{ maxWidth: 1160, margin: '0 auto' }}>{children}</div></section>;
}

function Hero() {
  return (
    <React.Fragment>
      <div className="contact-nav">
        <Header logoSrc="assets/logo.svg" links={headerLinks()} ctaLabel="Order Title" onCtaClick={() => { window.location.href = 'Order Title.html'; }} />
        <AppQuickLink />
        <LogoHomeLink />
      </div>
      <Section background="var(--surface-page)" pad="72px var(--space-5) 56px">
        <div style={{ maxWidth: 640 }}>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--text-h1-weight)', fontSize: 'clamp(30px, 4.4vw, 44px)', lineHeight: 1.2, color: 'var(--text-heading)', margin: '0 0 20px' }}>We're Here. What Can We Help With?</h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6, color: 'var(--text-body)', margin: 0 }}>Whether you're in the middle of a closing, getting ready to start one, or simply have a question, we're easy to reach.</p>
        </div>
      </Section>
    </React.Fragment>
  );
}

function PathCard({ eyebrow, title, copy, cta, onClick, href }) {
  const ctaStyle = { fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15, color: 'var(--blue-600)', background: 'none', border: 'none', padding: 0, cursor: 'pointer', textDecoration: 'none' };
  return (
    <div className="path-card" style={{ flex: '1 1 260px', padding: '28px 26px', border: '1.5px solid var(--border-default)', borderRadius: 'var(--radius-lg)', transition: 'border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard)' }}>
      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 19, color: 'var(--text-heading)', margin: '0 0 10px' }}>{title}</h3>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: 'var(--text-body)', margin: '0 0 18px' }}>{copy}</p>
      {href
        ? <a href={href} style={ctaStyle}>{cta}</a>
        : <button onClick={onClick} style={ctaStyle}>{cta}</button>}
    </div>
  );
}

function QuickDirection({ onScrollForm }) {
  return (
    <Section background="var(--surface-section)" id="quick-direction">
      <div style={{ maxWidth: 560, marginBottom: 40 }}>
        <Eyebrow>Quick direction</Eyebrow>
        <H2>Maybe We Can Get You There Faster.</H2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: 'var(--text-body)', margin: 0 }}>Not everything needs a contact form.</p>
      </div>
      <style>{'.path-card:hover{border-color:var(--blue-300);box-shadow:var(--shadow-sm)}'}</style>
      <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
        <PathCard title="Ready to Open Title?" copy="You don't need to send us a message. You can start your order right now." cta="Order Title →" onClick={() => { window.location.href = 'Order Title.html'; }} />
        <PathCard title="Already Have a Closing With Us?" copy="Have a question about your transaction? Let us know which property or file you're contacting us about so we can get you to the right person." cta={`Call ${CONTACT_PHONE} →`} href={CONTACT_PHONE_TEL} />
        <PathCard title="Just Have a Question?" copy="You're in the right place. Send us a message below." cta="Send a Message ↓" onClick={onScrollForm} />
      </div>
    </Section>
  );
}

const inquiryOptions = [
  { value: '', label: 'Select one' },
  { value: 'starting', label: 'Starting a Closing' },
  { value: 'existing', label: 'An Existing Closing' },
  { value: 'buying', label: 'Buying a Home' },
  { value: 'selling', label: 'Selling a Home' },
  { value: 'professional', label: 'Professional / Business Inquiry' },
  { value: 'other', label: 'Something Else' },
];

const requiredFriendly = {
  name: 'Please share your name.',
  email: 'Please enter an email address so we can reach you.',
  inquiry: "Please let us know what you're reaching out about.",
  message: "Please include a short message so we know how to help.",
};

const textareaStyle = {
  width: '100%', padding: '12px 14px', borderRadius: 'var(--radius-sm)', border: '1px solid var(--border-default)',
  fontFamily: 'var(--font-body)', fontSize: 15, background: '#fff', color: 'var(--text-heading)',
  outline: 'none', boxSizing: 'border-box', minHeight: 130, resize: 'vertical',
  transition: 'box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard)',
};
function focusIn(e) { e.target.style.borderColor = 'var(--brand-primary)'; e.target.style.boxShadow = '0 0 0 3px var(--blue-100)'; }
function focusOut(e) { e.target.style.borderColor = 'var(--border-default)'; e.target.style.boxShadow = 'none'; }

function ContactForm({ onSubmitted }) {
  const [data, setData] = React.useState({ name: '', email: '', phone: '', inquiry: '', propertyAddress: '', message: '' });
  const [errors, setErrors] = React.useState({});
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState('');
  const fieldRefs = React.useRef({});
  const set = (k) => (e) => setData((d) => ({ ...d, [k]: e.target.value }));
  const reg = (k) => (el) => { fieldRefs.current[k] = el; };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (submitting) return;
    const next = {};
    Object.keys(requiredFriendly).forEach((k) => { if (!String(data[k]).trim()) next[k] = requiredFriendly[k]; });
    setErrors(next);
    const firstKey = Object.keys(requiredFriendly).find((k) => next[k]);
    if (firstKey) { fieldRefs.current[firstKey]?.scrollIntoView({ behavior: 'smooth', block: 'center' }); return; }
    setSubmitting(true);
    setSubmitError('');
    const form = new FormData();
    form.append('form_type', 'contact');
    Object.entries(data).forEach(([k, v]) => form.append(k, v));
    fetch('submit-form.php', { method: 'POST', body: form })
      .then((r) => r.json())
      .then((res) => { setSubmitting(false); if (res.success) { onSubmitted(); } else { setSubmitError(res.message || 'Something went wrong. Please try again.'); } })
      .catch(() => { setSubmitting(false); setSubmitError('Something went wrong. Please try again or reach us by phone.'); });
  };

  const showProperty = data.inquiry === 'existing';

  return (
    <form onSubmit={handleSubmit} noValidate style={{ maxWidth: 640, margin: '0 auto' }}>
      <div style={{ marginBottom: 'var(--space-7)' }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 28, color: 'var(--text-heading)', margin: '0 0 12px' }}>Send Us a Note.</h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: 'var(--text-body)', margin: 0 }}>Tell us a little about what you need. You don't have to know who to ask for. We'll take it from there.</p>
      </div>
      <Card style={{ padding: 'var(--space-7)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 'var(--space-6) 24px' }}>
          <div ref={reg('name')} style={{ marginBottom: 'var(--space-6)' }}><Input label="Name" value={data.name} onChange={set('name')} error={errors.name} /></div>
          <div ref={reg('email')} style={{ marginBottom: 'var(--space-6)' }}><Input label="Email" type="email" value={data.email} onChange={set('email')} error={errors.email} /></div>
        </div>
        <div style={{ marginBottom: 'var(--space-6)' }}><Input label="Phone (optional)" type="tel" value={data.phone} onChange={set('phone')} /></div>
        <div ref={reg('inquiry')} style={{ marginBottom: 'var(--space-6)' }}>
          <label style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600, color: 'var(--text-heading)', marginBottom: 6 }}>I'm reaching out about...</label>
          <Select options={inquiryOptions} value={data.inquiry} onChange={set('inquiry')} />
          {errors.inquiry && <div style={{ color: 'var(--error)', fontSize: 13, marginTop: 6 }}>{errors.inquiry}</div>}
        </div>
        {showProperty && (
          <div style={{ marginBottom: 'var(--space-6)' }}>
            <Input label="Property address" value={data.propertyAddress} onChange={set('propertyAddress')} />
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', marginTop: 6 }}>If your question is about a specific transaction, this helps us find it faster.</div>
          </div>
        )}
        <div ref={reg('message')} style={{ marginBottom: 'var(--space-2)' }}>
          <label style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600, color: 'var(--text-heading)', marginBottom: 6 }}>Message</label>
          <textarea style={textareaStyle} value={data.message} onChange={set('message')} onFocus={focusIn} onBlur={focusOut} />
          {errors.message && <div style={{ color: 'var(--error)', fontSize: 13, marginTop: 6 }}>{errors.message}</div>}
        </div>
      </Card>
      <div style={{ textAlign: 'center', marginTop: 'var(--space-7)' }}>
        {submitError && <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--red-600, #B4453B)', margin: '0 0 12px' }}>{submitError}</p>}
        <Button type="submit" variant="primary" size="lg" disabled={submitting} style={{ minWidth: 220, justifyContent: 'center' }}>{submitting ? 'Sending…' : 'Send Message'}</Button>
      </div>
    </form>
  );
}

function ContactConfirmation({ onReset }) {
  return (
    <div style={{ maxWidth: 520, margin: '0 auto', textAlign: 'center' }}>
      <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--success-bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px' }}>
        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="var(--success)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg>
      </div>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 28, color: 'var(--text-heading)', margin: '0 0 14px' }}>We've Got It.</h2>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.6, color: 'var(--text-body)', margin: '0 0 28px' }}>Your message is on its way to the Acorn team. We'll make sure it reaches the right person and get back to you as soon as we can.</p>
      <Button variant="secondary" onClick={onReset}>Send another message</Button>
    </div>
  );
}

function ContactFormSection() {
  const [submitted, setSubmitted] = React.useState(false);
  React.useEffect(() => {
    if (submitted) document.getElementById('contact-form')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }, [submitted]);
  return (
    <Section background="var(--surface-page)" id="contact-form">
      {submitted ? <ContactConfirmation onReset={() => setSubmitted(false)} /> : <ContactForm onSubmitted={() => setSubmitted(true)} />}
    </Section>
  );
}

function VisitSection() {
  const mapsUrl = 'https://maps.google.com/?q=' + encodeURIComponent(CONTACT_ADDRESS_LINES.join(', '));
  return (
    <Section background="var(--surface-section)">
      <div style={{ maxWidth: 640, marginBottom: 40 }}>
        <Eyebrow>Visit us</Eyebrow>
        <H2>Come See Us.</H2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: 'var(--text-body)', margin: 0 }}>Closing with us in person? We'll make sure your appointment is set, and you know exactly where to go and what to expect before you arrive.</p>
      </div>
      <div style={{ display: 'flex', gap: 48, flexWrap: 'wrap' }}>
        <div style={{ flex: '1 1 280px' }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 19, color: 'var(--text-heading)', margin: '0 0 10px' }}>Acorn Title</h3>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: 'var(--text-body)', margin: '0 0 20px' }}>{CONTACT_ADDRESS_LINES[0]}<br />{CONTACT_ADDRESS_LINES[1]}</p>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.7, color: 'var(--text-body)', margin: '0 0 24px' }}>
            <a href={CONTACT_PHONE_TEL} style={{ display: 'block' }}>{CONTACT_PHONE}</a>
            <a href={'mailto:' + CONTACT_EMAIL} style={{ display: 'block' }}>{CONTACT_EMAIL}</a>
            <span style={{ display: 'block', color: 'var(--text-muted)' }}>Monday – Friday, 9:00 AM – 5:00 PM</span>
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <Button variant="primary" onClick={() => { window.open(mapsUrl, '_blank'); }}>Get Directions</Button>
            <Button variant="secondary" onClick={() => { window.location.href = CONTACT_PHONE_TEL; }}>Call Acorn</Button>
          </div>
        </div>
        <div style={{ flex: '1 1 320px', minWidth: 280 }}>
          <div style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--border-default)' }}>
            <iframe title="Acorn Title location" src={'https://maps.google.com/maps?q=' + encodeURIComponent(CONTACT_ADDRESS_LINES.join(', ')) + '&output=embed'} style={{ width: '100%', height: 260, border: 0, display: 'block' }} loading="lazy"></iframe>
          </div>
        </div>
      </div>
    </Section>
  );
}

function ClosingSection() {
  return (
    <Section background="var(--surface-page)" pad="var(--space-9) var(--space-5) 110px">
      <div style={{ maxWidth: 560, margin: '0 auto', textAlign: 'center' }}>
        <H2 align="center">Questions Are Welcome Here.</H2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.65, color: 'var(--text-body)', margin: '0 0 28px' }}>Big question, small question, first closing or fiftieth. If we can help make something clearer, just ask.</p>
        <p style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22, color: 'var(--blue-700)', margin: 0 }}>We'll help you figure out what comes next.</p>
      </div>
    </Section>
  );
}

function ContactPage() {
  const scrollTo = (id) => document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  return (
    <div>
      {logoSizeOverride}
      <Hero />
      <QuickDirection onScrollForm={() => scrollTo('contact-form')} />
      <ContactFormSection />
      <VisitSection />
      <ClosingSection />
      <SiteFooter />
    </div>
  );
}

window.ContactPage = ContactPage;